Sections
  • Get Started
  • Components
  • AI Elements
  • Forms
Get Started
  • Installation
  • Theming
  • Dark Mode
  • llms.txt
Components
  • Alert
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Checkbox Group
  • ComboBox
  • Command
  • Data Table
  • Date Field
  • Date Picker
  • Date Range Picker
  • Dialog
  • Disclosure
  • Disclosure Group
  • Drawer
  • Empty
  • Field
  • File Trigger
  • Form
  • Grid List
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kbd
  • Label
  • ListBox
  • Menu
  • Number Field
  • Pagination
  • Popover
  • Progress Bar
  • Radio Group
  • Range Calendar
  • Resizable
  • Search Field
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spinner
  • Switch
  • Table
  • Tabs
  • Tag Group
  • Text Field
  • Textarea
  • Time Field
  • Toast
  • Toggle Button
  • Toggle Button Group
  • Tooltip
  • Tree
  • Typography
AI Elements
  • Actions
  • Artifact
  • Branch
  • Chain of Thought
  • Code Block
  • Context
  • Conversation
  • Image
  • Inline Citation
  • Loader
  • Message
  • Open in Chat
  • Plan
  • Prompt Input
  • Queue
  • Reasoning
  • Response
  • Shimmer
  • Sources
  • Suggestion
  • Task
  • Tool
  • Web Preview
Forms
  • React Hook Form
  • TanStack Form

Installation

PreviousNext

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

Next.js

Vite

Vite

Laravel

React Router

Astro

Astro

TanStack Start

TanStack Router

React

Manual

IntroductionTheming

On This Page

Pick Your Framework
Built by jsartisan .