Skip to content

Design system — moved

The reference is now organized by what you want to build. These links preserve earlier bookmarks. Start with the field guide.

Design system

Basecoat

daisyUI

MaterialX

Compare the libraries

Basecoat · a small working form

< div class = "fltheme-components" >

< button class = "btn" data-variant = "outline" > Save example </ button >

</ div >

daisyUI · a prefixed disclosure

< div class = "fltheme-components" >

< details class = "du-collapse du-collapse-arrow" >

< summary class = "du-collapse-title" > Export settings </ summary >

< div class = "du-collapse-content" > Your controls go here. </ div >

</ details >

</ div >

MaterialX · authored content

!!! note "A note belongs in the document"

Keep the explanation close to the step it supports.

Choose by task

Complete catalogues and coverage

Legacy daisyUI Markdown recipes

Link button

Read the component inventory ( style-guide.md ){ .btn }

Semantic link

Read the action guidance ( actions.md ){ .link .link-primary }

Inline badge

The next build is Ready for review { .badge .badge-info }.

Paragraph alert

The exported package is ready to inspect.

{ .alert .alert-info }

Keyboard key

Press K { .kbd } to focus search.

Masked image

! Overlapping blue, coral, and dark geometric shapes ( ../assets/images/design-mask-sample.svg ){ .mask .mask-squircle }

Tooltip link

Open the authoring guidance ( content-authoring.md ){ .tooltip data-tip="Help" }

Status indicator

​ { .status .status-success aria-hidden="true" } Service is available.

Full inventory