{"_id":"@abisheks238/react-ui-kit","_rev":"3-6f2a44b254a086f06305ed793d8281a9","name":"@abisheks238/react-ui-kit","dist-tags":{"latest":"1.2.0"},"versions":{"1.0.0":{"name":"@abisheks238/react-ui-kit","version":"1.0.0","keywords":["react","ui","components","typescript","tailwind","accessibility","modal","loader","alert","tooltip","skeleton","accordion","tabs","avatar","badge","button","input","select","checkbox","radio","switch","pagination","breadcrumbs","progress","dialog","datepicker"],"author":{"url":"https://github.com/ABISHEK-K-DEV","name":"Abishek","email":"abisheks238@gmail.com"},"license":"MIT","_id":"@abisheks238/react-ui-kit@1.0.0","maintainers":[{"name":"abisheks238","email":"abishekstephen1071996@gmail.com"}],"homepage":"https://github.com/ABISHEK-K-DEV/react-ui-kit#readme","bugs":{"url":"https://github.com/ABISHEK-K-DEV/react-ui-kit/issues"},"dist":{"shasum":"d0783c99ac3e6ef814b77056369add2ca5e86392","tarball":"https://registry.npmjs.org/@abisheks238/react-ui-kit/-/react-ui-kit-1.0.0.tgz","fileCount":8,"integrity":"sha512-7upY0/6TXc3uN4ZtkMp6DDuhEJqPdk0MxTZkrN+E83sT+5I+q9p9Jboumu/KphuZ0hWD9r1BPatVBVoEHcQspw==","signatures":[{"sig":"MEUCIBtN4DfL6n9sWdKXk9/z/eLM153ASrJRV4EzaDzp3HMbAiEA1/ItIHHaZgz95e3xr4ckZoHnc6mu3bLGlr9fkIbZS4w=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":499350},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"58259c91e2505fb2e40dd6b45720515a5356776e","scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","test":"vitest run","build":"rollup -c","prepare":"npm run build","lint:fix":"eslint src --ext .ts,.tsx --fix","storybook":"storybook dev -p 6006","test:watch":"vitest","type-check":"tsc --noEmit","build-storybook":"storybook build"},"_npmUser":{"name":"abisheks238","email":"abishekstephen1071996@gmail.com"},"repository":{"url":"git+https://github.com/ABISHEK-K-DEV/react-ui-kit.git","type":"git"},"_npmVersion":"10.8.2","description":"A lightweight, customizable component library for modern React applications with 19 essential UI elements","directories":{},"_nodeVersion":"18.20.8","dependencies":{"clsx":"^2.1.1","framer-motion":"^11.11.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.8","react":"^18.3.1","eslint":"^9.12.0","rollup":"^4.24.0","vitest":"^2.1.2","postcss":"^8.4.47","happy-dom":"^15.7.4","react-dom":"^18.3.1","storybook":"^8.4.0","typescript":"^5.6.2","tailwindcss":"^3.4.13","@types/react":"^18.3.11","autoprefixer":"^10.4.20","@storybook/test":"^8.4.0","@storybook/react":"^8.4.0","@types/react-dom":"^18.3.1","@storybook/blocks":"^8.4.0","rollup-plugin-dts":"^6.1.1","eslint-plugin-react":"^7.37.1","@eslint/config-array":"^0.18.0","@testing-library/dom":"^10.4.0","@vitejs/plugin-react":"^4.3.2","@eslint/object-schema":"^2.1.4","@rollup/plugin-terser":"^0.4.4","@storybook/react-vite":"^8.4.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^8.4.0","@testing-library/react":"^16.0.1","@rollup/plugin-commonjs":"^28.0.0","@rollup/plugin-typescript":"^12.1.0","@testing-library/jest-dom":"^6.5.0","@typescript-eslint/parser":"^8.8.0","eslint-plugin-react-hooks":"^5.1.0-rc.0","@rollup/plugin-node-resolve":"^15.3.0","@storybook/addon-essentials":"^8.4.0","@testing-library/user-event":"^14.5.2","@storybook/addon-interactions":"^8.4.0","@typescript-eslint/eslint-plugin":"^8.8.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-ui-kit_1.0.0_1749796250163_0.012030065539868406","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@abisheks238/react-ui-kit","version":"1.1.0","keywords":["react","ui","components","typescript","tailwind","accessibility","modal","loader","alert","tooltip","skeleton","accordion","tabs","avatar","badge","button","input","select","checkbox","radio","switch","pagination","breadcrumbs","progress","dialog","datepicker"],"author":{"url":"https://github.com/ABISHEK-K-DEV","name":"Abishek","email":"abisheks238@gmail.com"},"license":"MIT","_id":"@abisheks238/react-ui-kit@1.1.0","maintainers":[{"name":"abisheks238","email":"abishekstephen1071996@gmail.com"}],"homepage":"https://github.com/ABISHEK-K-DEV/react-ui-kit#readme","bugs":{"url":"https://github.com/ABISHEK-K-DEV/react-ui-kit/issues"},"dist":{"shasum":"7ab99f59a2dffef2427e4a09e4eb0ef4e59bd0a2","tarball":"https://registry.npmjs.org/@abisheks238/react-ui-kit/-/react-ui-kit-1.1.0.tgz","fileCount":8,"integrity":"sha512-W5SxFfPDiGh26LmPrHJkhGvKYR9rqqQTdg82SzUt3bm+V0RlS3U1HSqowYWiXxlCH07Zlc96FUh4iIdnRHUu8g==","signatures":[{"sig":"MEYCIQCHCHzTgrnPK1jFNdApgEP3xfxGTREuO70Cjgq3SbEw0gIhAPrqSdc6eOJXfwdujRGuCxwvoeYndkPHaxQ6YAByfg7H","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":499355},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"80eb8afed30922014233f75132a89b806b8559a3","scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","test":"vitest run","build":"rollup -c","prepare":"npm run build","lint:fix":"eslint src --ext .ts,.tsx --fix","storybook":"storybook dev -p 6006","test:watch":"vitest","type-check":"tsc --noEmit","build-storybook":"storybook build"},"_npmUser":{"name":"abisheks238","email":"abishekstephen1071996@gmail.com"},"repository":{"url":"git+https://github.com/ABISHEK-K-DEV/react-ui-kit.git","type":"git"},"_npmVersion":"10.8.2","description":"A lightweight, customizable component library for modern React applications with 19 essential UI elements","directories":{},"_nodeVersion":"18.20.8","dependencies":{"clsx":"^2.1.1","framer-motion":"^11.11.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.8","react":"^18.3.1","eslint":"^9.12.0","rollup":"^4.24.0","vitest":"^2.1.2","postcss":"^8.4.47","happy-dom":"^15.7.4","react-dom":"^18.3.1","storybook":"^8.4.0","typescript":"^5.6.2","tailwindcss":"^3.4.13","@types/react":"^18.3.11","autoprefixer":"^10.4.20","@storybook/test":"^8.4.0","@storybook/react":"^8.4.0","@types/react-dom":"^18.3.1","@storybook/blocks":"^8.4.0","rollup-plugin-dts":"^6.1.1","eslint-plugin-react":"^7.37.1","@eslint/config-array":"^0.18.0","@testing-library/dom":"^10.4.0","@vitejs/plugin-react":"^4.3.2","@eslint/object-schema":"^2.1.4","@rollup/plugin-terser":"^0.4.4","@storybook/react-vite":"^8.4.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^8.4.0","@testing-library/react":"^16.0.1","@rollup/plugin-commonjs":"^28.0.0","@rollup/plugin-typescript":"^12.1.0","@testing-library/jest-dom":"^6.5.0","@typescript-eslint/parser":"^8.8.0","eslint-plugin-react-hooks":"^5.1.0-rc.0","@rollup/plugin-node-resolve":"^15.3.0","@storybook/addon-essentials":"^8.4.0","@testing-library/user-event":"^14.5.2","@storybook/addon-interactions":"^8.4.0","@typescript-eslint/eslint-plugin":"^8.8.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-ui-kit_1.1.0_1749797045048_0.18627787230215787","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@abisheks238/react-ui-kit","version":"1.2.0","type":"module","description":"A lightweight, customizable component library for modern React applications with 19 essential UI elements","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","keywords":["react","ui","components","typescript","tailwind","accessibility","modal","loader","alert","tooltip","skeleton","accordion","tabs","avatar","badge","button","input","select","checkbox","radio","switch","pagination","breadcrumbs","progress","dialog","datepicker"],"author":{"name":"Abishek","email":"abisheks238@gmail.com","url":"https://github.com/ABISHEK-K-DEV"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ABISHEK-K-DEV/react-ui-kit.git"},"bugs":{"url":"https://github.com/ABISHEK-K-DEV/react-ui-kit/issues"},"homepage":"https://github.com/ABISHEK-K-DEV/react-ui-kit#readme","scripts":{"build":"rollup -c","dev":"rollup -c -w","test":"vitest run","test:watch":"vitest","lint":"eslint src --ext .ts,.tsx","lint:fix":"eslint src --ext .ts,.tsx --fix","type-check":"tsc --noEmit","prepare":"npm run build","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@eslint/config-array":"^0.18.0","@eslint/object-schema":"^2.1.4","@rollup/plugin-commonjs":"^28.0.0","@rollup/plugin-node-resolve":"^15.3.0","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^12.1.0","@storybook/addon-essentials":"^8.4.0","@storybook/addon-interactions":"^8.4.0","@storybook/addon-links":"^8.4.0","@storybook/blocks":"^8.4.0","@storybook/react":"^8.4.0","@storybook/react-vite":"^8.4.0","@storybook/test":"^8.4.0","@testing-library/dom":"^10.4.0","@testing-library/jest-dom":"^6.5.0","@testing-library/react":"^16.0.1","@testing-library/user-event":"^14.5.2","@types/react":"^18.3.11","@types/react-dom":"^18.3.1","@typescript-eslint/eslint-plugin":"^8.8.0","@typescript-eslint/parser":"^8.8.0","@vitejs/plugin-react":"^4.3.2","autoprefixer":"^10.4.20","eslint":"^9.12.0","eslint-plugin-react":"^7.37.1","eslint-plugin-react-hooks":"^5.1.0-rc.0","happy-dom":"^15.7.4","postcss":"^8.4.47","react":"^18.3.1","react-dom":"^18.3.1","rollup":"^4.24.0","rollup-plugin-dts":"^6.1.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","storybook":"^8.4.0","tailwindcss":"^3.4.13","typescript":"^5.6.2","vite":"^5.4.8","vitest":"^2.1.2"},"dependencies":{"clsx":"^2.1.1","framer-motion":"^11.11.1"},"_id":"@abisheks238/react-ui-kit@1.2.0","gitHead":"0b41369b232312c7eb051d10d8d88ce78cfa83a5","_nodeVersion":"18.20.8","_npmVersion":"10.8.2","dist":{"integrity":"sha512-oGWLEEzvZTQeckibncV6sZh7lmgmUtLElgzLMe340OzKzo7hqmZ1iEqe7iZtwnsQ50lUSjAaifF9zKRM3SCnkA==","shasum":"7b5f843845c67a231a325b5b41bf5a61599e25e0","tarball":"https://registry.npmjs.org/@abisheks238/react-ui-kit/-/react-ui-kit-1.2.0.tgz","fileCount":8,"unpackedSize":523576,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDDIzw1fMNHPYjyghQnjbiNNRZEEMBC5cNwPwleCOzkKAiA5mRTHqye1wXBvfS8DAZTujMhyIN5aKfvC9ZW0c2n79w=="}]},"_npmUser":{"name":"abisheks238","email":"abishekstephen1071996@gmail.com"},"directories":{},"maintainers":[{"name":"abisheks238","email":"abishekstephen1071996@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-ui-kit_1.2.0_1749981708167_0.837981133704055"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-13T06:30:50.079Z","modified":"2025-06-15T10:01:48.582Z","1.0.0":"2025-06-13T06:30:50.336Z","1.1.0":"2025-06-13T06:44:05.249Z","1.2.0":"2025-06-15T10:01:48.369Z"},"bugs":{"url":"https://github.com/ABISHEK-K-DEV/react-ui-kit/issues"},"author":{"name":"Abishek","email":"abisheks238@gmail.com","url":"https://github.com/ABISHEK-K-DEV"},"license":"MIT","homepage":"https://github.com/ABISHEK-K-DEV/react-ui-kit#readme","keywords":["react","ui","components","typescript","tailwind","accessibility","modal","loader","alert","tooltip","skeleton","accordion","tabs","avatar","badge","button","input","select","checkbox","radio","switch","pagination","breadcrumbs","progress","dialog","datepicker"],"repository":{"type":"git","url":"git+https://github.com/ABISHEK-K-DEV/react-ui-kit.git"},"description":"A lightweight, customizable component library for modern React applications with 19 essential UI elements","maintainers":[{"name":"abisheks238","email":"abishekstephen1071996@gmail.com"}],"readme":"# @abisheks238/react-ui-kit\n\n[![npm version](https://img.shields.io/npm/v/@abisheks238/react-ui-kit.svg)](https://www.npmjs.com/package/@abisheks238/react-ui-kit)\n[![npm downloads](https://img.shields.io/npm/dm/@abisheks238/react-ui-kit.svg)](https://www.npmjs.com/package/@abisheks238/react-ui-kit)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/ABISHEK-K-DEV/react-ui-kit/blob/main/LICENSE)\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@abisheks238/react-ui-kit)](https://bundlephobia.com/package/@abisheks238/react-ui-kit)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)\n\n๐ŸŽจ **A lightweight, customizable component library for modern React applications**\n\nIncludes **19 essential UI elements** designed with accessibility and performance in mind. Easy to integrate with any React project โ€” fully styleable using CSS or Tailwind. โœจ **Now with enhanced animations, glassmorphism effects, and creative micro-interactions!**\n\n## โœจ Features\n\n- ๐ŸŽฏ **19 Essential Components** - Everything you need for modern UIs\n- ๐ŸŽจ **Fully Customizable** - Style with CSS or Tailwind CSS\n- โ™ฟ **Accessibility First** - WCAG compliant with proper ARIA support\n- ๐ŸŒ— **Dark Mode Ready** - Built-in dark mode support\n- ๐Ÿ“ฑ **Responsive Design** - Mobile-first approach\n- ๐ŸŽญ **Smooth Animations** - Powered by Framer Motion with creative effects\n- ๐Ÿ”ง **TypeScript Support** - Full type safety out of the box\n- ๐Ÿ“ฆ **Lightweight** - Minimal bundle size impact\n- ๐Ÿš€ **Performance Optimized** - Tree-shakeable components\n- ๐ŸŽช **Storybook Ready** - Interactive component documentation\n- โœจ **Glassmorphism & Modern Effects** - Beautiful visual effects\n- ๐ŸŒˆ **Gradient Animations** - Dynamic color transitions\n- ๐Ÿ’ซ **Micro-interactions** - Delightful user feedback\n\n## ๐Ÿ“ฆ Components Included\n\n### Core Components\n- ๐Ÿ”˜ **Button** - Multiple variants, sizes, and states\n- ๐ŸชŸ **Modal** - Accessible dialog with focus management\n- โš ๏ธ **Alert** - Contextual notifications with dismissal\n- ๐Ÿ’ฌ **Tooltip** - Positioning-aware hover information\n\n### Form Components\n- ๐Ÿ“ **InputField** - Text inputs with validation states\n- ๐Ÿ“‹ **Select** - Dropdown selection with search\n- โ˜‘๏ธ **Checkbox** - Individual and group checkboxes\n- ๐Ÿ”˜ **RadioGroup** - Radio button groups\n- ๐Ÿ”„ **Switch** - Toggle switches with labels\n- ๐Ÿ“… **DatePicker** - Date selection with calendar\n\n### Navigation Components\n- ๐Ÿ“– **Breadcrumbs** - Navigation hierarchy\n- ๐Ÿ“„ **Pagination** - Page navigation controls\n- ๐Ÿ“‘ **Tabs** - Tabbed content organization\n- ๐Ÿช— **Accordion** - Collapsible content sections\n\n### Display Components\n- ๐Ÿ‘ค **Avatar** - User profile images with fallbacks\n- ๐Ÿท๏ธ **Badge** - Count indicators and status badges\n- ๐Ÿ“Š **Progress** - Linear and circular progress indicators\n- ๐Ÿ’€ **Skeleton** - Loading state placeholders\n- โณ **Loader** - Various loading animations\n\n## ๐Ÿš€ Quick Start\n\n### Installation\n\nInstall the package using your preferred package manager.\n\n### Basic Usage\n\n```tsx\nimport React from 'react';\nimport { Button, Modal, Alert } from '@abisheks238/react-ui-kit';\n\nfunction App() {\n const [isModalOpen, setIsModalOpen] = React.useState(false);\n\n return (\n
\n \n \n Your changes have been saved successfully.\n \n\n setIsModalOpen(false)}\n title=\"Welcome to React UI Kit\"\n size=\"md\"\n >\n

This is a beautiful, accessible modal component!

\n \n
\n );\n}\n\nexport default App;\n```\n\n### With Tailwind CSS (Recommended)\n\nConfigure your Tailwind CSS to include the component styles:\n\n```javascript\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n \"./node_modules/@abisheks238/react-ui-kit/dist/**/*.js\"\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n### Custom Styling\n\n```tsx\nimport { Button } from '@abisheks238/react-ui-kit';\n\n\n\n\n```\n\n## ๐Ÿ“š Component Documentation\n\n### Button\n\n```tsx\nimport { Button } from '@abisheks238/react-ui-kit';\n\n} \n rightIcon={} \n href=\"/link\" \n onClick={() => {}} \n>\n Button Text\n\n```\n\n### InputField\n\n```tsx\nimport { InputField } from '@abisheks238/react-ui-kit';\n\n}\n rightIcon={}\n fullWidth={true}\n/>\n```\n\n### Modal\n\n```tsx\nimport { Modal, Button } from '@abisheks238/react-ui-kit';\n\nfunction ModalExample() {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const handleConfirm = () => {\n setIsOpen(false);\n };\n\n return (\n setIsOpen(false)}\n title=\"Confirm Action\"\n size=\"md\" \n closeOnOverlayClick={true} \n closeOnEscape={true} \n showCloseButton={true} \n centered={true} \n footer={\n
\n \n \n
\n }\n >\n

Are you sure you want to perform this action?

\n \n );\n}\n```\n\n### Alert\n\n```tsx\nimport { Alert } from '@abisheks238/react-ui-kit';\n\n {}} \n icon={true} \n>\n Your changes have been saved successfully.\n\n```\n\n## ๐ŸŽจ Theming\n\n### CSS Custom Properties\n\n```css\n:root {\n --ui-kit-primary: #3b82f6;\n --ui-kit-primary-hover: #2563eb;\n --ui-kit-border-radius: 0.5rem;\n --ui-kit-font-family: 'Inter', sans-serif;\n}\n```\n\n### Dark Mode\n\n```tsx\n
\n \n
\n```\n\n## ๐Ÿ”ง Advanced Usage\n\n### Form Integration\n\n```tsx\nimport React from 'react';\nimport { useForm, SubmitHandler } from 'react-hook-form';\nimport { InputField, Button, Alert } from '@abisheks238/react-ui-kit';\n\ninterface FormData {\n name: string;\n email: string;\n}\n\nfunction ContactForm() {\n const { register, handleSubmit, formState: { errors } } = useForm();\n const [submitStatus, setSubmitStatus] = React.useState<'idle' | 'success' | 'error'>('idle');\n\n const onSubmit: SubmitHandler = async (data) => {\n try {\n // Simulate API call\n await new Promise(resolve => setTimeout(resolve, 1000));\n console.log('Form submitted:', data);\n setSubmitStatus('success');\n } catch (error) {\n console.error('Submit error:', error);\n setSubmitStatus('error');\n }\n };\n\n return (\n
\n {submitStatus === 'success' && (\n setSubmitStatus('idle')}>\n Form submitted successfully!\n \n )}\n \n {submitStatus === 'error' && (\n setSubmitStatus('idle')}>\n Failed to submit form. Please try again.\n \n )}\n\n
\n \n \n \n \n \n \n
\n );\n}\n```\n\n### Custom Component Composition\n\n```tsx\nimport React from 'react';\nimport { Button, Badge, Avatar } from '@abisheks238/react-ui-kit';\n\ninterface User {\n id: string;\n name: string;\n avatar?: string;\n role: string;\n status: 'online' | 'offline' | 'away';\n notifications: number;\n}\n\ninterface UserCardProps {\n user: User;\n onMessage: (userId: string) => void;\n}\n\nfunction UserCard({ user, onMessage }: UserCardProps) {\n const MessageIcon = () => (\n \n \n \n );\n\n return (\n
\n
\n
\n \n {user.notifications > 0 && (\n \n )}\n
\n \n
\n

{user.name}

\n

{user.role}

\n
\n \n onMessage(user.id)}\n leftIcon={}\n >\n Message\n \n
\n
\n );\n}\n```\n\n## ๐Ÿงช Testing\n\nComponents include built-in test IDs for easy testing:\n\n```tsx\nimport { render, screen, fireEvent } from '@testing-library/react';\nimport { Button } from '@abisheks238/react-ui-kit';\n\ntest('renders button with text', () => {\n const handleClick = jest.fn();\n \n render(\n \n );\n \n const button = screen.getByTestId('submit-button');\n expect(button).toBeInTheDocument();\n expect(button).toHaveTextContent('Submit');\n \n fireEvent.click(button);\n expect(handleClick).toHaveBeenCalledTimes(1);\n});\n```\n\n## ๐Ÿ“– Storybook\n\nExplore all components interactively in our Storybook documentation.\n\n## ๐Ÿค Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](https://github.com/ABISHEK-K-DEV/react-ui-kit/blob/main/CONTRIBUTING.md).\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## ๐Ÿ“Š Bundle Size\n\n| Component | Size (gzipped) |\n|-----------|---------------|\n| Button | ~2KB |\n| Modal | ~4KB |\n| InputField | ~3KB |\n| All Components | ~25KB |\n\n## ๐Ÿ”„ Migration Guide\n\n### From v0.x to v1.x\n\n- Component names remain the same\n- Props have been standardized\n- CSS classes follow new naming convention\n\n## ๐Ÿ“‹ Roadmap\n\n- [ ] ๐ŸŽจ Theme Builder Tool\n- [ ] ๐Ÿ“ฑ React Native Support \n- [ ] ๐Ÿ”ง CLI for Component Generation\n- [ ] ๐ŸŽช Advanced Storybook Addons\n- [ ] ๐Ÿ“š Video Tutorials\n\n## ๐Ÿ“„ License\n\nThis project is licensed under the MIT License - see the [LICENSE](https://github.com/ABISHEK-K-DEV/react-ui-kit/blob/main/LICENSE) file for details.\n\n## ๐Ÿ™ Acknowledgments\n\n- Built with โค๏ธ by [Abishek](https://github.com/ABISHEK-K-DEV)\n- Inspired by modern design systems\n- Powered by React, TypeScript, and Tailwind CSS\n\n---\n\n**Made for the React community with โค๏ธ**\n\n[![NPM](https://nodei.co/npm/@abisheks238/react-ui-kit.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/@abisheks238/react-ui-kit)\n\n### Enhanced Components with Creative Animations\n\n```tsx\nimport { Loader, Progress, Button } from '@abisheks238/react-ui-kit';\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n### New Animation Classes\n\n```tsx\n\n
Floating Element
\n
Liquid Shape
\n
Neon Glow
\n
Wiggle
\n
Jello
\n
Rubber
\n
Heartbeat
\n```","readmeFilename":"README.md"}