Components

37 CLI ejection groups, documented as locally owned React source.

Each page matches one accepted toucan eject name. Compound exports such as GridItem, Radio, table parts, and dialog helpers stay with the group that installs them.

API tables are generated from the shipped TypeScript source, while usage and accessibility guidance is maintained alongside each group.

Layout

  • Flex — Single-axis layout with responsive direction, alignment, and child sizing.
  • Grid — Responsive two-dimensional layout with explicit and automatic tracks.
  • Padding — A small spacing wrapper using the Toucan scale.
  • Page — Full-viewport application surface and text-colour wrapper.
  • Section — Semantic full-width page band with background and spacing.
  • Wrapper — Centered max-width container with responsive edge padding.

Form controls

  • Button — Primary action control that can render as a button or link.
  • Checkbox — Boolean form control with label, description, and error states.
  • Input — Single-line text field with integrated label and validation messaging.
  • Radio — Managed radio group and item controls for one-of-many selection.
  • Select — Custom listbox control with labels, validation, and keyboard support.
  • Slider — Horizontal or vertical numeric range control.
  • Textarea — Multi-line text field with label and validation messaging.
  • Toggle — Immediate on/off switch with controlled and uncontrolled state.

Data display

  • Avatar — Person or entity image with initials fallback.
  • Badge — Compact semantic label for status or classification.
  • Box — Token-styled surface with padding, radius, elevation, and overflow.
  • Heading — Semantic headings with an independent display scale.
  • Rating — Read-only star representation of a numeric score.
  • Separator — Horizontal or vertical visual division between content groups.
  • Table — Semantic table building blocks for structured row-and-column data.
  • Text — Body text with semantic element, size, weight, and tone controls.

Feedback

  • Alert — Inline semantic feedback surface with status variants.
  • Progress — Determinate or indeterminate progress indicator.
  • Skeleton — Placeholder shapes for content that is actively loading.
  • Toast — Provider, notification surface, and hook for transient messages.

Overlays

  • Dialog — Modal surface with focus management and dismissal behavior.
  • Drawer — Modal panel anchored to a viewport edge.
  • Dropdown menu — Compound action menu with keyboard navigation and polymorphic items.
  • Popover — Compound non-modal floating content anchored to a trigger.
  • Tooltip — Short contextual label shown on hover or keyboard focus.

Navigation

  • Accordion — Compound disclosure group supporting single or multiple open panels.
  • Breadcrumb — Hierarchical navigation trail with current-page state.
  • Link — Styled anchor for inline and standalone navigation.
  • Pagination — Controlled page navigation with compact range and ellipsis logic.
  • Tabs — Compound tab list and panels for switching related views in place.

Utility

  • Icon — Consistent wrapper for decorative and meaningful SVG icons.