Cursor rule

1---
2description: How to install shadcn React components
3globs: 
4alwaysApply: false
5---
6The following official shadcn-ui components are available. Please check to see if they are installed under `./apps/web/components/ui` before installing them with `pnpm dlx shadcn@latest add <component-id>`.
7 
8Notice that The 'shadcn-ui' package is deprecated. Please use the 'shadcn' package instead. For example:
9 
10```bash
11pnpm dlx shadcn@latest add progress --cwd apps/web
12```
13 
14YOU MUST use `pnpm dlx shadcn@latest` when installing shadcn packages.
15 
16Docs for each components are available at `https://ui.shadcn.com/docs/components/<component-id>`. Fetch and read the docs before using the component so that your knowledge is up-to-date.
17 
18#	Component ID (slug)	Human-friendly name	What it's for (1-sentence use-case)
191	accordion	Accordion	Stack of headings that expand/collapse to reveal hidden content.
202	alert	Alert	Static call-out box for status or info messages.
213	alert-dialog	Alert Dialog	Modal that interrupts the flow to confirm or warn about critical actions.
224	aspect-ratio	Aspect Ratio	Wrapper that locks children to a fixed width-to-height ratio (great for responsive media).
235	avatar	Avatar	Small user/asset image or initials placeholder.
246	badge	Badge	Tiny label for counts or status (e.g. “New”, “3”).
257	breadcrumb	Breadcrumb	Navigation trail that shows “where you are” in the app hierarchy.
268	button	Button	Click/tap element that triggers an action.
279	calendar	Calendar	Stand-alone calendar view, used by Date Picker or on its own.
2810	card	Card	Content container with optional header/body/footer.
2911	carousel	Carousel	Horizontal slider that cycles through a set of items or images.
3012	chart	Chart	Light wrapper for quick bar/line/pie visualizations.
3113	checkbox	Checkbox	Square control for on/off selection of independent items.
3214	collapsible	Collapsible	Utility that hides/reveals content with smooth height animation.
3315	combobox	Combobox	Autocomplete text input that filters a long list and lets users pick an item.
3416	command	Command Palette	VS Code-style keyboard overlay for fuzzy-searching actions.
3517	context-menu	Context Menu	Right-click (long-press) menu with context-specific commands.
3618	data-table	Data Table	Table with helpers for sorting, filtering and pagination.
3719	date-picker	Date Picker	Input field that pops a calendar for choosing dates or ranges.
3820	dialog	Dialog	Generic modal overlay for arbitrary interactive content.
3921	drawer	Drawer	Slide-in panel (often from edge/bottom) for secondary workflows.
4022	dropdown-menu	Dropdown Menu	Triggered list of options/actions that auto-dismisses on selection.
4123	form	Form	Helpers and styles for accessible, validated forms.
4224	hover-card	Hover Card	Lightweight popover that appears on hover/focus to show extra info.
4325	input	Input	Standard single-line text field.
4426	input-otp	Input OTP	Grouped inputs optimised for entering one-time pass-codes.
4527	label	Label	Accessible label element for any form control.
4628	menubar	Menubar	Horizontal desktop-app-style menu with dropdown sub-menus.
4729	navigation-menu	Navigation Menu	Multi-level nav bar with active indicators and hover previews.
4830	pagination	Pagination	Next/previous + numbered page controls for paginated data sets.
4931	popover	Popover	Non-modal floating panel anchored to a trigger (e.g. emoji picker).
5032	progress	Progress	Linear bar that shows completion percentage.
5133	radio-group	Radio Group	Set of mutually-exclusive selection buttons.
5234	resizable	Resizable	Wrapper that lets users drag to resize split panes.
5335	scroll-area	Scroll Area	Augments native scrolling with custom styling and shadows.
5436	select	Select	Styled single-select dropdown (native <select> replacement).
5537	separator	Separator	Horizontal or vertical rule dividing content.
5638	sheet	Sheet	Mobile-friendly slide-up bottom sheet (from tiny to full-screen).
5739	sidebar	Sidebar	Vertical navigation rail that can collapse/expand.
5840	skeleton	Skeleton	Grey placeholder shapes shown while real content loads.
5941	slider	Slider	Draggable handle on a track for numeric values or ranges.
6042	sonner	Sonner	Opinionated toast component (thin wrapper around the Sonner library).
6143	switch	Switch	Toggle switch for true/false settings.
6244	table	Table	Basic static table markup & styling.
6345	tabs	Tabs	Tab strip that swaps between associated panels.
6446	textarea	Textarea	Multi-line text input.
6547	toast	Toast	Ephemeral message that pops at screen edge and auto-dismisses.
6648	toggle	Toggle	Pressable button that stays pressed/un-pressed to indicate state.
6749	toggle-group	Toggle Group	Collection of toggles acting as single- or multi-select controls.
6850	tooltip	Tooltip	Small hover/focus label supplying helper text.
69