Prelude registry
The Prelude theme for shadcn/ui, designed in Figma and built on Tailwind CSS 4.3.3 colours. Every token below points at a Tailwind colour, so code and design stay in step.
Install
Add the registry to your project's components.json:
{
"registries": {
"@prelude": "https://prelude.humaan.co/r/{name}.json"
}
}Then install the theme. It updates the colour variables in your global CSS file.
npx shadcn@latest add @prelude/themeOr install it without configuring a namespace:
npx shadcn@latest add https://prelude.humaan.co/r/theme.jsonTheme
| Token | Light | Dark |
|---|---|---|
backgroundDefault page background. |
white | neutral-950 |
foregroundDefault text and icons on the page background. |
neutral-950 | neutral-50 |
cardRaised surfaces such as cards and panels. |
white | neutral-900 |
card-foregroundText and icons on cards. |
neutral-950 | neutral-50 |
popoverFloating surfaces: popovers, menus, dropdowns. |
white | neutral-900 |
popover-foregroundText and icons on floating surfaces. |
neutral-950 | neutral-50 |
primaryMain actions and brand surfaces, e.g. the default button. |
neutral-900 | neutral-200 |
primary-foregroundText and icons on primary surfaces. |
neutral-50 | neutral-900 |
secondaryLower-emphasis filled actions. |
neutral-100 | neutral-800 |
secondary-foregroundText and icons on secondary surfaces. |
neutral-900 | neutral-50 |
mutedSubdued surfaces. |
neutral-100 | neutral-800 |
muted-foregroundLow-emphasis text: descriptions, placeholders, helper text. |
neutral-500 | neutral-400 |
accentHover, focus and selected surfaces, e.g. menu highlights. |
neutral-100 | neutral-800 |
accent-foregroundText and icons on accent surfaces. |
neutral-900 | neutral-50 |
destructiveDestructive actions and errors. |
red-600 | red-400 |
borderDefault borders and dividers. |
neutral-200 | white at 10% |
inputForm control borders. |
neutral-200 | white at 15% |
ringFocus rings. |
neutral-400 | neutral-500 |
chart-1Chart series 1. |
orange-600 | blue-700 |
chart-2Chart series 2. |
teal-600 | emerald-500 |
chart-3Chart series 3. |
cyan-900 | amber-500 |
chart-4Chart series 4. |
amber-400 | purple-500 |
chart-5Chart series 5. |
amber-500 | rose-500 |
sidebarSidebar background. |
neutral-50 | neutral-900 |
sidebar-foregroundDefault sidebar text and icons. |
neutral-950 | neutral-50 |
sidebar-primaryHigh-emphasis items in the sidebar. |
neutral-900 | blue-700 |
sidebar-primary-foregroundText and icons on sidebar primary items. |
neutral-50 | neutral-50 |
sidebar-accentHover and selected rows in the sidebar. |
neutral-100 | neutral-800 |
sidebar-accent-foregroundText and icons on sidebar accent rows. |
neutral-900 | neutral-50 |
sidebar-borderSidebar borders and dividers. |
neutral-200 | white at 10% |
sidebar-ringFocus rings inside the sidebar. |
neutral-400 | neutral-500 |