Shadcn

# shadcn/ui > shadcn/ui is a collection of beautifully-designed, accessible components and a code distribution platform. It is built with TypeScript, Tailwind CSS, and Radix UI primitives. It supports multiple frameworks including Next.js, Vite, Remix, Astro, and more. Open Source. Open Code. AI-Ready. It also comes with a command-line tool to install and manage components and a registry system to publish and distribute code. ## Overview - [Introduction](https://ui.shadcn.com/docs): Core principles—Open Code, Composition, Distribution, Beautiful Defaults, and AI-Ready design. - [CLI](https://ui.shadcn.com/docs/cli): Command-line tool for installing and managing components. - [components.json](https://ui.shadcn.com/docs/components-json): Configuration file for customizing the CLI and component installation. - [Theming](https://ui.shadcn.com/docs/theming): Guide to customizing colors, typography, and design tokens. - [Typeset](https://ui.shadcn.com/docs/typeset): Typography for rendered markdown, from blog posts to streaming chat. One CSS file that scales from its container and reads your theme. - [Changelog](https://ui.shadcn.com/docs/changelog): Release notes and version history. - [Skills](https://ui.shadcn.com/docs/skills): Deep shadcn/ui knowledge for AI assistants like Claude Code. - [Directory](https://ui.shadcn.com/docs/directory): Community registries built into the CLI. ## Installation - [Next.js](https://ui.shadcn.com/docs/installation/next): Install shadcn/ui in a Next.js project. - [Vite](https://ui.shadcn.com/docs/installation/vite): Install shadcn/ui in a Vite project. - [Remix](https://ui.shadcn.com/docs/installation/remix): Install shadcn/ui in a Remix project. - [Astro](https://ui.shadcn.com/docs/installation/astro): Install shadcn/ui in an Astro project. - [Laravel](https://ui.shadcn.com/docs/installation/laravel): Install shadcn/ui in a Laravel project. - [Gatsby](https://ui.shadcn.com/docs/installation/gatsby): Install shadcn/ui in a Gatsby project. - [React Router](https://ui.shadcn.com/docs/installation/react-router): Install shadcn/ui in a React Router project. - [TanStack Router](https://ui.shadcn.com/docs/installation/tanstack-router): Install shadcn/ui in a TanStack Router project. - [TanStack Start](https://ui.shadcn.com/docs/installation/tanstack): Install shadcn/ui in a TanStack Start project. - [Manual Installation](https://ui.shadcn.com/docs/installation/manual): Manually install shadcn/ui without the CLI. ## Components ### Form & Input - [Field](https://ui.shadcn.com/docs/components/field): Field component for form inputs with labels and error messages. - [Button](https://ui.shadcn.com/docs/components/button): Button component with multiple variants. - [Button Group](https://ui.shadcn.com/docs/components/button-group): Group multiple buttons together. - [Input](https://ui.shadcn.com/docs/components/input): Text input component. - [Input Group](https://ui.shadcn.com/docs/components/input-group): Input component with prefix and suffix addons. - [Input OTP](https://ui.shadcn.com/docs/components/input-otp): One-time password input component. - [Textarea](https://ui.shadcn.com/docs/components/textarea): Multi-line text input component. - [Checkbox](https://ui.shadcn.com/docs/components/checkbox): Checkbox input component. - [Radio Group](https://ui.shadcn.com/docs/components/radio-group): Radio button group component. - [Select](https://ui.shadcn.com/docs/components/select): Select dropdown component. - [Native Select](https://ui.shadcn.com/docs/components/native-select): Styled native HTML select element. - [Switch](https://ui.shadcn.com/docs/components/switch): Toggle switch component. - [Slider](https://ui.shadcn.com/docs/components/slider): Slider input component. - [Calendar](https://ui.shadcn.com/docs/components/calendar): Calendar component for date selection. - [Date Picker](https://ui.shadcn.com/docs/components/date-picker): Date picker component combining input and calendar. - [Combo […gekürzt]