{"id":29793403,"url":"https://github.com/sravimohan/react-aria-tailwind-starter","last_synced_at":"2026-05-01T18:33:23.950Z","repository":{"id":305957861,"uuid":"1024516766","full_name":"sravimohan/react-aria-tailwind-starter","owner":"sravimohan","description":"React Aria Tailwind Starter ","archived":false,"fork":false,"pushed_at":"2025-07-23T21:11:01.000Z","size":221,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-06T13:56:06.919Z","etag":null,"topics":["react","react-aria","storybook","tailwind"],"latest_commit_sha":null,"homepage":"https://react-aria-tailwind-starter.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sravimohan.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-22T20:32:18.000Z","updated_at":"2025-09-13T23:27:49.000Z","dependencies_parsed_at":"2025-07-22T22:34:02.538Z","dependency_job_id":null,"html_url":"https://github.com/sravimohan/react-aria-tailwind-starter","commit_stats":null,"previous_names":["sravimohan/react-aria-tailwind-starter"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/sravimohan/react-aria-tailwind-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sravimohan%2Freact-aria-tailwind-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sravimohan%2Freact-aria-tailwind-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sravimohan%2Freact-aria-tailwind-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sravimohan%2Freact-aria-tailwind-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sravimohan","download_url":"https://codeload.github.com/sravimohan/react-aria-tailwind-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sravimohan%2Freact-aria-tailwind-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32508901,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-aria","storybook","tailwind"],"created_at":"2025-07-28T03:01:16.827Z","updated_at":"2026-05-01T18:33:23.924Z","avatar_url":"https://github.com/sravimohan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Aria Tailwind Starter\n\nA modern, accessible React component library built with **React Aria Components** and styled with **Tailwind CSS v4**. This starter provides a comprehensive set of pre-built, customizable UI components that follow accessibility best practices.\n\n## ✨ Features\n\n- 🎯 **Accessibility First**: Built on React Aria Components for WAI-ARIA compliance\n- 🎨 **Modern Styling**: Powered by Tailwind CSS v4 with custom design system\n- 📚 **Storybook Integration**: Interactive component documentation and testing\n- 🧪 **Comprehensive Testing**: Vitest with Storybook Test addon\n- 🔧 **TypeScript Support**: Full type safety and IntelliSense\n- 🌙 **Dark Mode**: Built-in dark theme support\n- ⚡ **Performance Optimized**: Tree-shakeable components with minimal bundle size\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- Node.js 18+\n- pnpm (recommended package manager)\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/your-username/react-aria-tailwind-starter.git\ncd react-aria-tailwind-starter\n\n# Install dependencies\npnpm install\n\n# Start Storybook development server\npnpm storybook\n```\n\nVisit \u003chttp://localhost:6006\u003e to explore the component library.\n\n## 📦 Available Components\n\n### Form Controls\n\n- `Button` - Primary, secondary, destructive, and icon variants\n- `TextField` - Text input with validation\n- `NumberField` - Numeric input with formatting\n- `SearchField` - Search input with clear functionality\n- `DateField` - Date input with picker\n- `TimeField` - Time input with validation\n- `Checkbox` - Single and group checkboxes\n- `RadioGroup` - Radio button groups\n- `Switch` - Toggle switches\n- `Slider` - Range and multi-thumb sliders\n\n### Selection Controls\n- `ToggleButton` - Toggle switches\n- `ToggleButtonGroup` - Toggle button groups\n\n### Selection Controls\n\n- `Select` - Dropdown selection\n- `ComboBox` - Searchable dropdown\n- `Autocomplete` - Auto-complete input\n- `ListBox` - Selectable list\n- `GridList` - Grid-based selection\n- `TagGroup` - Tag selection and management\n\n### Date \u0026 Time\n\n- `Calendar` - Single date picker\n- `RangeCalendar` - Date range selection\n- `DatePicker` - Date picker with input\n- `DateRangePicker` - Date range picker\n\n### Color Controls\n\n- `ColorPicker` - Full-featured color picker\n- `ColorField` - Color input field\n- `ColorArea` - 2D color selection\n- `ColorSlider` - Color channel sliders\n- `ColorWheel` - HSB color wheel\n- `ColorSwatch` - Color display\n- `ColorSwatchPicker` - Predefined color selection\n\n### Layout \u0026 Navigation\n\n- `Table` - Sortable, selectable data tables\n- `Tabs` - Tab navigation\n- `Breadcrumbs` - Navigation breadcrumbs\n- `Tree` - Hierarchical tree view\n- `Menu` - Context and dropdown menus\n- `Toolbar` - Action toolbars\n\n### Feedback \u0026 Overlays\n\n- `Dialog` - Modal dialogs\n- `AlertDialog` - Confirmation dialogs\n- `Modal` - Modal containers\n- `Popover` - Contextual popovers\n- `Tooltip` - Hover tooltips\n- `ProgressBar` - Progress indicators\n- `Meter` - Measurement displays\n\n### Utilities\n\n- `Form` - Form validation and submission\n- `Field` - Form field wrapper\n- `Separator` - Visual dividers\n- `Link` - Accessible links\n- `Disclosure` - Expandable content\n\n## 🎨 Styling System\n\nThe project uses a sophisticated styling approach:\n\n- **Tailwind Variants**: Dynamic component variants with `tailwind-variants`\n- **Focus Management**: Consistent focus ring utilities\n- **Dark Mode**: Automatic dark theme support\n- **Custom Plugin**: `tailwindcss-react-aria-components` for React Aria states\n- **Animation**: `tailwindcss-animate` for smooth transitions\n\n### Customizing Components\n\nEach component accepts standard React Aria props plus custom variant props:\n\n```tsx\nimport { Button } from './src/Button';\n\n// Different variants\n\u003cButton variant=\"primary\"\u003ePrimary Action\u003c/Button\u003e\n\u003cButton variant=\"secondary\"\u003eSecondary Action\u003c/Button\u003e\n\u003cButton variant=\"destructive\"\u003eDelete\u003c/Button\u003e\n\u003cButton variant=\"icon\"\u003e\u003cTrashIcon /\u003e\u003c/Button\u003e\n\n// With React Aria props\n\u003cButton \n  variant=\"primary\"\n  isDisabled={loading}\n  onPress={() =\u003e handleSubmit()}\n\u003e\n  Submit\n\u003c/Button\u003e\n```\n\n## 🧪 Testing\n\nThe project includes comprehensive testing setup:\n\n```bash\n# Run all tests\npnpm test\n\n# Run Storybook tests specifically\npnpm test-storybook\n\n# Generate coverage report\npnpm coverage\n```\n\n### Testing Approach\n\n- **Stories as Tests**: All Storybook stories automatically become tests\n- **Interactive Testing**: Play functions for user interaction testing\n- **Visual Testing**: Automated visual regression testing\n- **Accessibility Testing**: Built-in a11y checks\n\nSee [TESTING.md](./TESTING.md) for detailed testing documentation.\n\n## 📖 Development\n\n### Project Structure\n\n```text\nsrc/\n├── components/           # React Aria component implementations\n├── utils.ts             # Shared utilities (focus rings, etc.)\n└── index.css           # Global styles and Tailwind imports\n\nstories/\n├── *.stories.tsx       # Storybook stories and tests\n\nvitest.config.ts        # Vitest configuration\ntailwind.config.ts      # Tailwind CSS configuration\n```\n\n### Building Components\n\n1. Create the component in `src/`\n2. Add Storybook stories in `stories/`\n3. Export from appropriate index files\n4. Add tests using play functions\n\n### Scripts\n\n```bash\npnpm storybook          # Start Storybook dev server\npnpm build-storybook    # Build Storybook for production\npnpm test              # Run tests\npnpm test-storybook    # Run Storybook-specific tests\npnpm coverage          # Generate test coverage\n```\n\n## 🔧 Configuration\n\n### Tailwind CSS\n\nThe project uses Tailwind CSS v4 with custom configuration:\n\n- **React Aria Plugin**: Automatic styling for component states\n- **Animation Plugin**: Smooth transitions and animations\n- **Custom Utilities**: Focus rings and accessibility helpers\n\n### TypeScript\n\nFull TypeScript support with:\n\n- Strict type checking\n- React Aria Components types\n- Custom prop interfaces\n- IntelliSense support\n\n## 📱 Browser Support\n\n- Chrome/Chromium 90+\n- Firefox 88+\n- Safari 14+\n- Edge 90+\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Add your component and stories\n4. Write tests for your component\n5. Commit your changes (`git commit -m 'Add amazing feature'`)\n6. Push to the branch (`git push origin feature/amazing-feature`)\n7. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- [React Aria](https://react-spectrum.adobe.com/react-aria/) - Accessibility primitives\n- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework\n- [Storybook](https://storybook.js.org/) - Component development environment\n- [Vitest](https://vitest.dev/) - Fast unit testing framework\n\n## 📚 Resources\n\n- [React Aria Documentation](https://react-spectrum.adobe.com/react-aria/)\n- [Tailwind CSS Documentation](https://tailwindcss.com/docs)\n- [Storybook Documentation](https://storybook.js.org/docs)\n- [Testing Guide](./TESTING.md)\n- [Release Notes](./RELEASE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsravimohan%2Freact-aria-tailwind-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsravimohan%2Freact-aria-tailwind-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsravimohan%2Freact-aria-tailwind-starter/lists"}