21st: Discover, Publish, and Install React UI Components with Tailwind CSS

Summary

21st.dev is an open-source community registry for React UI components, inspired by shadcn/ui. It provides a platform for developers to publish, discover, and install minimal, modern, and reusable components built with Tailwind CSS and Radix UI. This project aims to make building UIs faster, easier, and more enjoyable for everyone.

Use at your own risk

OSRepos shares public repositories for knowledge and discovery only. Any installation, execution, configuration, or use of code from these repositories is the user's own responsibility. Always review the repository, source code, dependencies, licenses, and security implications before running or installing anything. OSRepos is not responsible for issues, damages, or losses resulting from third-party repositories.

Introduction

21st.dev is an open-source community registry dedicated to React UI components, offering a vibrant marketplace for design engineers. Inspired by the popular shadcn/ui, this platform enables users to publish, discover, and install a vast collection of minimal, modern, and reusable React components, all powered by Tailwind CSS and Radix UI. With over 4,800 stars on GitHub, 21st.dev is rapidly becoming a go-to resource for streamlining UI development.

Installation

Installing components from 21st.dev is designed to be quick and straightforward. Once you find a component you like on the platform, you can easily add it to your project using the npx shadcn command. This method ensures all necessary files, dependencies, and Tailwind theme extensions are correctly integrated into your project.

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

Examples

While 21st.dev hosts a wide array of React UI components, the platform also empowers developers to contribute their own creations. Publishing a component is a streamlined process, typically taking just a minute. Components undergo a review process, moving from on_review to posted and potentially to featured status, ensuring high-quality contributions adhere to visual design, code structure, theming, and accessibility standards. The recommended file structure for components is as follows:

your-component/
??? code.tsx
??? tailwind.config.js
??? globals.css
??? demos/
    ??? default/
    ?   ??? code.demo.tsx
    ?   ??? preview.png
    ?   ??? video.mp4
    ??? advanced/
        ??? code.demo.tsx
        ??? preview.png
        ??? video.mp4

Why Use 21st.dev?

21st.dev offers several compelling advantages for developers and designers alike. It is an open-source and community-driven platform, ensuring components are built by developers for developers. The components are minimal, modern, and highly customizable, leveraging Tailwind CSS and Radix UI. With easy installation via npx shadcn, support for multiple demos, extensibility, and first-class TypeScript support, 21st.dev simplifies and enhances the UI development workflow.