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.

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.

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.

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.

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.

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.

Icon — Wrapper for SVG icons with standardized sizing and accessibility attributes.
VisuallyHidden — Hides content visually while keeping it accessible to screen readers.