{"id":24470459,"url":"https://github.com/serafimcloud/21st","last_synced_at":"2025-05-13T21:10:53.833Z","repository":{"id":257833048,"uuid":"865326415","full_name":"serafimcloud/21st","owner":"serafimcloud","description":"npm for design engineers: largest marketplace of shadcn/ui-based React Tailwind components, blocks and hooks","archived":false,"fork":false,"pushed_at":"2025-05-13T14:25:29.000Z","size":21071,"stargazers_count":4319,"open_issues_count":41,"forks_count":204,"subscribers_count":22,"default_branch":"main","last_synced_at":"2025-05-13T14:25:32.592Z","etag":null,"topics":["nextjs","react","shadcn","shadcn-ui","tailwindcss","ui","ui-components","ui-library"],"latest_commit_sha":null,"homepage":"https://21st.dev","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/serafimcloud.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":"2024-09-30T10:56:10.000Z","updated_at":"2025-05-13T13:02:19.000Z","dependencies_parsed_at":"2024-11-05T09:18:39.909Z","dependency_job_id":"1dff55b7-b976-4fb0-9f2b-d1e40469bd0c","html_url":"https://github.com/serafimcloud/21st","commit_stats":null,"previous_names":["rorkai/21st","serafimcloud/21st"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serafimcloud%2F21st","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serafimcloud%2F21st/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serafimcloud%2F21st/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serafimcloud%2F21st/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/serafimcloud","download_url":"https://codeload.github.com/serafimcloud/21st/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254029002,"owners_count":22002283,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["nextjs","react","shadcn","shadcn-ui","tailwindcss","ui","ui-components","ui-library"],"created_at":"2025-01-21T08:01:27.907Z","updated_at":"2025-05-13T21:10:48.821Z","avatar_url":"https://github.com/serafimcloud.png","language":"TypeScript","readme":"# 🚀 Welcome to 21st.dev!\n\n**[21st.dev](https://21st.dev)** is your go-to open-source community registry for **React UI components**! Whether you're a developer, designer, or just someone who loves building beautiful interfaces, 21st.dev is the place to **publish, discover, and install** minimal, modern, and reusable React components powered by **Tailwind CSS** and **Radix UI**.\n\nInspired by the amazing [shadcn/ui](https://ui.shadcn.com/), we're here to make building UIs faster, easier, and more fun. 🎉\n\n[![Discord](https://img.shields.io/badge/Discord-Join%20Us-7289da?logo=discord\u0026logoColor=white\u0026style=for-the-badge)](https://discord.gg/Qx4rFunHfm)\n\n---\n\n## 👥 Community\n\nWe're building more than just a component registry – we're building a community of developers who love creating beautiful UIs. Here's how you can get involved:\n\n- **Join our [Discord](https://discord.gg/Qx4rFunHfm)** – Get help, share your work, and chat with other developers\n- **Follow us on [X/Twitter](https://x.com/serafimcloud)** – Stay updated with the latest features and components\n- **Star us on [GitHub](https://github.com/serafimcloud/21st)** – Support the project and follow our progress\n- **Share your components** – Help others by contributing your UI components\n- **Give feedback** – Your input shapes the future of 21st.dev\n\n---\n\n## 🌟 Why 21st.dev?\n\n- **Open Source \u0026 Community-Driven**: Built by developers, for developers. Everyone is welcome to contribute!\n- **Minimal \u0026 Modern**: Components are lightweight, customizable, and designed with Tailwind and Radix UI.\n- **Easy to Use**: Install any component with a single `npx shadcn` command.\n- **Multiple Demos**: Each component can have multiple demos with previews and videos.\n- **Extensible**: Add your own components, themes, and dependencies effortlessly.\n- **TypeScript First**: Full type support out of the box.\n\n---\n\n## 🛠️ Publish Your Component in 1 Minute!\n\nYes, you read that right—**1 minute**! 🕒  \nPublishing your React component is as easy as pie. Just head over to our [publish page](https://21st.dev) and share your creation with the world.\n\n### Review Process\n\nWhen you publish a component, it follows this journey:\n\n1. **Initial State** (`on_review`) - Component is available via direct link and awaiting review\n2. **Posted State** (`posted`) - Component has passed review and is available on your profile and via direct link\n3. **Featured State** (`featured`) - Component is featured on the homepage and in public listings\n\nI ([Serafim](https://x.com/serafimcloud)) personally review each component to ensure it meets our quality standards before featuring it.\n\n### Quality Guidelines\n\nTo get your component featured, ensure it follows these key principles:\n\n1. **Visual Quality**\n\n   - Component should be visually polished and provide real value to the community\n   - Follow modern UI/UX practices\n\n2. **Code Structure**\n\n   - Follow the shadcn/ui pattern of separating component logic from demo content\n   - Component file should contain only the reusable functionality\n   - Demo file should showcase the component through props, not hardcoded content\n\n3. **Theming**\n   - Use CSS variables from shadcn's theme system (see `globals.css`)\n   - Support both light and dark modes out of the box\n   - Use the proper color variables (e.g., `hsl(var(--background))`)\n\nRemember: Quality over quantity! We prioritize well-crafted, reusable components that follow these guidelines.\n\n### File Structure:\n\n```\nyour-component/                # How to organize your files\n├── code.tsx                  # Main component\n├── tailwind.config.js        # Optional Tailwind config\n├── globals.css              # Optional global styles\n└── demos/                    # Each component can have multiple demos\n    ├── default/             # Primary demo (required)\n    │   ├── code.demo.tsx    # Demo implementation\n    │   ├── preview.png      # Static preview image\n    │   └── video.mp4        # Optional demo video\n    └── advanced/            # Additional demos (optional)\n        ├── code.demo.tsx\n        ├── preview.png\n        └── video.mp4\n\n# Files are stored in Cloudflare R2 under:\n# components-code/{user_id}/{component_slug}/...\n```\n\n### What We Support:\n\n- **Pure React Components** – Build with React, no fuss.\n- **Next.js Client Components** – We've got you covered (server-side rendering coming soon!).\n- **TypeScript** – Because type safety is ❤️.\n- **Tailwind Themes** – Customize to your heart's content.\n- **Global CSS Styles** – Add your own flair.\n- **Radix UI** – Accessible and unstyled primitives.\n- **Any npm Dependencies** – Thanks to [Sandpack](https://sandpack.codesandbox.io/).\n- **Internal Dependencies** – Use any component from our registry as a dependency.\n- **Multiple Demos** – Showcase different use cases and variations.\n- **Preview Images \u0026 Videos** – Make your component shine.\n\n**Pro Tip**: We encourage TypeScript components. JavaScript is cool too, but untested for now. 😉\n\n---\n\n## ⚡ Install a Component in Seconds!\n\nFound a component you love on [21st.dev](https://21st.dev)? Installing it is a breeze. Just copy the `npx shadcn` command and run it in your project's root folder.\n\nFor example, to install the `shadcn/ui/accordion` component, run:\n\n```bash\nnpx shadcn@latest add \"https://21st.dev/r/shadcn/accordion\"\n```\n\nThis command will:\n\n- Create all necessary files for the component and its dependencies.\n- Extend your Tailwind theme automatically.\n- Set up any required global styles.\n\n**Why use the command?**  \nWhile you can copy-paste code directly from the website, using `npx shadcn` ensures you get all the files and dependencies without missing a beat. It's the recommended way to go! 🚀\n\n---\n\n## 🏗 Architecture\n\nThe project uses a modern stack:\n\n- **Frontend**: Next.js 14\n- **Database**: Supabase for metadata and user data\n- **Authentication**: Clerk\n- **File Storage**: Cloudflare R2\n- **Analytics**: Amplitude\n\n---\n\n## 🛠️ Contributing to 21st.dev\n\nWe're thrilled you want to contribute! Whether you're a seasoned developer or just starting out, there's a place for you here. Let's get you set up:\n\n### 🛠️ Prerequisites\n\nBefore diving in, make sure you have:\n\n- A **Supabase** account\n- A **Clerk** account\n- A **Cloudflare R2** account\n\n### 🚀 Setup Guide\n\n1. **Fork \u0026 Clone**: Fork the repository and clone it locally. We recommend using [Cursor](https://cursor.com) if you're non-technical.\n\n2. **Install Dependencies**: We're big fans of `pnpm`! Run:\n\n   ```bash\n   pnpm install\n   ```\n\n3. **Environment Setup**: Create a `.env.local` in `apps/web` with:\n\n   ```\n   # Supabase\n   NEXT_PUBLIC_SUPABASE_URL=https://*****\n   NEXT_PUBLIC_SUPABASE_KEY=*****\n   SUPABASE_SERVICE_ROLE_KEY=*****\n\n   # Clerk\n   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=*****\n   CLERK_SECRET_KEY=*****\n   CLERK_WEBHOOK_SECRET=*****\n\n   # Cloudflare R2\n   NEXT_PUBLIC_CDN_URL=https://*****\n   R2_ACCESS_KEY_ID=*****\n   R2_SECRET_ACCESS_KEY=*****\n   NEXT_PUBLIC_R2_ENDPOINT=https://*****\n\n   # Other\n   NEXT_PUBLIC_APP_URL=https://21st.dev\n   NEXT_PUBLIC_AMPLITUDE_API_KEY=*****\n   ```\n\n4. **Start Development**:\n\n   ```bash\n   pnpm dev\n   ```\n\n5. **Open a PR**: Once you're done, open a PR to the `main` branch. We can't wait to see what you've built! 🎉\n\n---\n\n## 👥 Team\n\nThe project was developed by [@serafimcloud](https://x.com/serafimcloud), with significant contributions from [@daniel_dhawan](https://x.com/daniel_dhawan) and [@garrrikkotua](https://x.com/garrrikkotua).\n\n---\n\n## 🙏 Acknowledgments\n\nThis project wouldn't be possible without the incredible work of:\n\n- [shadcn/ui](https://ui.shadcn.com/)\n- [Tailwind CSS](https://tailwindui.com/)\n- [Sandpack by CodeSandbox](https://sandpack.codesandbox.io/)\n- [Supabase](https://supabase.com)\n- [Vercel](https://vercel.com)\n- [Clerk](https://clerk.com)\n- [Cloudflare](https://cloudflare.com)\n- [Cursor](https://cursor.com)\n- [Claude 3.5 Sonnet by Anthropic](https://anthropic.com/)\n- [MagicUI](https://magicui.design)\n\nAnd, of course, **YOU**—our amazing open-source contributors! ❤️\n\n---\n\n## 🚀 Let's Build the Future Together!\n\nReady to dive in? Start exploring, publishing, and contributing today. Let's make 21st.dev the best place for React UI components on the web. Happy coding! 🎉\n\n## 📋 Component Guidelines\n\nWe maintain high quality standards for components that appear on the homepage and in public listings. While all published components are immediately available via direct links, they go through a review process before being featured publicly.\n\n### Review Process\n\nWhen you publish a component, it follows this journey:\n\n1. **Initial State** (`on_review`) - Component is available via direct link and awaiting review\n2. **Posted State** (`posted`) - Component has passed review and is available on your profile and via direct link\n3. **Featured State** (`featured`) - Component is featured on the homepage and in public listings\n\nI ([Serafim](https://x.com/serafimcloud)) personally review each component to ensure it meets our quality standards before featuring it. This helps maintain a high-quality collection of components that truly benefit the community.\n\n### Quality Standards\n\nTo ensure your component gets featured, follow these guidelines:\n\n1. **Visual Design**\n\n   - Component should be visually polished and provide value to the community\n   - Follow modern UI/UX practices\n   - Support both light and dark themes\n   - Use consistent spacing and sizing\n\n2. **Code Structure**\n\n   - Follow the shadcn/ui pattern of separating component logic from demo content\n   - Component file should contain only the reusable functionality\n   - Demo file should showcase the component with realistic content\n   - Use props for customization and content injection\n\n3. **Theming**\n\n   - Use CSS variables from shadcn's theme system (see `globals.css`)\n   - Support both light and dark modes out of the box\n   - Use `hsl` variables for colors (e.g., `hsl(var(--background))`)\n   - Follow the naming convention for CSS variables\n\n4. **Accessibility**\n\n   - Include proper ARIA attributes\n   - Support keyboard navigation\n   - Maintain sufficient color contrast\n   - Test with screen readers\n\n5. **Documentation**\n\n   - Provide clear prop documentation\n   - Include usage examples\n   - Document any required dependencies\n   - Add helpful comments for complex logic\n\n6. **Best Practices**\n   - Keep components focused and single-purpose\n   - Minimize external dependencies\n   - Ensure responsive behavior\n   - Follow TypeScript best practices\n   - Include meaningful default props\n\nRemember: Quality over quantity! We'd rather have fewer, well-crafted components than many that don't meet our standards.\n\n---\n\n21st Labs Inc.\n","funding_links":[],"categories":["TypeScript","Platforms \u0026 Applications"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserafimcloud%2F21st","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fserafimcloud%2F21st","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserafimcloud%2F21st/lists"}