Components
Live daisyUI component recipes in their real states — the same Spotify-theme primitives the app is built from. Each renders live next to its markup; click copy to grab it.
Buttons — variants
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-outline">Outline</button>Buttons — sizes & states
<button class="btn btn-primary btn-xs">XS</button>
<button class="btn btn-primary btn-sm">SM</button>
<button class="btn btn-primary">MD</button>
<button class="btn btn-primary btn-disabled">Disabled</button>Badges
primary
success
warning
error
<span class="badge badge-primary">primary</span>
<span class="badge badge-soft badge-success">success</span>
<span class="badge badge-soft badge-warning">warning</span>
<span class="badge badge-soft badge-error">error</span>Alerts
Info — a neutral notice.
Success — it worked.
Warning — check this.
<div class="alert alert-info">Info — a neutral notice.</div>
<div class="alert alert-success">Success — it worked.</div>
<div class="alert alert-warning">Warning — check this.</div>Form controls
<input class="input input-bordered input-sm" placeholder="Text input" />
<label class="flex items-center gap-2 text-fg">
<input type="checkbox" class="toggle toggle-primary" checked /> Toggle
</label>
<label class="flex items-center gap-2 text-fg">
<input type="checkbox" class="checkbox checkbox-primary" checked /> Checkbox
</label>