The theme applies consistent shadcn-inspired styles to some standard HTML elements. No extra configuration is needed — just use the elements as you normally would in Markdown, and the theme will style them automatically.
Wrapping form elements inside a <fieldset> unlocks a richer layout: you can add a <label>, a hint with <small>, and a live value display with <output>.
Buttons
The theme styles button, a.button, and input[type="button"] identically, so you can use whichever element is most semantically appropriate.
<button>Button</button>
<a class="button" href="#">Link</a>
<input type="button" role="submit" value="Form action" />
The variant is set via the class attribute. The default style is applied when no class is specified.
<button>Default</button>
<button class="secondary">Secondary</button>
<button class="outline">Outline</button>
<button class="ghost">Ghost</button>
<button class="link">Link</button>
<button class="destructive">Destructive</button>
Four sizes are available: xs, sm, default (no class), and lg. Sizes can be combined with any variant.
<button class="outline xs">Extra Small</button>
<button class="outline sm">Small</button>
<button class="outline">Default</button>
<button class="outline lg">Large</button>
The icon class forces a square aspect ratio, useful for icon-only buttons (the icon syntax +pack:icon-name+ is provided by the Iconify extension).
<button class="icon xs">+heroicons:bolt-solid+</button>
<button class="outline icon sm">+heroicons:bolt-solid+</button>
<button class="ghost icon">+heroicons:bolt-solid+</button>
<button class="destructive icon lg">+heroicons:bolt-solid+</button>
Slider
A standard <input type="range"> is rendered as a styled slider.
<input type="range" min="0" max="10" step="0.1" />
Wrapping it in a <fieldset> adds a label, a hint text, and a live <output> element that displays the current value (here the oninput handler keeps the output in sync as the user drags the slider).
<fieldset>
<label for="slider">Slider</label>
<output for="slider">5</output>
<input id="slider" type="range" min="0" max="10" value="5" step="0.1" oninput="document.querySelector(`output[for='${event.target.id}']`).textContent = event.target.value;"/>
<small>Choose it carefully</small>
</fieldset>
Checkbox
A plain <input type="checkbox"> is styled automatically.
<input type="checkbox" />
Use a <fieldset> to pair it with a label.
<fieldset>
<input type="checkbox" />
<label>Checkbox</label>
</fieldset>
It can be embedded into a table for instance.
| Feature | Status |
| -------- | ----------------------------------------- |
| Slider | <input type="checkbox" checked disabled/> |
| Checkbox | <input type="checkbox" checked disabled/> |
| Radio | <input type="checkbox" disabled/> |
| Feature | Status |
|---|---|
| Slider | |
| Checkbox | |
| Radio |
Switch
A switch is a checkbox with the switch class applied — it renders as a toggle instead of a box.
<input type="checkbox" class="switch" />
Pair it with a <label> inside a <fieldset> for a labelled toggle.
<fieldset>
<input type="checkbox" class="switch" />
<label>Switch</label>
</fieldset>
Select
A <select> element is styled to match the rest of the theme.
<select>
<option>Gauss</option>
<option>Weierstrass</option>
</select>
Wrap it in a <fieldset> to add a label and a hint with <small>.
<fieldset>
<label>Mathematicians</label>
<select>
<option>Gauss</option>
<option>Weierstrass</option>
</select>
<small>Choose your favorite</small>
</fieldset>