Horizon UI

A responsive and accessible component library built with React and styled-components.

🚀 Installation

npm install @horizon-ui-brijesh/horizon

🧱 Getting Started

All components must be wrapped with the HorizonUI component to ensure proper theming and styling:

import { HorizonUI, Button } from '@horizon-ui-brijesh/horizon';

function App() {
  return (
    <HorizonUI>
      <Button primary>Click Me</Button>
    </HorizonUI>
  );
}

🧱 Components

HorizonUI

The root wrapper component that provides theme context and global styles. All other components must be wrapped with this component.

import { HorizonUI } from '@horizon-ui-brijesh/horizon';

<HorizonUI>
  {/* Your components here */}
</HorizonUI>

Button

A responsive button component with primary and default styles.

import { HorizonUI, Button } from '@horizon-ui-brijesh/horizon';

<HorizonUI>
  <Button primary onClick={() => alert('Clicked!')}>Click Me</Button>
</HorizonUI>

Props:

• primary (boolean) - Applies primary color styles when true
• disabled (boolean) - Disables the button and changes styling
• onClick (function) - Triggered when clicked
• children (node) - Button label/content

Dropdown

A customizable dropdown component with support for custom rendering and responsive design.

import { HorizonUI, Dropdown } from '@horizon-ui-brijesh/horizon';

<HorizonUI>
  <Dropdown
    options={[
      { label: 'Option 1', value: '1' },
      { label: 'Option 2', value: '2' }
    ]}
    onChange={(value) => console.log(value)}
  />
</HorizonUI>

Props:

• options (array) - Array of options to display
• value (any) - Currently selected value
• onChange (function) - Called when an option is selected
• placeholder (string) - Placeholder text when no option is selected
• disabled (boolean) - Disables the dropdown
• variant (string) - Style variant ('filled' or 'outlined')
• fullWidth (boolean) - Makes the dropdown take full width
• renderOption (function) - Custom render function for options
• renderValue (function) - Custom render function for selected value

SearchBar

A responsive search input component with a search button.

import { HorizonUI, SearchBar } from '@horizon-ui-brijesh/horizon';

<HorizonUI>
  <SearchBar placeholder="Search items..." />
</HorizonUI>

Props:

• placeholder (string) - Placeholder text for the search input
• onSearch (function) - Called when search is triggered

Sidebar

A collapsible sidebar component with navigation links.

import { HorizonUI, Sidebar } from '@horizon-ui-brijesh/horizon';

<HorizonUI>
  <Sidebar collapsed={false} />
</HorizonUI>

Props:

• collapsed (boolean) - Controls the collapsed state
• onCollapse (function) - Called when collapse state changes

🎨 Theme

The library uses CSS variables for theming. You can customize the following variables:

:root {
  --primary: #6725F4;
  --hover-primary: rgba(103, 37, 244, 0.8);
  --text-active: #fff;
  --text-primary: #1E1730;
  --text-secondary: #565656;
  --body-bg: #FAFAFE;
  --primary-bg: #fff;
  --border-color: rgba(103, 37, 244, 0.1);
  --disabled: #ebe6e6;
}

📱 Responsive Design

All components are built with responsive design in mind and will adapt to different screen sizes. The library uses CSS variables for responsive typography:

:root {
  --responsive-font-base: 16px;
  --responsive-font-sm: 14px;
  --responsive-font-lg: 18px;
  --responsive-font-xl: 24px;
  --responsive-font-xxl: 32px;
}

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.