Execute qualquer Skill no Manus
com um clique

Execute qualquer Skill no Manus com um clique

shadcn-ui

Estrelas3

Forks0

Atualizado16 de fevereiro de 2026 às 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.

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Executar no Manus

Explorador de arquivos

5 arquivos

SKILL.md

readonly

Execute qualquer Skill com um clique

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