Styling

Colors and the radius come from your shadcn tokens, such as --primary and --radius. To change them, edit the tokens in :root and .dark. See the shadcn theming guide (opens in a new tab).

To use the vip/ui colors, copy a theme from Themes. Each theme uses the color scales.

vip/ui adds these tokens to your global CSS file:

• --success and --warning, each with a -subtle and a -foreground token, for status colors.
• --shadow-card, --shadow-float, and --shadow-inset for shadows.
• --ease-out-quint and --ease-spring for transitions.

The CLI adds only the tokens that a component uses. For a manual installation, the theme styles add all of them.

vip/ui has ten color scales with 12 steps each. Get the CSS from Colors. It sets variables such as --blue-1 to --blue-12 in :root and .dark.

Use each step for one purpose:

• Backgrounds, steps 1, 2: Page and card backgrounds.
• Fills, steps 3, 4, 5: Component fills for the normal, hover, and pressed state.
• Borders, steps 6, 7, 8: Lines between sections, component borders, and hover borders.
• Solids, steps 9, 10: Buttons, badges, and focus rings. Step 10 is the hover state.
• Text, steps 11, 12: Secondary text and high-contrast text.

A step has the same lightness in every scale, so all scales pass the same checks. Step 11 on step 1 or 2 is at least 4.5:1. Step 12 on step 1 or 2 is at least 7:1. Step 1 on step 9 is at least 4.5:1. On Yellow in light mode, use step 12 on step 9.

The themes set the shadcn tokens to steps. To make your own theme, map the tokens to steps:

:root {  --background: var(--gray-2);  --foreground: var(--gray-12);  --card: var(--gray-1);  --popover: var(--gray-1);  --primary: var(--blue-9);  --primary-foreground: var(--blue-1);  --secondary: var(--gray-3);  --muted: var(--gray-3);  --muted-foreground: var(--gray-11);  --accent: var(--gray-4);  --border: var(--gray-6);  --input: var(--gray-7);  --ring: var(--blue-9);  --destructive: var(--red-9);}.dark {  --background: var(--gray-1);  --card: var(--gray-2);  --popover: var(--gray-3);  --secondary: var(--gray-4);  --muted: var(--gray-4);  --accent: var(--gray-5);}

Put the dark class on the html element. Components then use the tokens in .dark.

Menus, popovers, selects, dialogs, sheets, tooltips, and toasts render in a portal on document.body. They get tokens from the document root, not from the trigger.

If you set the tokens on a different element, use UNSAFE_PortalProvider from react-aria. Set its getContainer to return that element. Overlays then render inside it.

Each component is a file in your project. To change a component everywhere, edit its file.

Some components keep their variants in a Tailwind Variants recipe, such as buttonStyles in button-styles.tsx. To add a variant, add a key to the recipe.

export const buttonStyles = tv({  variants: {    variant: {      default: "bg-primary text-primary-foreground hover:bg-primary/90",      success: "bg-success text-background hover:bg-success/90",    },  },});

To change one instance, pass className. vip/ui merges it after the component classes. A conflicting utility, such as px-6, replaces the default.

<Button variant="success">Approve</Button><Button className="w-full">Save changes</Button>

React Aria sets a data attribute for each interactive state, such as data-pressed and data-selected. The Tailwind plugin adds a variant for each attribute, such as pressed: and selected:. Use these variants in your own classes.

React Aria styling guide (opens in a new tab)