[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73579":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":34,"readmeContent":35,"aiSummary":36,"trendingCount":16,"starSnapshotCount":16,"syncStatus":37,"lastSyncTime":38,"discoverSource":39},73579,"21st","serafimcloud\u002F21st","serafimcloud","npm for design engineers: largest marketplace of shadcn\u002Fui-based React Tailwind components, blocks and hooks","https:\u002F\u002F21st.dev",null,"TypeScript",5267,296,26,124,0,5,11,35,15,38.42,"MIT License",false,"main",[26,27,28,29,30,31,32,33],"nextjs","react","shadcn","shadcn-ui","tailwindcss","ui","ui-components","ui-library","2026-06-12 02:03:15","# 🚀 Welcome to 21st.dev!\n\n**[21st.dev](https:\u002F\u002F21st.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\u002Fui](https:\u002F\u002Fui.shadcn.com\u002F), we're here to make building UIs faster, easier, and more fun. 🎉\n\n[![Discord](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDiscord-Join%20Us-7289da?logo=discord&logoColor=white&style=for-the-badge)](https:\u002F\u002Fdiscord.gg\u002FQx4rFunHfm)\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:\u002F\u002Fdiscord.gg\u002FQx4rFunHfm)** – Get help, share your work, and chat with other developers\n- **Follow us on [X\u002FTwitter](https:\u002F\u002Fx.com\u002Fserafimcloud)** – Stay updated with the latest features and components\n- **Star us on [GitHub](https:\u002F\u002Fgithub.com\u002Fserafimcloud\u002F21st)** – 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 & Community-Driven**: Built by developers, for developers. Everyone is welcome to contribute!\n- **Minimal & 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:\u002F\u002F21st.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:\u002F\u002Fx.com\u002Fserafimcloud)) 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\u002FUX practices\n\n2. **Code Structure**\n\n   - Follow the shadcn\u002Fui 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\u002F                # 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\u002F                    # Each component can have multiple demos\n    ├── default\u002F             # Primary demo (required)\n    │   ├── code.demo.tsx    # Demo implementation\n    │   ├── preview.png      # Static preview image\n    │   └── video.mp4        # Optional demo video\n    └── advanced\u002F            # 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\u002F{user_id}\u002F{component_slug}\u002F...\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:\u002F\u002Fsandpack.codesandbox.io\u002F).\n- **Internal Dependencies** – Use any component from our registry as a dependency.\n- **Multiple Demos** – Showcase different use cases and variations.\n- **Preview Images & 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:\u002F\u002F21st.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\u002Fui\u002Faccordion` component, run:\n\n```bash\nnpx shadcn@latest add \"https:\u002F\u002F21st.dev\u002Fr\u002Fshadcn\u002Faccordion\"\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 & Clone**: Fork the repository and clone it locally. We recommend using [Cursor](https:\u002F\u002Fcursor.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\u002Fweb` with:\n\n   ```\n   # Supabase\n   NEXT_PUBLIC_SUPABASE_URL=https:\u002F\u002F*****\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:\u002F\u002F*****\n   R2_ACCESS_KEY_ID=*****\n   R2_SECRET_ACCESS_KEY=*****\n   NEXT_PUBLIC_R2_ENDPOINT=https:\u002F\u002F*****\n\n   # Other\n   NEXT_PUBLIC_APP_URL=https:\u002F\u002F21st.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:\u002F\u002Fx.com\u002Fserafimcloud), with significant contributions from [@daniel_dhawan](https:\u002F\u002Fx.com\u002Fdaniel_dhawan) and [@garrrikkotua](https:\u002F\u002Fx.com\u002Fgarrrikkotua).\n\n---\n\n## 🙏 Acknowledgments\n\nThis project wouldn't be possible without the incredible work of:\n\n- [shadcn\u002Fui](https:\u002F\u002Fui.shadcn.com\u002F)\n- [Tailwind CSS](https:\u002F\u002Ftailwindui.com\u002F)\n- [Sandpack by CodeSandbox](https:\u002F\u002Fsandpack.codesandbox.io\u002F)\n- [Supabase](https:\u002F\u002Fsupabase.com)\n- [Vercel](https:\u002F\u002Fvercel.com)\n- [Clerk](https:\u002F\u002Fclerk.com)\n- [Cloudflare](https:\u002F\u002Fcloudflare.com)\n- [Cursor](https:\u002F\u002Fcursor.com)\n- [Claude 3.5 Sonnet by Anthropic](https:\u002F\u002Fanthropic.com\u002F)\n- [MagicUI](https:\u002F\u002Fmagicui.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:\u002F\u002Fx.com\u002Fserafimcloud)) 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\u002FUX practices\n   - Support both light and dark themes\n   - Use consistent spacing and sizing\n\n2. **Code Structure**\n\n   - Follow the shadcn\u002Fui 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","21st.dev 是一个面向设计工程师的开源社区注册表，提供基于 shadcn\u002Fui 的 React 和 Tailwind CSS 组件、模块和钩子。其核心功能包括发布、发现和安装轻量级、现代化且可复用的 React 组件，这些组件由 Tailwind CSS 和 Radix UI 提供支持。项目采用 TypeScript 开发，确保了类型安全。21st.dev 适合需要快速构建美观用户界面的开发者和设计师使用，无论是创建新项目还是优化现有项目，都能从中受益。此外，该项目还拥有活跃的社区支持，用户可以轻松分享自己的组件并获得反馈。",2,"2026-06-11 03:46:13","high_star"]