Deri UI — page-by-page component docs

DUButton

Primary action control with solid, outline, ghost, link, and gradient styles.

DUButtonGroup

Groups related buttons with attached or spaced layouts.

DUIconButton

Accessible icon-only button with required aria label.

DUBadge

Status and label chips with solid, soft, and outline appearances.

DUAvatar

User image or initials with optional online status.

DUAvatarGroup

Stacked avatars with ring separators, z-order, size-matched overflow, and spacing.

DUProgress

Linear progress bar with tone colors.

DUCounter

Animated number counter for stats.

DUTag

Removable or static tag chips.

DUFab

Floating action button anchored to the viewport.

DUJumbotron

Prominent content block with tone variants.

DUInput

Labeled text field with hint and error states.

DUTextarea

Multi-line text input with label/error helpers.

DUSelect

Native select with Deri field chrome.

DUCheckbox

Accessible checkbox with optional label.

DURadio

Radio option for single-choice groups.

DUSwitch

Toggle switch for boolean settings.

DUPassword

Password field with show/hide toggle.

DUOTP

One-time passcode / PIN digit inputs.

DUCombobox

Filterable single-select combobox.

DUDateInput

Native date picker styled for Deri forms.

DURangeSlider

Dual-thumb numeric range control.

DUColorPicker

Color input with swatch shortcuts.

DUSearch

Search field with icon and Enter-to-search.

DUInputGroup

Prepend/append addons around an input.

DUTouchSpin

Numeric stepper with +/- controls.

DURating

Interactive star rating.

DUSlider

Single-value range slider.

DUFileUpload

Drag-and-drop style file picker.

DUDrawer

Side/top/bottom sheet with slide, fade, or scale transitions, variants, and responsive mobile sheet.

DUAppShell

Dashboard frame with header, sidebar, and main content.

DUContainer

Centered max-width page container.

DUStack

Flex stack for consistent spacing.

DUGrid

Responsive CSS grid helper.

DUPanel

Section panel with variants, tone accents, enter transitions, and optional collapse.

DUPagination

Page navigation with siblings and ellipsis.

DUDropdown

Menu of actions with dividers and danger items.

DUTabs

Simple, pill, and underline tab layouts.

DUNavbar

Sticky top navigation with brand, links, and actions.

DUCommandPalette

⌘K style command / search menu.

DUTreeView

Expandable hierarchical tree.

DUBreadcrumbs

Hierarchical page trail.

DUStepper

Horizontal or vertical step indicator.

DUAccordion

Expandable sections (basic, compact, icons, minimal, faq).

DUCard

Composable card with image, profile, quote, rating, progress, article variants.

DUTimeline

Vertical event timeline.

DUWizard

Multi-step flow with back/continue.

DULightbox

Fullscreen image viewer.

DUCarousel

Image carousel with hero, gallery, cards, peek, cover, and minimal styles — no Swiper dependency.

DUTable

Simple responsive data table.

DUKanban

Board columns for task workflows.

DUKpiCard

KPI metric with trend delta.

DUCircularProgress

Circular progress ring.

DUCodeBlock

Dark code snippet panel.

DUAlert

Inline feedback with soft, solid, outline, and left-accent styles.

DUSpinner

Loading spinner with optional label.

DUTooltip

Hover/focus tooltip with placement options.

DUPopover

Click-triggered content panel.

DUModal

Accessible dialog with size and header tones.

DUConfirm

Confirmation dialog for destructive or important actions.

DUToastViewport + duToast

Global toast notifications. Mount viewport once, call duToast().

DUBanner

Full-width announcement bar.

DUStatCard

Metric tile with tone gradients; optional interactive increment.

DUEmptyState

No-data placeholder with optional action.

DUSkeleton

Loading placeholder lines/avatar.

DUPromoBanner

Gradient promo CTA strip.

DUAiChat

Full AI chat panel with bubbles, typing, and prompt input.

DUPromptInput

Multi-line AI prompt composer with send action.

DULoginForm

Ready-made email/password sign-in form.

DUProductCard

Commerce product tile with price and add action.

DUJobCard

Job listing card for hiring platforms.

DUPricingTable

Multi-tier pricing cards.

DUMessageBubble

Chat bubble for inbound/outbound messages.

DUHero

Marketing hero with CTAs and gradient backdrop.

DUFeatureGrid

Feature cards grid for marketing pages.

DUCta

Call-to-action band.

DUNewsletter

Email capture form.

DUClipboard

Copy-to-clipboard control for tokens and snippets.

DUThemeToggle

Cycles light / dark / system theme modes.

DUErrorState

Error empty state with optional recovery action.

DUNotFound

404 page block.

DUCookieBanner

Cookie consent strip with accept/decline.

DUChart

Lightweight Tailwind/SVG charts (bar, line, donut) without ApexCharts.