Select UI framework

Get Started

Installation
Theming
Dark Mode
CLI
Figma

Radix UI

Introduction
All Components

Alert App Store Button Aspect Ratio Badge Banner Breadcrumb Button Group Button Checkbox Command Menu CompactButton Dialog Drawer Dropdown Menu Empty Fancy Button File Upload Hint Input OTP Input Item Kbd Label LinkButton Loader Popover Progress Bar Progress Circle Radio Group Rating Select Separator Skeleton Slider Social Button Switch Tag Textarea Toggle Group Toggle Tooltip

React Aria

Introduction
All Components

Alert App Store Button Aspect Ratio Badge Banner Breadcrumb Button Group Button Checkbox Command Menu CompactButton Dialog Drawer Empty Fancy Button File Upload Hint Input OTP Input Item Kbd Label LinkButton Loader Popover Progress Bar Progress Circle Radio Group Rating Select Separator Skeleton Slider Social Button Switch Tag Textarea Toggle Group Toggle Tooltip

Base UI

Introduction
All Components

Aspect Ratio Button Kbd Loader Skeleton

Products

Base Components
FREE
Components & Blocks
PRO
Sectoral Templates
PRO
Figma File
PRO

Installation

How to install dependencies and structure your app.

Pick Your Framework

Start by selecting your framework of choice. Then follow the instructions to install the dependencies and structure your app. shadcn/ui is built to work with all React frameworks.

Next.js

Vite

Laravel

React Router

Astro

TanStack Start

TanStack Router

Manual

Introduction components.json

On This Page

Pick Your Framework