docs/components/navigation/ModeSwitcher

ModeSwitcher

App mode/workspace switcher.

import { ModeSwitcher } from '@ybouhjira/hyperkit';

Static examples

This component depends on app-level context (providers, services, or interactive setup) that does not fit the inline playground yet, so its examples are shown as static code.

#Props

PropTypeDefaultDescription
classstring

#Design Tokens

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.

  • --sk-accent
  • --sk-bg-active
  • --sk-bg-elevated
  • --sk-bg-hover
  • --sk-bg-secondary
  • --sk-border
  • --sk-duration-fast
  • --sk-duration-normal
  • --sk-ease-default
  • --sk-focus-color
  • --sk-font-mono
  • --sk-font-size-sm
  • --sk-font-size-xs
  • --sk-font-ui
  • --sk-height-sm
  • --sk-icon-lg
  • --sk-icon-sm
  • --sk-leading-tight
  • --sk-radius-lg
  • --sk-radius-md
  • --sk-radius-sm
  • --sk-shadow-lg
  • --sk-shadow-sm
  • --sk-shadow-xl
  • --sk-space-lg
  • --sk-space-md
  • --sk-space-px
  • --sk-space-sm
  • --sk-space-xs
  • --sk-state-hover-bg
  • --sk-text-on-accent
  • --sk-text-primary
  • --sk-text-secondary
  • --sk-text-tertiary
  • --sk-z-dropdown
  • --sk-z-overlay