{"_id":"21st-kit","_rev":"3-888f8a42f90716a025092e333c99b2de","name":"21st-kit","dist-tags":{"latest":"0.1.4"},"versions":{"0.1.3":{"name":"21st-kit","version":"0.1.3","keywords":["react","ui","components","design-system","typescript"],"author":{"name":"Bharadwaj Apittu"},"license":"MIT","_id":"21st-kit@0.1.3","maintainers":[{"name":"bharathpyro","email":"bharathpyro@gmail.com"}],"homepage":"https://github.com/yourusername/atomix-ui#readme","bugs":{"url":"https://github.com/yourusername/atomix-ui/issues"},"dist":{"shasum":"09ccb276b2a9234e0e3629d8d70af6fafd17ba1a","tarball":"https://registry.npmjs.org/21st-kit/-/21st-kit-0.1.3.tgz","fileCount":29,"integrity":"sha512-WyppgNXqa0IX8cCFNJWOxIVOF3AJ8x3jzFTBiCF+SBpZNwGxLbDndpTwGsEaZOdYwfXicjL1KUh75DeIGCsftQ==","signatures":[{"sig":"MEQCIC8Unf/03QUXMdo6A3cPWWOxOSWWbXJYO0/zvFP+lZlEAiAnu8jCHlvhQargGmSPghB8eEfga0bI7oLBPwp2wPeVqA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":89582},"main":"dist/index.js","style":"dist/index.css","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"},"./dist/index.css":{"import":"./dist/index.css","require":"./dist/index.css"}},"gitHead":"528539ce75fdd9ffeacc066fe4a5f57863350a2e","scripts":{"dev":"vite","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","build":"rollup -c","preview":"vite preview","storybook":"storybook dev -p 6006","generate:css":"node scripts/generate-css.js","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"bharathpyro","email":"bharathpyro@gmail.com"},"repository":{"url":"git+https://github.com/yourusername/atomix-ui.git","type":"git"},"_npmVersion":"10.9.2","description":"A modern React UI component library","directories":{},"_nodeVersion":"22.14.0","dependencies":{"clsx":"^2.1.1","react":"^18.0.0","react-dom":"^18.0.0","class-variance-authority":"^0.7.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.85.1","vite":"^4.4.5","eslint":"^8.45.0","postcss":"^8.4.31","storybook":"^7.5.3","typescript":"^5.0.2","@types/node":"^20.9.0","@types/react":"^18.2.15","autoprefixer":"^10.4.16","@storybook/test":"^7.6.20","vite-plugin-dts":"^3.6.3","@storybook/react":"^7.6.20","@types/react-dom":"^18.2.7","@storybook/blocks":"^7.5.3","@rollup/plugin-json":"^6.1.0","@vitejs/plugin-react":"^4.0.3","rollup-plugin-terser":"^7.0.2","@storybook/react-vite":"^7.5.3","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^7.5.3","@rollup/plugin-commonjs":"^28.0.2","eslint-plugin-storybook":"^0.6.15","@rollup/plugin-typescript":"^12.1.2","@typescript-eslint/parser":"^6.0.0","eslint-plugin-react-hooks":"^4.6.0","@storybook/testing-library":"^0.2.2","@rollup/plugin-node-resolve":"^16.0.0","@storybook/addon-essentials":"^7.6.20","@storybook/addon-onboarding":"^1.0.11","eslint-plugin-react-refresh":"^0.4.3","@storybook/addon-interactions":"^7.5.3","@typescript-eslint/eslint-plugin":"^6.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/21st-kit_0.1.3_1740504879206_0.766904993638398","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"21st-kit","version":"0.1.4","keywords":["react","ui","components","design-system","typescript"],"author":{"name":"Bharadwaj Apittu"},"license":"MIT","_id":"21st-kit@0.1.4","maintainers":[{"name":"bharathpyro","email":"bharathpyro@gmail.com"}],"homepage":"https://github.com/yourusername/atomix-ui#readme","bugs":{"url":"https://github.com/yourusername/atomix-ui/issues"},"dist":{"shasum":"98104208b89bb712c067561240fd1c67ca577e08","tarball":"https://registry.npmjs.org/21st-kit/-/21st-kit-0.1.4.tgz","fileCount":32,"integrity":"sha512-R6kSEQN+Vx39HhNJ1Qmopv15Jquft1GGXLGZept3r3zfr5j+6wnONBaPm6VvMIy4K6iAJb388vmEowyNpsayXg==","signatures":[{"sig":"MEUCIDEzHwDQSq/nhOtT3IImV2r18TXKRJ4tDKsuZNnCdnO2AiEAnOpkShQ/71uNaHa4okghGVMrFsyT5Sd6ZojAVZxjnf0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":141868},"main":"dist/index.js","style":"dist/index.css","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"},"./dist/index.css":{"import":"./dist/index.css","require":"./dist/index.css"}},"gitHead":"528539ce75fdd9ffeacc066fe4a5f57863350a2e","scripts":{"dev":"vite","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","build":"rollup -c","preview":"vite preview","storybook":"storybook dev -p 6006","generate:css":"node scripts/generate-css.js","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"bharathpyro","email":"bharathpyro@gmail.com"},"repository":{"url":"git+https://github.com/yourusername/atomix-ui.git","type":"git"},"_npmVersion":"10.9.2","description":"A modern React UI component library","directories":{},"_nodeVersion":"22.14.0","dependencies":{"clsx":"^2.1.1","react":"^18.0.0","react-dom":"^18.0.0","class-variance-authority":"^0.7.0"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.85.1","vite":"^4.4.5","eslint":"^8.45.0","postcss":"^8.4.31","storybook":"^7.5.3","typescript":"^5.0.2","@types/node":"^20.9.0","@types/react":"^18.2.15","autoprefixer":"^10.4.16","@storybook/test":"^7.6.20","react-hook-form":"^7.50.1","vite-plugin-dts":"^3.6.3","@storybook/react":"^7.6.20","@types/react-dom":"^18.2.7","@storybook/blocks":"^7.5.3","@rollup/plugin-json":"^6.1.0","@vitejs/plugin-react":"^4.0.3","rollup-plugin-terser":"^7.0.2","@storybook/react-vite":"^7.5.3","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^7.5.3","@rollup/plugin-commonjs":"^28.0.2","eslint-plugin-storybook":"^0.6.15","@rollup/plugin-typescript":"^12.1.2","@typescript-eslint/parser":"^6.0.0","eslint-plugin-react-hooks":"^4.6.0","@storybook/testing-library":"^0.2.2","@rollup/plugin-node-resolve":"^16.0.0","@storybook/addon-essentials":"^7.6.20","@storybook/addon-onboarding":"^1.0.11","eslint-plugin-react-refresh":"^0.4.3","@storybook/addon-interactions":"^7.5.3","@typescript-eslint/eslint-plugin":"^6.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-hook-form":"^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/21st-kit_0.1.4_1740513396475_0.016014551817271627","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-02-25T17:34:39.100Z","modified":"2026-07-12T13:58:03.208Z","0.1.3":"2025-02-25T17:34:39.376Z","0.1.4":"2025-02-25T19:56:36.661Z"},"bugs":{"url":"https://github.com/yourusername/atomix-ui/issues"},"author":{"name":"Bharadwaj Apittu"},"license":"MIT","homepage":"https://github.com/yourusername/atomix-ui#readme","keywords":["react","ui","components","design-system","typescript"],"repository":{"url":"git+https://github.com/yourusername/atomix-ui.git","type":"git"},"description":"A modern React UI component library","maintainers":[{"email":"bharathpyro@gmail.com","name":"heybharad"}],"readme":"# 21st-Kit\n\nA modern React UI component library designed for building beautiful, accessible, and responsive web applications.\n\n[![npm version](https://img.shields.io/npm/v/21st-kit.svg)](https://www.npmjs.com/package/21st-kit)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\n## Features\n\n- 🎨 **Modern Design**: Clean, minimal, and customizable components\n- 🧩 **Composable**: Components designed to work together seamlessly\n- 📱 **Responsive**: Mobile-first design approach\n- ♿ **Accessible**: Built with accessibility in mind (WCAG 2.1 compliant)\n- 🌗 **Themeable**: Easily customize colors, spacing, and more\n- 🔍 **TypeScript**: Full TypeScript support with comprehensive type definitions\n- 🧪 **Well-tested**: Thoroughly tested components\n- 📦 **Tree-shakable**: Only import what you need\n- 🔄 **Controlled & Uncontrolled**: Support for both controlled and uncontrolled components\n\n## Installation\n\n```bash\n# npm\nnpm install 21st-kit\n\n# yarn\nyarn add 21st-kit\n\n# pnpm\npnpm add 21st-kit\n```\n\n## Quick Start\n\n```jsx\nimport React from 'react';\nimport { ThemeProvider, Button, Card, CardContent } from '21st-kit';\nimport '21st-kit/dist/index.css';\n\nfunction App() {\n  return (\n    <ThemeProvider>\n      <Card>\n        <CardContent>\n          <h2>Hello, 21st-Kit!</h2>\n          <p>A modern React UI component library</p>\n          <Button>Get Started</Button>\n        </CardContent>\n      </Card>\n    </ThemeProvider>\n  );\n}\n\nexport default App;\n```\n\n## Components\n\n### Basic Components\n\n- **Button**: Various styles, sizes, and states\n- **Card**: Flexible container with header, content, and footer\n- **Avatar**: User avatars with image fallback\n- **Badge**: Small status indicators\n- **Alert**: Contextual feedback messages\n- **Progress**: Progress indicators\n- **Tooltip**: Informative text when hovering over elements\n\n### Form Components\n\n- **Input**: Text input fields\n- **Textarea**: Multi-line text input\n- **Select**: Dropdown selection\n- **Checkbox**: Single checkbox\n- **Radio**: Radio button groups\n- **Switch**: Toggle switches\n- **Form**: Complete form system with validation states\n\n### Navigation Components\n\n- **Tabs**: Tabbed interfaces with controlled and uncontrolled versions\n\n## Theme Customization\n\n21st-Kit comes with a powerful theming system that allows you to customize the look and feel of your application.\n\n```jsx\nimport { ThemeProvider } from '21st-kit';\n\nfunction App() {\n  const customTheme = {\n    colors: {\n      primary: '#0070f3',\n      secondary: '#7928ca',\n      // Override other colors as needed\n    },\n    borderRadius: {\n      md: '0.5rem',\n      // Override other border radiuses as needed\n    },\n    // Override other theme values as needed\n  };\n\n  return (\n    <ThemeProvider theme={customTheme}>\n      {/* Your app content */}\n    </ThemeProvider>\n  );\n}\n```\n\n## Form Integration\n\n21st-Kit works seamlessly with popular form libraries like React Hook Form and Formik.\n\n### React Hook Form Example\n\n```jsx\nimport { useForm, Controller } from 'react-hook-form';\nimport { Form, FormItem, FormLabel, FormControl, FormMessage, Input, Button } from '21st-kit';\n\nfunction LoginForm() {\n  const { control, handleSubmit, formState: { errors } } = useForm({\n    defaultValues: {\n      email: '',\n      password: '',\n    }\n  });\n\n  const onSubmit = (data) => {\n    console.log(data);\n  };\n\n  return (\n    <Form onSubmit={handleSubmit(onSubmit)}>\n      <FormItem validationState={errors.email ? 'invalid' : 'default'}>\n        <FormLabel required>Email</FormLabel>\n        <FormControl>\n          <Controller\n            name=\"email\"\n            control={control}\n            rules={{ \n              required: 'Email is required',\n              pattern: { \n                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$/i, \n                message: 'Invalid email address' \n              }\n            }}\n            render={({ field }) => (\n              <Input \n                type=\"email\" \n                placeholder=\"Enter your email\" \n                {...field} \n              />\n            )}\n          />\n        </FormControl>\n        <FormMessage error={errors.email?.message} />\n      </FormItem>\n      \n      {/* Password field and submit button */}\n    </Form>\n  );\n}\n```\n\n## Controlled vs Uncontrolled Components\n\nMany components in 21st-Kit support both controlled and uncontrolled usage patterns.\n\n### Controlled Tabs Example\n\n```jsx\nimport { useState } from 'react';\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '21st-kit';\n\nfunction ControlledTabs() {\n  const [activeTab, setActiveTab] = useState('tab1');\n  \n  return (\n    <Tabs value={activeTab} onValueChange={setActiveTab}>\n      <TabsList>\n        <TabsTrigger value=\"tab1\">Tab 1</TabsTrigger>\n        <TabsTrigger value=\"tab2\">Tab 2</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"tab1\">Content for Tab 1</TabsContent>\n      <TabsContent value=\"tab2\">Content for Tab 2</TabsContent>\n    </Tabs>\n  );\n}\n```\n\n### Uncontrolled Tabs Example\n\n```jsx\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '21st-kit';\n\nfunction UncontrolledTabs() {\n  return (\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 for Tab 1</TabsContent>\n      <TabsContent value=\"tab2\">Content for Tab 2</TabsContent>\n    </Tabs>\n  );\n}\n```\n\n## Button Variants\n\n21st-Kit provides multiple button variants to suit different UI needs:\n\n```jsx\nimport { Button } from '21st-kit';\n\nfunction ButtonExamples() {\n  return (\n    <div>\n      <Button variant=\"primary\">Primary</Button>\n      <Button variant=\"secondary\">Secondary</Button>\n      <Button variant=\"outline\">Outline</Button>\n      <Button variant=\"text\">Text</Button>\n      <Button variant=\"ghost\">Ghost</Button>\n      <Button variant=\"link\">Link</Button>\n      <Button variant=\"danger\">Danger</Button>\n      <Button variant=\"success\">Success</Button>\n      <Button variant=\"warning\">Warning</Button>\n      <Button variant=\"info\">Info</Button>\n      \n      {/* Icon buttons */}\n      <Button size=\"icon\" aria-label=\"Settings\">\n        <SettingsIcon />\n      </Button>\n      \n      {/* Loading state */}\n      <Button loading>Loading</Button>\n      \n      {/* With icons */}\n      <Button leftIcon={<DownloadIcon />}>Download</Button>\n      <Button rightIcon={<ArrowRightIcon />}>Next</Button>\n    </div>\n  );\n}\n```\n\n## Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for more details.\n\n## License\n\nMIT © [Bharadwaj Apittu](https://github.com/yourusername) ","readmeFilename":"README.md"}