{"_id":"@ayushspn123/alpha-ui","name":"@ayushspn123/alpha-ui","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@ayushspn123/alpha-ui","version":"1.0.1","description":"Alpha UI: a polished React component library with Tailwind CSS and TypeScript","private":false,"main":"./dist/index.js","module":"./dist/index.esm.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"scripts":{"dev":"next dev","storybook":"storybook dev -p 6006","build-storybook":"storybook build","build:lib":"tsup src/index.ts --format cjs,esm --dts --tsconfig tsconfig.lib.json --external react,react-dom","build:docs":"next build","vercel-build":"next build","build":"npm run build:lib && npm run build-storybook","start":"next start","lint":"eslint .","prepublishOnly":"npm run build:lib"},"dependencies":{"@hookform/resolvers":"^3.9.1","@radix-ui/react-accordion":"1.2.12","@radix-ui/react-alert-dialog":"1.1.15","@radix-ui/react-aspect-ratio":"1.1.8","@radix-ui/react-avatar":"1.1.11","@radix-ui/react-checkbox":"1.3.3","@radix-ui/react-collapsible":"1.1.12","@radix-ui/react-context-menu":"2.2.16","@radix-ui/react-dialog":"1.1.15","@radix-ui/react-dropdown-menu":"2.1.16","@radix-ui/react-hover-card":"1.1.15","@radix-ui/react-label":"2.1.8","@radix-ui/react-menubar":"1.1.16","@radix-ui/react-navigation-menu":"1.2.14","@radix-ui/react-popover":"1.1.15","@radix-ui/react-progress":"1.1.8","@radix-ui/react-radio-group":"1.3.8","@radix-ui/react-scroll-area":"1.2.10","@radix-ui/react-select":"2.2.6","@radix-ui/react-separator":"1.1.8","@radix-ui/react-slider":"1.3.6","@radix-ui/react-slot":"1.2.4","@radix-ui/react-switch":"1.2.6","@radix-ui/react-tabs":"1.1.13","@radix-ui/react-toast":"1.2.15","@radix-ui/react-toggle":"1.1.10","@radix-ui/react-toggle-group":"1.1.11","@radix-ui/react-tooltip":"1.2.8","@vercel/analytics":"1.6.1","autoprefixer":"^10.4.20","class-variance-authority":"^0.7.1","clsx":"^2.1.1","cmdk":"1.1.1","date-fns":"4.1.0","embla-carousel-react":"8.6.0","input-otp":"1.4.2","lucide-react":"^0.564.0","next":"16.2.0","next-themes":"^0.4.6","react":"19.2.4","react-day-picker":"9.13.2","react-dom":"19.2.4","react-hook-form":"^7.54.1","react-resizable-panels":"^2.1.7","recharts":"2.15.0","sonner":"^1.7.1","tailwind-merge":"^3.3.1","vaul":"^1.1.2","zod":"^3.24.1"},"devDependencies":{"@storybook/addon-essentials":"^8.0.0","@storybook/addon-interactions":"^8.0.0","@storybook/addon-links":"^8.0.0","@storybook/addon-onboarding":"^8.0.0","@storybook/blocks":"^8.0.0","@storybook/react":"^8.0.0","@storybook/react-webpack5":"^8.0.0","@tailwindcss/postcss":"^4.2.0","@types/node":"^22","@types/react":"19.2.14","@types/react-dom":"19.2.3","postcss":"^8.5","storybook":"^8.0.0","tailwindcss":"^4.2.0","tsup":"^8.0.0","tw-animate-css":"1.3.3","typescript":"5.7.3"},"gitHead":"9068214ee75bad5880df0494e3b2704f2cd78795","_id":"@ayushspn123/alpha-ui@1.0.1","_nodeVersion":"24.11.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-t9OMgc8KL6Qk4q4Qd8RUKL+qde+61Ji4Ph6b08IcXxr4zUVqSwmo8BXkgY1bsev7LCyuH06blx+8s+R9OO0Pmg==","shasum":"4951de678416bde32e25ced0889c640637abf915","tarball":"https://registry.npmjs.org/@ayushspn123/alpha-ui/-/alpha-ui-1.0.1.tgz","fileCount":8,"unpackedSize":504142,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIG2iysY44x2/x1LwrEGjpx08ff8lEIgGFQxxevS6PD6LAiBvtuaXhl7TbNzkXzJcA4UCRAPPsoSzXm82pArTz4lgiA=="}]},"_npmUser":{"name":"ayushspn123","email":"ayushvermaspn@gmail.com"},"directories":{},"maintainers":[{"name":"ayushspn123","email":"ayushvermaspn@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/alpha-ui_1.0.1_1775807784825_0.9379613864728313"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-10T07:56:24.667Z","1.0.1":"2026-04-10T07:56:25.011Z","modified":"2026-04-10T07:56:25.280Z"},"maintainers":[{"name":"ayushspn123","email":"ayushvermaspn@gmail.com"}],"description":"Alpha UI: a polished React component library with Tailwind CSS and TypeScript","readme":"# Alpha UI - React Component Library\n\nA modern, polished React component library built with TypeScript, Tailwind CSS, and CSS-in-JS. Alpha UI provides a comprehensive set of accessible, customizable components for building beautiful user interfaces.\n\n## Features\n\n✨ **20+ Production-Ready Components**\n- Basic Components: Button, Input, Textarea, Select, Calendar, Checkbox, Radio Group, Switch, Card, Badge, Alert, Avatar\n- Layout Components: Container, Grid, Navbar, Sidebar\n- Interactive Components: Modal, Dropdown, Tabs, Accordion, Tooltip, Toast\n- Data Display: Table, Pagination, Stepper, TransferList\n\n🎨 **Beautiful Styling**\n- Built with Tailwind CSS\n- Dark mode support out of the box\n- Fully customizable through design tokens\n- Smooth transitions and animations\n\n♿ **Accessibility First**\n- Semantic HTML\n- ARIA attributes\n- Keyboard navigation support\n- Screen reader optimized\n\n📚 **Complete Documentation**\n- Storybook integration for interactive component exploration\n- TypeScript definitions\n- Comprehensive prop documentation\n- Usage examples for each component\n\n🚀 **Developer Experience**\n- Zero-config setup\n- ESM and CommonJS support\n- Tree-shakeable exports\n- Small bundle size (~15KB gzipped)\n\n## Installation\n\n```bash\nnpm install alpha-ui\n# or\nyarn add alpha-ui\n# or\npnpm add alpha-ui\n```\n\n## Quick Start\n\n```tsx\nimport { Button, Card, Input } from 'alpha-ui'\nimport 'alpha-ui/styles.css'\n\nexport default function App() {\n  return (\n    <div>\n      <Card>\n        <h1>Welcome to Alpha UI</h1>\n        <Input placeholder=\"Enter your name\" />\n        <Button variant=\"primary\">Submit</Button>\n      </Card>\n    </div>\n  )\n}\n```\n\n## Documentation and Examples\n\n- Full docs site: [app/docs/page.tsx](app/docs/page.tsx)\n- Interactive examples (Storybook):\n\n```bash\nnpm run storybook\n```\n\n- Static Storybook build:\n\n```bash\nnpm run build-storybook\n```\n\n## Components\n\n### Basic Components\n\n#### Button\n```tsx\nimport { Button } from 'alpha-ui'\n\n// Variants: contained, outlined, text (plus legacy variants)\n// Colors: primary, secondary, success, error, warning, info, inherit\n// Sizes: small|medium|large (also sm|md|lg)\n<Button variant=\"contained\" color=\"primary\" size=\"medium\">\n  Click me\n</Button>\n\n// Loading state\n<Button isLoading loadingPosition=\"start\">Loading...</Button>\n\n// Icons and full width\n<Button startIcon={<Plus />} endIcon={<ArrowRight />} fullWidth>\n  Continue\n</Button>\n\n// Disabled state\n<Button disabled>Disabled</Button>\n```\n\n#### Input\n```tsx\nimport { Input } from 'alpha-ui'\n\n<Input\n  label=\"Email\"\n  type=\"email\"\n  placeholder=\"you@example.com\"\n  variant=\"default\"\n  size=\"md\"\n  error=\"Invalid email\"\n  helperText=\"Enter a valid email address\"\n/>\n```\n\n#### Card\n```tsx\nimport { Card, CardHeader, CardTitle, CardContent, CardFooter } from 'alpha-ui'\n\n<Card variant=\"elevated\">\n  <CardHeader>\n    <CardTitle>Card Title</CardTitle>\n  </CardHeader>\n  <CardContent>\n    <p>Card content goes here</p>\n  </CardContent>\n  <CardFooter>\n    {/* Footer content */}\n  </CardFooter>\n</Card>\n```\n\n#### Badge\n```tsx\nimport { Badge } from 'alpha-ui'\n\n// Variants: default, primary, success, warning, danger\n// Sizes: sm, md, lg\n<Badge variant=\"primary\" size=\"md\">\n  New\n</Badge>\n```\n\n#### Alert\n```tsx\nimport { Alert, AlertTitle, AlertDescription } from 'alpha-ui'\n\n<Alert variant=\"success\" closable>\n  <AlertTitle>Success!</AlertTitle>\n  <AlertDescription>Your changes have been saved.</AlertDescription>\n</Alert>\n```\n\n#### Avatar\n```tsx\nimport { Avatar, AvatarImage, AvatarFallback } from 'alpha-ui'\n\n<Avatar size=\"md\" shape=\"circle\">\n  <AvatarImage src=\"https://avatar.com/user.jpg\" alt=\"User\" />\n  <AvatarFallback>JD</AvatarFallback>\n</Avatar>\n```\n\n### Layout Components\n\n#### Container\n```tsx\nimport { Container } from 'alpha-ui'\n\n// Sizes: sm, md, lg, xl, full\n// Padding: sm, md, lg\n<Container size=\"xl\" py=\"lg\">\n  <h1>Centered content</h1>\n</Container>\n```\n\n#### Grid\n```tsx\nimport { Grid } from 'alpha-ui'\n\n// Columns: 1-12, Responsive: true/false\n<Grid columns={3} gap=\"md\" responsive>\n  <div>Item 1</div>\n  <div>Item 2</div>\n  <div>Item 3</div>\n</Grid>\n```\n\n#### Navbar\n```tsx\nimport { Navbar, NavbarBrand, NavbarNav, NavbarItem } from 'alpha-ui'\n\n<Navbar>\n  <NavbarBrand>\n    <h1>MyApp</h1>\n    <NavbarNav>\n      <NavbarItem href=\"/\">Home</NavbarItem>\n      <NavbarItem href=\"/about\">About</NavbarItem>\n      <NavbarItem href=\"/contact\">Contact</NavbarItem>\n    </NavbarNav>\n  </NavbarBrand>\n</Navbar>\n```\n\n#### Sidebar\n```tsx\nimport { Sidebar, SidebarContent, SidebarItem } from 'alpha-ui'\n\n<Sidebar>\n  <SidebarContent>\n    <SidebarItem href=\"/\" active>\n      Dashboard\n    </SidebarItem>\n    <SidebarItem href=\"/settings\">\n      Settings\n    </SidebarItem>\n  </SidebarContent>\n</Sidebar>\n```\n\n### Interactive Components\n\n#### Modal\n```tsx\nimport { Modal, ModalHeader, ModalTitle, ModalBody, ModalFooter } from 'alpha-ui'\nimport { useState } from 'react'\n\nfunction MyModal() {\n  const [isOpen, setIsOpen] = useState(false)\n  \n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} size=\"md\">\n        <ModalHeader>\n          <ModalTitle>Modal Title</ModalTitle>\n        </ModalHeader>\n        <ModalBody>Modal content</ModalBody>\n        <ModalFooter>\n          <Button onClick={() => setIsOpen(false)}>Close</Button>\n        </ModalFooter>\n      </Modal>\n    </>\n  )\n}\n```\n\n#### Tabs\n```tsx\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from 'alpha-ui'\n\n<Tabs defaultValue=\"tab1\">\n  <TabsList>\n    <TabsTrigger value=\"tab1\">Tab 1</TabsTrigger>\n    <TabsTrigger value=\"tab2\">Tab 2</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"tab1\">Content 1</TabsContent>\n  <TabsContent value=\"tab2\">Content 2</TabsContent>\n</Tabs>\n```\n\n#### Accordion\n```tsx\nimport { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'alpha-ui'\n\n<Accordion>\n  <AccordionItem value=\"item1\">\n    <AccordionTrigger>Item 1</AccordionTrigger>\n    <AccordionContent>Content 1</AccordionContent>\n  </AccordionItem>\n  <AccordionItem value=\"item2\">\n    <AccordionTrigger>Item 2</AccordionTrigger>\n    <AccordionContent>Content 2</AccordionContent>\n  </AccordionItem>\n</Accordion>\n```\n\n#### Tooltip\n```tsx\nimport { Tooltip } from 'alpha-ui'\n\n<Tooltip content=\"Help text\" position=\"top\">\n  <Button>Hover me</Button>\n</Tooltip>\n```\n\n#### Toast\n```tsx\nimport { Toast, useToast } from 'alpha-ui'\n\nfunction MyComponent() {\n  const { addToast } = useToast()\n  \n  return (\n    <Button onClick={() => addToast('Success!', 'success')}>\n      Show Toast\n    </Button>\n  )\n}\n```\n\n### Data Display Components\n\n#### Table\n```tsx\nimport { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from 'alpha-ui'\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Name</TableHead>\n      <TableHead>Email</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>John Doe</TableCell>\n      <TableCell>john@example.com</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>\n```\n\n#### Pagination\n```tsx\nimport { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext } from 'alpha-ui'\n\n<Pagination>\n  <PaginationContent>\n    <PaginationItem>\n      <PaginationPrevious href=\"#\" />\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href=\"#\" isActive>1</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href=\"#\">2</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationNext href=\"#\" />\n    </PaginationItem>\n  </PaginationContent>\n</Pagination>\n```\n\n## Publishing to npm\n\n1. Verify package metadata in [package.json](package.json):\n  - `name`\n  - `version`\n  - `main/module/types`\n  - `exports`\n2. Run quality checks and build:\n\n```bash\nnpm run lint\nnpm run build:lib\nnpm run build-storybook\n```\n\n3. Login to npm:\n\n```bash\nnpm login\n```\n\n4. Dry-run package contents:\n\n```bash\nnpm pack --dry-run\n```\n\n5. Publish:\n\n```bash\nnpm publish --access public\n```\n\n6. For updates:\n\n```bash\nnpm version patch   # or minor / major\nnpm publish --access public\n```\n\n#### Stepper\n```tsx\nimport { Stepper, StepperItem, StepperContent } from 'alpha-ui'\n\n<Stepper activeStep={1}>\n  <StepperItem step={0}>\n    <StepperContent>\n      <h4>Step 1</h4>\n      <p>First step content</p>\n    </StepperContent>\n  </StepperItem>\n  <StepperItem step={1}>\n    <StepperContent>\n      <h4>Step 2</h4>\n      <p>Second step content</p>\n    </StepperContent>\n  </StepperItem>\n</Stepper>\n```\n\n## Customization\n\nAll components support Tailwind CSS classes and can be customized through the `className` prop:\n\n```tsx\n<Button className=\"w-full text-lg\">\n  Full Width Button\n</Button>\n\n<Card className=\"max-w-2xl\">\n  Custom width card\n</Card>\n```\n\n## Dark Mode\n\nAlpha UI components include built-in dark mode support. Enable it by adding the `dark` class to your root element:\n\n```tsx\n<div className=\"dark\">\n  <MyComponent />\n</div>\n```\n\n## Storybook Documentation\n\nView interactive component documentation and examples:\n\n```bash\nnpm run storybook\n```\n\nThis opens Storybook at `http://localhost:6006` where you can explore all components with interactive controls.\n\n## TypeScript Support\n\nAlpha UI is built with TypeScript and provides full type definitions:\n\n```tsx\nimport { Button, type ButtonProps } from 'alpha-ui'\n\nconst CustomButton: React.FC<ButtonProps> = (props) => {\n  return <Button {...props} />\n}\n```\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## License\n\nMIT\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## Support\n\nFor issues, questions, or suggestions, please create an issue on GitHub.\n\n---\n\nBuilt with ❤️ by the Alpha UI team\n","readmeFilename":"README.md","_rev":"1-9d18a9210ebb28edb8dc1f5aa555ef9e"}