Staffbase Design Systemv21.2.0

Guides

  • Setup
  • MCP Server
  • Contribution
  • Deprecated Components
  • Customisability Attributes

Foundation

  • Design Tokens
  • Iconography
  • Illustrations

Hooks

  • useFormatDateTime
  • useFormatRelativeTime

Patterns

  • Notification Messaging
  • Avoid Disabling Elements
  • Loading

Components

  • Alert Dialog
  • Avatar
  • Badge
  • Banner
  • Bottom Sheet
  • Button
  • Card
  • Checkbox
  • Dialog
  • Empty
  • Field
  • File Upload
  • Filter
  • Loading Spinner
  • Menu
  • Number Stepper
  • Pill
  • Popover
  • Radio
  • Search Input
  • Searchable Multi Select
  • Searchable Single Select
  • Segmented Control
  • Select
  • Separator
  • Skeleton
  • Style Chip
  • Switch
  • Tabs
  • Text Area
  • Text Field
  • Toggle
  • Toggle Group
  • Tooltip
Staffbase Design System

Staffbase's design system

Components

Accessible React components

Tokens

Colour, spacing, typography, shadows & more

Iconography

React icon components

Illustrations

SVG illustrations for empty states

Patterns

Reusable interaction patterns

Hooks

Utility hooks for formatting & more

Guides

Setup, contribution & migration

MCP Server

AI-ready tools for editors & agents

Report a bug

Open a GitHub issue for bugs or feature requests

Contribute

Browse the source and open a pull request