UI Kit

Single source of truth for our DaisyUI v5 setup and Fusion UI wrappers.

Theme Tokens

Brand Colors

--color-primary
--color-secondary
--color-accent
--color-info
--color-success
--color-warning
--color-error
--color-base-100
--color-base-200
--color-base-content

Radii, Border, Measure

--radius-box
--radius-selector
--border

Buttons

Neutral Accent Ghost Link
Large Normal Small Tiny

Badges

ghost

Alerts

Cards

Sample

Sample Card

Meta line

Card body content with text, links, and actions.

Action

Simple Card

Card without media.

Stats

Total Likes
25.6K
21% more than last month
Page Views
2.6M
12% more than last month
Tasks done
86%
31 tasks remaining

Tooltip & Indicator

Tooltips

Forced Right Left

Indicators

99+
content
new
content
99+
content

Forms

Submit

Progress & Loading

Progress

70%
45%
90%

Loading

Pagination, Steps, Tabs

Pagination

Steps

  • Start
  • Process
  • Confirm

Tabs

Tab 1 Tab 2 Tab 3

Layout

Divider

Hero

Simple hero using system UI and brand tokens.

Get Started

Tables

Token Value
font-family system-ui stack
--measure 76ch
Tap target 44px min-height on buttons

Notes

Prefix: All DaisyUI classes use the dui- prefix.

Layout: Pages use page-gutter and container-measure for consistent alignment.

Performance: Images include width/height and lazy attributes to avoid CLS.