Skip to content
Try free

SystemUI

Mobile OS chrome drawn in the page: keyboard keys, number pad keys, the keyboard suggestion bar and system alert buttons. The status bar has no component: the OS draws it.

  • Pro, mobile
  • Version 2.0.0-rc.1
  • APG pattern: Button (each key and suggestion); the suggestion bar is a named group

Examples

Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.

Default

Suggestions

Show the code

Suggestions, code

<div className="flex flex-col gap-4">
  <SuggestionBar kind="words" suggestions={['Hello', 'Hi', 'Hey']} />
  <SuggestionBar kind="passwords" />
  <SuggestionBar kind="one-time-code" code="123 456" />
</div>

Number pad

Show the code

Number pad, code

<div role="group" aria-label="Number pad" className="grid grid-cols-3 gap-1.5 bg-keyboard-surface p-1.5">
  {[['1', ''], ['2', 'ABC'], ['3', 'DEF'], ['4', 'GHI'], ['5', 'JKL'], ['6', 'MNO'], ['7', 'PQRS'], ['8', 'TUV'], ['9', 'WXYZ']].map(([d, l]) => <PadKey key={d} digit={d ?? ''} letters={l || undefined} />)}
  <span />
  <PadKey digit="0" letters="+" />
</div>

Alert

Allow "Ledger" to use your location?

Used to show branches near you.

Show the code

Alert, code

<div role="alertdialog" aria-labelledby="sysalert-title" className="overflow-hidden rounded-surface border border-line-subtle bg-surface text-center">
  <p id="sysalert-title" className="px-[var(--sd-spacing-inset-md)] pt-[var(--sd-spacing-inset-md)] text-heading-sm text-fg">Allow "Ledger" to use your location?</p>
  <p className="px-[var(--sd-spacing-inset-md)] pb-[var(--sd-spacing-inset-md)] text-body-sm text-fg-secondary">Used to show branches near you.</p>
  <AlertButton>Allow once</AlertButton>
  <AlertButton>Allow while using the app</AlertButton>
  <AlertButton tone="cancel">Don't allow</AlertButton>
  <AlertButton tone="destructive">Delete</AlertButton>
</div>

Tokens

The 26 design tokens SystemUI reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.

Show all 26 tokens
Tokens SystemUI reads
TokenValue nowCSS variable
color.action.primary…--sd-color-action-primary
color.action.primary-pressed…--sd-color-action-primary-pressed
color.bg.muted…--sd-color-bg-muted
color.bg.subtle…--sd-color-bg-subtle
color.border.control…--sd-color-border-control
color.border.subtle…--sd-color-border-subtle
color.text.brand…--sd-color-text-brand
color.text.danger…--sd-color-text-danger
color.text.disabled…--sd-color-text-disabled
color.text.on-primary…--sd-color-text-on-primary
elevation.1…--sd-elevation-1
font.line-height.tight…--sd-font-line-height-tight
font.tracking.wide…--sd-font-tracking-wide
keyboard.fg…--sd-keyboard-fg
keyboard.key…--sd-keyboard-key
keyboard.key-function…--sd-keyboard-key-function
keyboard.key-pressed…--sd-keyboard-key-pressed
keyboard.surface…--sd-keyboard-surface
motion.duration.fast…--sd-motion-duration-fast
motion.easing.standard…--sd-motion-easing-standard
radius.md…--sd-radius-md
radius.sm…--sd-radius-sm
spacing.gap.sm…--sd-spacing-gap-sm
spacing.inset.md…--sd-spacing-inset-md
spacing.inset.sm…--sd-spacing-inset-sm
target.min…--sd-target-min

Install

Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.

Add it from the registry (Pro licence key)

npx shadcn@latest add @superduperui/system-ui

Then import it

import { KeyboardKey, PadKey, SuggestionBar, AlertButton } from "@/components/ui/system-ui"

Props

SystemUI props
PropTypeWhat it does
kind'letter' | 'wide' | 'function' | 'primary'Default 'letter'letter (default), wide (the space bar, fills the row), function (shift, delete, 123) or primary (return, in the action colour).
childrenrequiredReactNodeThe key's label ("q", "space", "return") or a glyph. A glyph-only key needs `aria-label`.

When to use it

Use it for

  • An on-screen keyboard or keypad the page draws itself (a word game, a PIN pad, a kiosk)
  • Mock-ups and clones of mobile screens that show the OS keyboard or a system alert
  • Showing why a field sets autocomplete (the suggestion bar fills passwords and one-time codes)

Use something else for

  • Typing into a real text field: the OS keyboard does it
  • Confirmations in product UI: use AlertDialog
  • The status bar: the OS draws it (set theme-color, viewport-fit=cover and pad with env(safe-area-inset-top))

Accessibility

Screen readers announce "q, button"; "Shift, button"; "Keyboard suggestions, group" then "Passwords, button".

WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13.

OS-sized keyboard keys meet 2.5.8 (AA) at any density; pad keys, suggestions and alert buttons are 44px (AAA) in Comfortable.

What your product still has to do

  • Give glyph-only keys (shift, delete) an aria-label
  • Space full ten-key rows so each key keeps a 24px target (2.5.8): OS-sized keys are 42px tall and narrower than 44px

This release’s test results

Test results for SystemUI in this release
axe-core (WCAG A, AA, AAA and best practice)100 runs across every story, theme, density and width: 0 violations
Rendered text contrast1,115 text runs: 0 below 7:1, lowest 7.81:1
Target size426 targets: 0 under 44px in Comfortable
Focus appearance (2.4.13)288 focus stops in 3 browser engines: all pass
Keyboard scriptChromium 3 of 3, Firefox 3 of 3, WebKit 3 of 3

Manual passes with VoiceOver and NVDA haven’t been done yet.

Keyboard

Each step is scripted and run in Chromium, Firefox and WebKit.

SystemUI keyboard steps
KeyWhat happens
TabTab reaches the first suggestion
TabTab moves through the suggestions to the first key
TabEach key of the two letter rows is a button; glyph keys are named by aria-label

In Figma

The Figma component is SuggestionBar, with Kind (Words, Passwords, One-time code). The Figma library isn’t published yet.

Figma to code: Kind → kind (Words = "words", Passwords = "passwords", One-time code = "one-time-code").