21st.dev

21st.dev Introduction

21st.dev is an open-source registry of React UI components, specifically designed for design engineers. It offers a variety of high-quality, ready-to-use components built using libraries like Tailwind CSS and Radix UI. The platform aims to help developers ship polished UIs faster by providing pre-built components that are easy to integrate into projects.

21st.dev Features

Overview of Components

21st.dev provides a comprehensive set of React UI components, categorized for easy navigation and use:

• Pro Components: High-quality React components from trusted developers.
• Top Authors: Features components created by leading frontend developers and design engineers who specialize in technologies like React.js, Next.js, TypeScript, and TailwindCSS.
• Landing Pages: A variety of landing page sections, including:
  • Announcements
  • Backgrounds
  • Borders
  • Call to Action
  • Clients
  • Comparison
  • Docks
  • Features
  • Footer
  • Hero
  • Images
  • Maps
  • Navigation Menus
  • Pricing
  • Scroll Area
  • Testimonials
  • Text
  • Video
• UI Elements: A wide range of UI components, such as:
  • Accordion
  • AI Chat (New)
  • Alert
  • Avatar
  • Badge
  • Button
  • Calendar (New)
  • Card
  • Carousel
  • Checkbox
  • Date Picker (New)
  • Dialog / Modal
  • Dropdown
  • Empty State
  • File Tree
  • File Upload
  • Form (New)
  • Icons
  • Input
  • Link
  • Menu
  • Notification (New)
  • Numbers
  • Pagination
  • Popover (New)
  • Radio Group
  • Select
  • Sidebar
  • Sign In
  • Sign up
  • Slider
  • Spinner Loader (New)
  • Tables
  • Tabs
  • Tags
  • Text Area
  • Toast
  • Toggle
  • Tooltip
• Hooks: Includes various utility hooks for React applications.

Key Highlights

• Inspired by shadcn/ui: The components are inspired by shadcn/ui, known for its high-quality, customizable UI components.
• Built for Design Engineers: The platform is specifically designed to meet the needs of design engineers.
• Easy Installation: Components can be installed with a single command.
• Seamless Integration: Allows developers to easily explore, install, and integrate these components into their projects.

Components Examples

• Notification Components: Ready-to-use React Tailwind components inspired by shadcn/ui.
• Menu Components: Discover and share menu components, also inspired by shadcn/ui.

21st.dev Frequently Asked Questions

What is 21st.dev?

21st.dev is an open-source registry providing React UI components built with Tailwind CSS and Radix UI, designed for design engineers to quickly build polished user interfaces.

Who is 21st.dev designed for?

21st.dev is designed for design engineers and developers who want to quickly integrate high-quality, ready-to-use React UI components into their projects.

What kind of components are available on 21st.dev?

The platform offers a wide range of components, including landing page sections, UI elements like buttons, forms, and modals, and utility hooks. These components are inspired by shadcn/ui.

How are the components installed?

Components can be installed with a single command, making it easy to integrate them into React projects.

What technologies are used to build the components?

The components are built using Tailwind CSS and Radix UI, ensuring high quality and ease of customization.