🎭 Theming

Customize appearance with CSS custom properties. Dark mode, neon, corporate, and more

📏 Input Sizes

Pick a preset with input-size="xs | sm | md | lg | xl", all scaled off --ms-rem: 10px

Control input field dimensions with the input-size attribute. Five sizes available: xs, sm, md (default), lg, xl.

Size	Height	Font	Calc Formula
`xs`	31px	12px	`calc(3.1 * var(--ms-rem))`
`sm`	33px	13px	`calc(3.3 * var(--ms-rem))`
`md` (default)	35px	14px	`calc(3.5 * var(--ms-rem))`
`lg`	38px	16px	`calc(3.8 * var(--ms-rem))`
`xl`	41px	18px	`calc(4.1 * var(--ms-rem))`

Note: Heights use Pure Admin standard. Base unit --ms-rem: 10px (default). Set --ms-rem: 1rem for Pure Admin integration.

Extra Small (xs)

Small (sm)

Medium (md) - Default

Large (lg)

Extra Large (xl)

Whole themes from CSS vars on the element: --base-accent-color · --base-input-bg · --ms-input-border-radius

High contrast dark theme for low-light environments

Select Technologies

Dark backgrounds with light text and purple accents

Bright neon colors with glowing effects

Select Technologies

Cyan and magenta with glowing shadows

Clean, minimal corporate styling with subtle borders

Select Technologies

Professional gray with Audi red accents

Large border-radius with soft shadows and pastel colors

Select Technologies

Warm gradient background with pink accents

No border-radius, flat design, pure black and white

Select Technologies

Brutalist design with sharp edges

Elevation shadows, vibrant colors, standard radius

Select Technologies

Google Material Design principles

Frosted glass effect with backdrop blur and transparency

Select Technologies

Translucent with blur effect (requires modern browser)

🔌 Server round-trip

The LiveView server saw 0 event(s) from the wrapper.

(pick an option anywhere on this page)