3

One control, five shapes.

Svelte components built from one track, one thumb and one signal.

Browse the components Open a demo screen

Four parts in every control

The track 0 × 0 px, radius 0 radius = height ÷ 5

  1. The track

    Grey, as tall as the control. Its corners are a fifth of its height.

  2. The inset

    A tenth of the height, all the way round. Nothing touches the edge.

  3. The thumb

    Raised and white. It is the only part that moves.

  4. The signal

    Green means on. Nothing else on a screen is this green.

One variable sizes everything

Set --dna-h on any element. Radius, inset and type follow it.

4
Height
40px
Radius
8px
Inset
4px

Written like shadcn-svelte

SettingsCard.svelte, markup 
<div class="flex flex-col gap-5">
	<Label class="justify-between">Push notifications <Switch bind:checked={push} /></Label>
	<Label class="justify-between" for="digest">
		Email digest
		<ToggleGroup.Root id="digest" type="single" variant="segmented" bind:value={digest} aria-label="Email digest">
			<ToggleGroup.Item value="off">Off</ToggleGroup.Item>
			<ToggleGroup.Item value="daily">Daily</ToggleGroup.Item>
			<ToggleGroup.Item value="weekly">Weekly</ToggleGroup.Item>
		</ToggleGroup.Root>
	</Label>
	<div class="flex items-center justify-between text-sm font-medium">
		Snooze for {snooze} min
		<Stepper bind:value={snooze} min={5} max={120} step={5} aria-label="Snooze minutes" />
	</div>
</div>

The same file, running:

Snooze for 30 min
30

Four screens built with it

  • Settings

    Notification preferences: switches, a digest picker, quiet hours on two steppers.

  • Room

    A home panel: a thermostat stepper, light sliders and scenes that move them.

  • Booking

    A stay request: a range calendar, guest steppers, extras and a form that says what it sends.

  • Report

    A weekly usage report: stats with spark bars, a bar list, a distribution bar and a composer.

Every component, with its source

Browse the components