You
Which component do I use for a settings form?
Accessible React components, with motion in every state.
Add the components to your project as source files. React Aria controls keyboard, focus, and screen reader behavior. Motion shows each change of state.
Chat
Assistant
Use Switch for a setting that applies at once. Use Checkbox when people must push Save. Put related controls in a Fieldset.
Notifications
A person tags you in a comment.
A build stops because of an error.
A summary of your projects each Monday.
Plan and usage
Renews on November 1.
Build minutes1,640 of 2,000
Bandwidth48 of 100 GB
82% of build minutes used
New builds stop at the limit.
Rate this release
Revenue
$251,00012.1%
Last 30 days
- Pro
- Team
| Period | Pro | Team |
|---|---|---|
| Sep 10 | 21 | 12 |
| Sep 15 | 23 | 14 |
| Sep 20 | 22 | 15 |
| Sep 25 | 26 | 17 |
| Sep 30 | 29 | 19 |
| Oct 5 | 31 | 22 |
Invoices
| Customer | Invoice | Status | Amount |
|---|---|---|---|
| Lumen LabsPaid | INV-2048 | Paid | $4,200 |
| Harbor & Co.Pending | INV-2047 | Pending | $1,850 |
| FieldworkOverdue | INV-2046 | Overdue | $960 |
| Kettle StudioPaid | INV-2045 | Paid | $12,400 |
| NorthpeakDraft | INV-2044 | Draft | $3,100 |
1–5 of 8
Release notes
Draft. Saved 2 minutes ago.
Title
Sheet replaces Drawer. A sheet opens from any edge and closes when you swipe it away.
Time off
October 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
People who write to you get your return date.
5 work days
Release checklist
Done2 of 3
Production
- Completed: Build
- Completed: Check
- Completed: Release
Live on acme.app
main · 8c4e21a
Files
- acme-web
- src
- components
- button.tsx
src
app
components
dialog.tsx
package.json
Uploads
PNG, JPEG, or PDF. 10 MB or less.
Drop files here
brand-guide.pdf
2.4 MBUploaded
hero-image.png
1.8 MBUploading 24%
24%launch-deck.pdf
6.6 MBUpload stopped.
Invite people
Role
12 members
Activity
- Latest:
Maya merged #482
Sam opened #483
Jo released 2.3
Accessible behavior from React Aria
React Aria controls the behavior of each interactive component. You get keyboard, focus, and screen reader support without extra code.
Keyboard test
No mouse needed- Keyboard
- Each control uses the keyboard pattern that people expect. Focus moves in a logical order.
- Screen readers
- Components set the correct roles, names, and states. Live regions announce status changes.
- Visible focus
- A ring shows keyboard focus. A mouse click does not show the ring.
- High contrast
- Focus and selection stay visible when Windows high contrast mode is on.
- Pointer and touch
- Press events work the same with a mouse, a finger, or a pen.
- Languages
- Dates and numbers use the format of each locale. Layouts work from right to left.
One motion system for all components
Motion shows what changed and where it went. All components use the same durations, curves, and springs.
Durations and springs
fast
150 ms
base
200 ms
slow
250 ms
springPop
350 ms
springSnappy
0.24 s
springLayout
0.3 s
- Shared tokens
- Four durations, three curves, and three springs. The motion guide lists each component with a tuned timing.
- Reduced motion
- Components obey the reduced motion setting of the operating system.
Your theme controls every component
Components read the CSS variables of your shadcn theme. Change a variable, and every component changes with it. Select a theme to see the result.
Workspace
Acme Inc.
Storage64 of 100 GB
ThemeTeal
:root {.dark { --primary: oklch(0.522 0.140 178); --primary-foreground: oklch(0.987 0.007 178); --ring: oklch(0.522 0.140 178); --chart-1: oklch(0.522 0.140 178); --primary: oklch(0.700 0.140 178); --primary-foreground: oklch(0.185 0.025 178); --ring: oklch(0.700 0.140 178); --chart-1: oklch(0.700 0.140 178);}- Light and dark
- Each theme sets the variables for light mode and dark mode.
- Color scales
- Themes use the 12-step color scales. The neutrals come from the gray scale.
Install the source, not a package
The shadcn CLI copies each component into your project. You own the code, and you can change every line.
1Set up your project
Use React 19, TypeScript, Tailwind CSS v4, and a shadcn theme with CSS variables. Read the setup steps.
2Add a component
npmyarnpnpmbun3Import it
save-button.tsx
- Source files
- The CLI writes each file to
components/vip-ui. Your shadcn components do not change. - Dependencies
- The CLI installs the packages that the component uses. It also adds the Tailwind plugin and the theme variables.
- Any React app
- Components do not import from Next.js. You can use them in a Vite app.
- Manual install
- Each component page lists the files and packages. You can copy them without the CLI.
92 components in 10 groups
Each component page has live examples, the source code, install steps, and an API reference.
- Actions10Button, Button group, Menu, Context menu, and more
- Forms23Text field, Password field, Password strength meter, Inline edit, and more
- Date & color10Date field, Time field, Calendar, Range calendar, and more
- Overlays5Dialog, Sheet, Popover, Tooltip, and more
- Navigation4Link, Tabs, Breadcrumbs, Pagination
- Collections6List box, Grid list, Tree, Tag group, and more
- Feedback9Alert, Badge, Progress bar, Progress ring, and more
- Display & layout9Card, Accordion, Disclosure, Separator, and more
- AI7Message, Agent status, Tool call, Source link, and more
- Motion & effects9Text swap, Animated number, Text reveal, Text scramble, and more
Start with one component.
Add more components when you need them. vip/ui is open source under the MIT license.