Components

Vertically stacked expandable disclosure panels with keyboard navigation and smooth height expansion.

Contextual notification banners with status semantic colors and Shade-DS red dot close button.

A circular picture or initials for a person or team, with an optional status dot.

Compact status pill indicators with semantic color variants and status dots.

Interactive tactile button with Shade-DS cursor-origin circular hover spotlight and loading states.

A raised container for related content, with optional clickable behavior.

Accessible custom checkbox with indeterminate state and tactile focus ring.

Modal dialog overlay with backdrop blur, focus trap, Escape key handling, and macOS close dot.

Sliding sheet from screen edges with focus trap and swipe/keyboard dismiss.

Action menu with items, dividers, and keyboard navigation.

Accessible text field with Shade-DS 44px control height, clear action button, and double 1px glass glow.

An underlined native anchor for moving to another page or place.

Rich content popover positioned relative to anchor triggers.

Determinate and indeterminate progress indicator bars.

Accessible radio button group with keyboard arrow navigation.

Custom dropdown select menu with keyboard search and accessible listbox semantics.

Placeholder loading pulses for asynchronous content states.

Numeric range slider with custom styled track and thumb.

Toggle switch with smooth spring transition and accessible switch role.

Accessible data table with sticky headers, sortable columns, and multi-row selection.

Accessible tabbed navigation interface with roving tabindex and smooth indicator transitions.

Multi-line text input with character counter and auto-expanding height.

Ephemeral notification toasts with queue management and auto-dismiss.

Contextual micro-popover appearing on pointer hover or keyboard focus.