21st.dev: an open source platform for quickly getting and sharing React UI components

21st.dev is an open source platform focused on the creation, sharing and installation of React UI components. Inspired by shadcn/ui, it provides lightweight, modern components based on Tailwind CSS and Radix UI. Developers can quickly install components, publish their work, or generate multiple UI variants through AI. The platform supports TypeScript and is easy to use via thenpx shadcnThe components can be integrated with commands. The community-driven model encourages developers to contribute and is suitable for front-end developers and design engineers to quickly build beautiful interfaces.

Function List

• Provides shadcn/ui based React components with support for Tailwind CSS and Radix UI.
• utilizationnpx shadcncommand to install components and their dependencies with one click.
• Supports AI generation of five UI component variants for user selection or adjustment.
• Allow developers to publish custom components to share to the community.
• Provides multiple component demonstrations, including previews and video presentations.
• TypeScript support, components are lightweight and customizable.
• Integrated Remix feature to adjust component styles via AI or chat.
• Open source community support encourages users to contribute code through GitHub.

Using Help

Installation and use

Installation of 21st.dev's components is very simple and is mainly done through thenpx shadcncommand to complete it. The following are the detailed steps:

1. Preparing the development environment
   Make sure your project has Node.js and npm installed. modern front-end frameworks like Next.js or Vite are recommended. Projects need to support React and Tailwind CSS.
2. installed component
   Open a terminal in the project root directory and run the following commands to install the required components. For example, install the accordion component:

   npx shadcn@latest add "https://21st.dev/r/shadcn/accordion"
   

This command is automatic:

• Download the component code and its dependencies.
• Create the necessary files (e.g. JSX and CSS).
• Update Tailwind configuration file to add theme styles.
• Configure global styles (if needed).

As opposed to copying the code manually, thenpx shadcncommand ensures that dependencies are complete and avoids configuration errors. Once installed, the component is ready to be used in your project.

3. Using Components
   After the installation is complete, the component appears in the specified directory of the project (usually thecomponents(folder). For example, the code for using the accordion component is as follows:

   import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
   export default function MyComponent() {
   return (
   <Accordion type="single" collapsible>
   <AccordionItem value="item-1">
   <AccordionTrigger>标题</AccordionTrigger>
   <AccordionContent>内容</AccordionContent>
   </AccordionItem>
   </Accordion>
   );
   }
   

   You can adjust the style or logic according to your project needs.

Featured Function Operation

AI Generated Component Variants

21st.dev's "Magic Agent" feature generates five UI component variants through AI. The steps are as follows:

1. Visit 21st.dev and enter the component requirements (e.g. "Login Form").
2. Click on the "Generate" button and the system will return five different styles of component previews.
3. Select a variant and click the "Remix with AI" button to further adjust the layout, color or spacing.
4. Interact with the AI through the chat interface, enter specific requirements (e.g., "increase button spacing"), and the AI will modify the code in real time.
5. Download satisfactory components or copy the code directly into the project.

Publishing Custom Components

Developers can share their components with the following steps:

1. Log in to 21st.dev and go to the "Publish" page.
2. Upload the component code, fill in the description, tags and demo preview.
3. After submission, the component enters the "on_review" state and is only visible through the direct link.
4. After approval, the component changes to "posted" status and appears on your profile and community pages.
5. Other users can be reached through thenpx shadcnInstall your components.

Community Contributions

21st.dev encourages developers to participate in open source contributions:

1. Visit the GitHub repository (https://github.com/21st-dev).
2. Fork repository and clone it locally.
3. Use an editor (such as Cursor) to develop new components or fix problems.
4. Submit Pull Request to master branch and wait for review.
5. Join the Discord community and connect with other developers.

caveat

• Ensure that the Tailwind CSS has been configured correctly, otherwise component styling may not work.
• AI-generated components may require manual code adjustments to fit the project.
• Providing clear documentation and demos when publishing components helps to pass the audit.

application scenario

1. Quickly build front-end interfaces
   Front-end developers can save development time by getting ready-made components (such as buttons, forms, navigation bars) via 21st.dev when developing web applications. After installation, you can directly adjust the style to fit the project requirements.
2. Component sharing for design engineers
   Design engineers can publish well-designed UI components to the platform for other developers to use, while optimizing their work through community feedback.
3. AI-assisted UI iteration
   Product managers or beginners can use AI to generate multiple UI variants to quickly validate design ideas without deep coding.
4. Open Source Project Development
   Open source project teams can utilize 21st.dev's component library to unify the interface style while contributing their own components to expand the project's reach.

QA

1. Are the components of 21st.dev free?
   Yes, 21st.dev is an open source platform and all components are free to use, but some advanced features may require a subscription (e.g. higher AI generation quota).
2. How do I make sure the components are compatible with my project?
   Components are developed based on React, Tailwind CSS and Radix UI. Ensure that the project supports these technology stacks and that Tailwind CSS is properly configured for compatibility.
3. Are AI-generated components commercially available?
   Yes, but check the open source agreement (e.g. MIT) for the specific component. It is recommended to confirm copyright ownership before commercialization.
4. How long does it take to publish a component for review?
   Usually 1-3 days, depending on the completeness of the components and the quality of the documentation.