Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

shadcn-ui

Sterne3

Forks0

Aktualisiert16. Februar 2026 um 16:39

Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.

Installation

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Datei-Explorer

5 Dateien

SKILL.md

readonly

Jeden Skill mit einem Klick ausführen

name	shadcn-ui
description	Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.

shadcn/ui

Copy-paste component library built on Radix UI + Tailwind CSS. You own the code.

Setup

npx shadcn@latest init

Select: TypeScript, Default style, CSS variables, @/components path alias.

Adding Components

npx shadcn@latest add <component>       # Single component
npx shadcn@latest add button input form  # Multiple
npx shadcn@latest add --all             # Everything

Key Concepts

Components install to src/components/ui/ — modify them directly.
Theming via CSS variables in globals.css (see tailwind-v4-shadcn skill for Tailwind v4 setup).
Most interactive components need 'use client' directive.
Forms use React Hook Form + Zod via the form component.

Component Reference

Before implementing a component, fetch its docs page for current API and examples.

Layout & Structure

Forms & Inputs

Data Display

Avatar: https://ui.shadcn.com/docs/components/avatar
Badge: https://ui.shadcn.com/docs/components/badge
Calendar: https://ui.shadcn.com/docs/components/calendar
Carousel: https://ui.shadcn.com/docs/components/carousel
Chart: https://ui.shadcn.com/docs/components/chart
Data Table: https://ui.shadcn.com/docs/components/data-table
Table: https://ui.shadcn.com/docs/components/table

Overlays & Feedback

Alert: https://ui.shadcn.com/docs/components/alert
Alert Dialog: https://ui.shadcn.com/docs/components/alert-dialog
Dialog: https://ui.shadcn.com/docs/components/dialog
Drawer: https://ui.shadcn.com/docs/components/drawer
Hover Card: https://ui.shadcn.com/docs/components/hover-card
Popover: https://ui.shadcn.com/docs/components/popover
Sheet: https://ui.shadcn.com/docs/components/sheet
Sonner (Toast): https://ui.shadcn.com/docs/components/sonner
Toast: https://ui.shadcn.com/docs/components/toast
Tooltip: https://ui.shadcn.com/docs/components/tooltip

Navigation

Utilities

Aspect Ratio: https://ui.shadcn.com/docs/components/aspect-ratio
Progress: https://ui.shadcn.com/docs/components/progress
Skeleton: https://ui.shadcn.com/docs/components/skeleton

Theming

Theming guide: https://ui.shadcn.com/docs/theming
Dark mode: https://ui.shadcn.com/docs/dark-mode
Typography: https://ui.shadcn.com/docs/components/typography
Figma: https://ui.shadcn.com/docs/figma

References

Docs: https://ui.shadcn.com/docs
Examples: https://ui.shadcn.com/examples
Blocks (full page templates): https://ui.shadcn.com/blocks