Usage - DengaUI

Component Classes

Every DengaUI component uses semantic CSS classes prefixed with dui-. The base class defines the component, and modifier classes control its appearance:

<button class="dui-btn">Default Button</button>  <button class="dui-btn dui-btn-primary">Primary Button</button>  <button class="dui-btn dui-btn-primary dui-btn-lg">Large Primary</button>  <button class="dui-btn dui-btn-outline dui-btn-primary">Outlined</button>

Naming Convention

DengaUI follows a predictable pattern for all class names:

dui-{component} /* base */ dui-{component}-{variant} /* color or style variant */ dui-{component}-{size} /* size modifier */

Examples across different components:

Class	What it does
`dui-btn`	Base button component
`dui-btn-primary`	Primary color variant
`dui-btn-lg`	Large size modifier
`dui-card`	Base card component
`dui-card-bordered`	Bordered card style
`dui-badge-success`	Success color badge
`dui-alert-warning`	Warning color alert

Size Scale

Components that support sizing use a consistent five-step scale. The default size is md and does not require a size class:

<button class="dui-btn dui-btn-xs">Extra Small</button> <button class="dui-btn dui-btn-sm">Small</button> <button class="dui-btn">Medium (default)</button> <button class="dui-btn dui-btn-lg">Large</button> <button class="dui-btn dui-btn-xl">Extra Large</button>

Size	Class suffix	Note
Extra Small	`-xs`	Compact, inline contexts
Small	`-sm`	Dense UIs, toolbars
Medium	(none)	Default, no class needed
Large	`-lg`	Prominent actions, hero sections
Extra Large	`-xl`	Landing pages, hero CTAs

Color Variants

DengaUI provides eight semantic colors that adapt to the active theme. Apply them with the corresponding modifier class:

<button class="dui-btn dui-btn-primary">Primary</button> <button class="dui-btn dui-btn-secondary">Secondary</button> <button class="dui-btn dui-btn-accent">Accent</button> <button class="dui-btn dui-btn-neutral">Neutral</button> <button class="dui-btn dui-btn-info">Info</button> <button class="dui-btn dui-btn-success">Success</button> <button class="dui-btn dui-btn-warning">Warning</button> <button class="dui-btn dui-btn-error">Error</button>

These same color names work across all components that support color variants:

<span class="dui-badge dui-badge-success">Active</span> <div class="dui-alert dui-alert-error">Something went wrong.</div> <progress class="dui-progress dui-progress-info" value="60" max="100"></progress>

Active Failed Pending New

Something went wrong.

Tailwind Utility Overrides

DengaUI classes set sensible defaults, but you can always override or extend them with standard Tailwind utilities. Tailwind classes are applied alongside DengaUI classes:

<button class="dui-btn dui-btn-primary w-full mt-4">Submit</button>  <div class="dui-card dui-card-bordered max-w-sm shadow-xl"> <div class="dui-card-body"> <h3 class="dui-card-title">Custom Card</h3> <p class="text-sm opacity-70">Tailwind utilities work seamlessly.</p> </div> </div>  <span class="dui-badge dui-badge-accent font-mono uppercase tracking-wider">v2.0</span>

Custom Card

Tailwind utilities work seamlessly.

v2.0

Since DengaUI is a Tailwind plugin, there are no specificity conflicts. Tailwind utilities will override component defaults when needed.