Toucan

Layout

Flex

Single-axis flex layout. Column by default (mobile-first), with optional row direction at a breakpoint, wrap, alignment, and justification.

FlexItem

Child of Flex that controls grow and shrink behavior.

Grid

Responsive grid layout with fixed or auto-fit columns, gap control, and container queries.

GridItem

Child of Grid that can span multiple columns.

Page

Full-viewport wrapper with themed background and text colour. The outermost layout container for an application.

Section

Full-width page band with optional background, vertical padding, and gap. Compose with Wrapper for centered content.

Wrapper

Centered max-width container with horizontal padding. Controls content width and provides edge breathing room on small viewports.

Form Controls

Button

Triggers actions. Supports primary, secondary, ghost, and danger variants with three sizes.

Checkbox

Checkbox with label, description, error state, and indeterminate support.

Input

Text input with built-in label, description, error state, and ARIA wiring.

RadioGroup

Radio button group with managed selection, label, and keyboard navigation.

Select

Custom select dropdown with keyboard navigation, label, and error support.

Slider

Range slider with keyboard, pointer drag, and full ARIA support. Horizontal or vertical orientation.

Textarea

Multi-line text input with label, description, error state, and resize control.

Toggle

On/off switch with label, description, and two sizes.

Data Display

Avatar

User or entity avatar with image, initials fallback, and size variants.

Badge

Inline label for status, category, or count. Five variants, three sizes.

Box

Presentational container with elevation, radius, and padding. For backgrounds, borders, and visual grouping.

Heading

Heading levels 1–6 with optional display sizes for visual hierarchy.

Rating

Read-only star rating display. Renders filled, half-filled, and empty stars with token-driven colors and three sizes.

Separator

Horizontal or vertical line to divide content sections.

Table

Compound table component with caption, sortable headers, striped rows, and dense mode.

Text

Body text primitive. Renders paragraphs, spans, labels, and other inline text.

Feedback

Alert

Thin accessibility wrapper with role="alert", variant colours, and custom colour support. Layout is composed freely via children.

Progress

Determinate or indeterminate progress bar with label and three sizes.

Skeleton

Loading placeholder in text, heading, circular, or rectangular shapes.

Toast

Notification toast system with stacking, auto-dismiss, pause on hover, and variant-based roles.

Overlay

Dialog

Modal dialog with backdrop, focus trapping, and escape-to-close.

Drawer

Slide-out panel from any edge. Focus trap, scroll lock, and backdrop. Uses the dialog machine internally.

DropdownMenu

Action menu with items, labels, separators, and keyboard navigation. Compound component.

Popover

Floating content panel triggered by a button. Compound component with Trigger and Content.

Tooltip

Floating label that appears on hover or focus. Multiple anchor options.

Navigation

Accordion

Collapsible content sections. Single or multiple mode. Compound component with Item, Trigger, and Panel.

Breadcrumb

Navigation breadcrumb trail with customizable separator.

Link

Anchor element with inline and standalone variants, size options, and external link support.

Pagination

Page navigation with prev/next, page buttons, and ellipsis. Purely controlled.

Tabs

Tabbed interface with keyboard navigation. Compound component with TabList, Tab, and TabPanel.