Components Gallery

Width and padding container wrapper.

Page title, description, and action header.

Section block with consistent heading spacing.

Card surface with optional header metadata.

Flex-based vertical/horizontal stack layout.

Responsive grid layout for repeated content.

Main/aside split layout primitive.

Layout usage demo with cards, grid, and split panels.

Semantic heading node helpers (H1-H4 and props variants).

Paragraph node helper for readable body text blocks.

Inline span node helper and props variant for text fragments.

Primary/secondary action button variants

Internal, external, and download links with shared styling.

Marionette built-in theme toggle action button.

Dropdown alias exposed from frontend package.

Menu alias exposed from frontend package.

Collapse alias exposed from frontend package.

Form element wrapper for method/action and child controls.

Labeled field wrapper with hint and error text

Single-line text and value input control

File selection input helper for upload forms

Multiline text input control

Dropdown control for choosing one option

Boolean checkbox input with label

Exclusive multi-option radio selection group

Toggle-style boolean switch control

Toggle alias exposed from frontend package.

Range alias exposed from frontend package.

Rating alias exposed from frontend package.

Application sidebar navigation with active links and optional note.

Hierarchical path navigation trail

Tabbed navigation for switching related views

Previous/next pager with current page state

Navigation component stories for tabs, breadcrumbs, and pagination.

Top navigation bar alias exposed from frontend package.

Steps alias exposed from frontend package.

Step alias exposed from frontend package.

Join alias exposed from frontend package.

Inline alert message component

Transient toast notification component

Determinate and indeterminate progress indicator.

Loading placeholder skeleton blocks

No-data and loading empty-state presentation

Overlay dialog for confirmations and detail tasks

Modal/drawer/popover/tooltip overlay demo

Toast/alert/empty/skeleton feedback demo

Tooltip alias exposed from frontend package.

Loading alias exposed from frontend package.

Indicator alias exposed from frontend package.

RadialProgress alias exposed from frontend package.

Column/row data table with sort affordances.

Responsive image display with alt text and optional caption.

Render a gota DataFrame as a table component.

Build chart datasets from a DataFrame for ComponentChart.

Avatar alias exposed from frontend package.

Carousel alias exposed from frontend package.

CarouselItem alias exposed from frontend package.

Mask alias exposed from frontend package.

Stat alias exposed from frontend package.

Render Markdown content as sanitized HTML output.

Code alias exposed from frontend package.

Kbd alias exposed from frontend package.

Font icon helper for Material Icons or UIcons/Flaticon classes.

Hero section alias exposed from frontend package.

Timeline and TimelineItem aliases exposed from frontend package.

Drawer alias exposed from frontend package.

Footer alias exposed from frontend package.

ChatBubble alias exposed from frontend package.

MockupWindow alias exposed from frontend package.

Responsive DashWind admin shell with drawer navigation, topbar search, actions, and user menu.

Dashboard page title row with description text and optional action area.

Admin card surface that wraps DaisyUI cards with DashWind spacing, shadow, and actions.

Two-column authentication preset with labeled fields, submit button, and footer content.

Card-backed settings form section with help text, validation states, and submit actions.

Responsive KPI metric grid with values, descriptions, trend tones, icons, and links.

Typed resource table with sortable headers, cell classes, zebra rows, and empty content support.

High-level list page preset combining page header, primary action, filters, table, empty state, and row actions.

Chart.js-backed data visualization wrapper.

Line chart for visualizing trends over time or continuous values.

Bar chart for comparing values across categories.

Pie chart for showing part-to-whole proportions.

Doughnut chart with center space for summary metrics.

Scatter chart for visualizing correlation and distribution on two axes.

ThemeController and ThemeControllerOption aliases exposed from frontend package.

Horizontal action group container with alignment, gap, and wrapping controls.

Visual separator with configurable spacing.

Generic surface container with tone, border, and padding options.

Application shell with sidebar, flashes, header, and content regions.

ID-addressable content region designed for partial updates.

Compact label component with variant and size options.

Semantic text helper with size, weight, and tone options.

Loading helper with type and size variants.

Table helper with zebra, pin rows/cols, and size variants.

Tooltip helper with placement, color, and forced-open variants.