Customizing

Change one component, or one place where it's used, without touching the tokens.

Set an option from a parent

Each component has options: custom properties named after it, like --dui-button-bg or --dui-input-radius. Custom properties pass down to child elements, so you can set them on any parent, in your own scoped styles. No :global() needed:

<div class="danger-zone">
	<Button>Delete project</Button>
</div>

<style>
	.danger-zone {
		--dui-button-bg: var(--dui-color-destructive);
		--dui-button-radius: 9999px;
	}
</style>

Or on the component itself:

<Button style="--dui-button-bg: oklch(0.55 0.2 260)">Save</Button>

Every component page lists its options and their defaults under Customizing. The same list is in a comment above each component's <style> block.

The rule of thumb: a variable starting with --dui- is meant to be set. Anything else inside a component is internal.

How the options work

Inside the component, every property reads its option first and falls back to a token. The second value in var() is the fallback, used when the option isn't set:

.button[data-variant='secondary'] {
	background: var(--dui-button-bg, var(--dui-color-secondary));
	color: var(--dui-button-fg, var(--dui-color-secondary-foreground));

	&:hover {
		background: var(--dui-button-hover-bg, var(--dui-color-secondary-hover));
	}
}

So if you never set --dui-button-bg, a secondary button uses --dui-color-secondary. If you set it, your value wins on every variant.

Edit the file

The component files are yours. For anything the options don't cover, open the file and change the CSS. To add a variant, add 'brand' to the ButtonVariant type at the top of the file, add a rule for it, and pass variant="brand":

.button[data-variant='brand'] {
	background: linear-gradient(135deg, oklch(0.6 0.2 300), oklch(0.6 0.2 250));
	color: white;
}

The CLI never overwrites a file you've changed, so your edits are safe when you add more components.

Next: Styling from scratch →