Pixelry UI Library

A beautiful, feature-rich React component library for modern web apps.
Pixelry focuses on accessibility, customization, and developer experience.

✨ Features

• Multiple visual variants (modern, glassmorphism, gradient, minimal)
• Accessible and keyboard-friendly
• Customizable via Tailwind CSS
• Storybook documentation and live playground
• Components: Carousel, Switch, Checkbox, Radio, and more

🚀 Installation

npm install pixelry-ui

Peer dependencies:

• React (>=17)
• Tailwind CSS (>=3)

📦 Usage

Import and use any component:

import { Carousel, Switch, Checkbox, Radio } from 'pixelry';

<Carousel
  items={mySlides}
  variant="modern"
  autoPlay={true}
  autoPlayInterval={4000}
  showDots={true}
  showArrows={true}
  height="h-96"
/>

All components accept props for customization.
See Storybook for full API.

📚 Storybook & Documentation

To explore all components and variants interactively:

npm run storybook

Open http://localhost:6006 in your browser.

🎨 Customization

All styling uses Tailwind CSS utility classes.
Override colors, sizes, and variants via props:

<Switch color="green" size="large" variant="ios" />
<Checkbox color="purple" variant="rounded" />
<Radio color="red" variant="card" />

🧩 Components & API

Carousel

| Prop | Type | Default | Description | |------------------|-----------|-----------|---------------------------------------------| | items | array | required | Slide data (see Storybook for format) | | variant | string | 'modern' | Style variant: 'modern', 'glass', etc. | | autoPlay | boolean | false | Enable automatic slideshow | | autoPlayInterval | number | 4000 | Interval between slides (ms) | | showDots | boolean | true | Show dot indicators | | showArrows | boolean | true | Show navigation arrows | | showControls | boolean | true | Show play/pause controls | | height | string | 'h-96' | Carousel height (Tailwind class) |

Edge Cases:

• If items is empty, carousel renders nothing.
• If only one item, disables navigation controls.
• If autoPlayInterval < 1000, defaults to 1000ms.
• Keyboard navigation: left/right arrows, spacebar toggles play/pause.
• Hovering pauses auto-play.

Switch

| Prop | Type | Default | Description | |-----------|-----------|-----------|---------------------------------------------| | checked | boolean | false | Switch state | | disabled | boolean | false | Disable interaction | | loading | boolean | false | Show loading spinner | | icons | boolean | false | Show icons on switch | | size | string | 'medium' | 'small', 'medium', 'large' | | variant | string | 'modern' | 'modern', 'ios', 'minimal', 'default' | | color | string | 'blue' | 'blue', 'green', 'purple', 'red', 'orange' | | onChange | function | | Callback when toggled |

Checkbox

| Prop | Type | Default | Description | |--------------|-----------|-----------|---------------------------------------------| | checked | boolean | false | Checkbox state | | indeterminate| boolean | false | Indeterminate state | | disabled | boolean | false | Disable interaction | | size | string | 'medium' | 'small', 'medium', 'large' | | variant | string | 'modern' | 'modern', 'rounded', 'minimal', 'default' | | color | string | 'blue' | 'blue', 'green', 'purple', 'red', 'orange' | | onChange | function | | Callback when toggled |

Radio

| Prop | Type | Default | Description | |-----------|-----------|-----------|---------------------------------------------| | checked | boolean | false | Radio state | | disabled | boolean | false | Disable interaction | | size | string | 'medium' | 'small', 'medium', 'large' | | variant | string | 'modern' | 'modern', 'card', 'minimal', 'default' | | color | string | 'blue' | 'blue', 'green', 'purple', 'red', 'orange' | | onChange | function | | Callback when selected |

Button

| Prop | Type | Default | Description | |-----------|-----------|-----------|---------------------------------------------| | children | node | required | Button label or content | | variant | string | 'modern' | 'modern', 'minimal', 'glass', 'default' | | color | string | 'blue' | 'blue', 'green', 'purple', 'red', 'orange' | | size | string | 'medium' | 'small', 'medium', 'large' | | disabled | boolean | false | Disable button | | loading | boolean | false | Show loading spinner | | icon | node | | Optional icon | | onClick | function | | Click handler |

Usage:

<Button color="green" variant="glass" size="large" onClick={handleClick}>
  Submit
</Button>

Input

| Prop | Type | Default | Description | |-----------|-----------|-----------|---------------------------------------------| | value | string | | Input value | | placeholder| string | | Placeholder text | | type | string | 'text' | 'text', 'password', 'email', etc. | | disabled | boolean | false | Disable input | | size | string | 'medium' | 'small', 'medium', 'large' | | variant | string | 'modern' | 'modern', 'minimal', 'glass', 'default' | | color | string | 'blue' | 'blue', 'green', 'purple', 'red', 'orange' | | icon | node | | Optional icon | | onChange | function | | Change handler |

Usage:

<Input
  value={search}
  placeholder="Search..."
  icon={<SearchIcon />}
  onChange={e => setSearch(e.target.value)}
/>

Tabs

| Prop | Type | Default | Description | |-----------|-----------|-----------|---------------------------------------------| | tabs | array | required | Array of tab objects { label, value } | | value | string | | Currently selected tab value | | onChange | function | | Tab change handler | | variant | string | 'modern' | 'modern', 'minimal', 'glass', 'default' | | color | string | 'blue' | 'blue', 'green', 'purple', 'red', 'orange' | | size | string | 'medium' | 'small', 'medium', 'large' | | disabled | boolean | false | Disable all tabs |

Usage:

<Tabs
  tabs={[
    { label: 'Home', value: 'home' },
    { label: 'Profile', value: 'profile' },
    { label: 'Settings', value: 'settings' }
  ]}
  value={activeTab}
  onChange={setActiveTab}
/>

🧑‍💻 Troubleshooting

• Component not visible in Storybook:
  Check your story file naming (*.stories.tsx), and restart Storybook.
• Tailwind classes not applied:
  Ensure your Tailwind config includes Pixelry’s source folder.
• Dynamic colors not working:
  Use static Tailwind classes, not string interpolation.
• Accessibility issues:
  All components use proper ARIA roles and keyboard navigation.

🛠️ Development

Clone the repo and install dependencies:

git clone https://github.com/navneetnicky/pixelry-ui
cd pixelry-ui
npm install

Start Storybook for local development:

npm run storybook

🤝 Contributing

Will add in some days

📄 License

MIT

Credits

Built with ❤️ by Navneet vaishnav.