Product block

Keyboard Shortcuts Sheet

The "?" overlay, with chords written once in one notation and rendered per platform — mod becomes Command on Apple and Ctrl everywhere else, decided after mount so the markup never mismatches.

252 lineslucide-reactAdded 24 Aug 2026Updated 11 Sept 2026

shortcuts
keyboard
hotkeys
help
accessibility

What's included

components/keyboard-shortcuts-sheet.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add keyboard-shortcuts-sheet

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/keyboard-shortcuts-sheet.tsx

'use client'

/**
 * <KeyboardShortcutsSheet> — the "?" overlay every keyboard-driven app owes
 * its users.
 *
 * A command palette teaches discovery; this teaches speed. Products ship
 * the first and skip the second, and the result is a set of shortcuts only
 * the team that built them knows about.
 *
 * The part worth copying is the key rendering, not the layout. Shortcuts
 * are written once, in one notation ("mod+k"), and rendered per platform:
 * `mod` is ⌘ on Apple and Ctrl everywhere else, and every product that
 * hardcodes one of the two is wrong for half its users. `alt` is ⌥ on a Mac
 * and Alt elsewhere for the same reason.
 *
 * Platform is detected after mount, never during render. Reading
 * `navigator` while rendering gives the server one string and the client
 * another, and React resolves that by discarding the server markup — for a
 * component whose whole job is to render fifteen key glyphs. The
 * non-Apple form renders first and corrects itself, because that is the
 * majority and the correction is invisible.
 */

import * as React from 'react'
import { X, Search } from 'lucide-react'

export interface Shortcut {
  /** Chord in canonical notation: "mod+k", "shift+alt+d", "g then i". */
  keys: string
  label: string
}

export interface ShortcutGroup {
  title: string
  shortcuts: Shortcut[]
}

export interface KeyboardShortcutsSheetProps {
  groups?: ShortcutGroup[]
  /** Controlled open state. Omit to let the sheet own it. */
  open?: boolean
  onOpenChange?: (open: boolean) => void
  className?: string
}

const DEFAULT_GROUPS: ShortcutGroup[] = [
  {
    title: 'General',
    shortcuts: [
      { keys: 'mod+k', label: 'Open the command palette' },
      { keys: '/', label: 'Focus search' },
      { keys: '?', label: 'Show this sheet' },
      { keys: 'esc', label: 'Close anything open' },
    ],
  },
  {
    title: 'Navigation',
    shortcuts: [
      { keys: 'g then h', label: 'Go home' },
      { keys: 'g then i', label: 'Go to inbox' },
      { keys: 'g then s', label: 'Go to settings' },
      { keys: 'mod+[', label: 'Back' },
      { keys: 'mod+]', label: 'Forward' },
    ],
  },
  {
    title: 'Editing',
    shortcuts: [
      { keys: 'mod+s', label: 'Save' },
      { keys: 'mod+enter', label: 'Save and close' },
      { keys: 'mod+shift+d', label: 'Duplicate' },
      { keys: 'mod+backspace', label: 'Delete' },
    ],
  },
]

/** Canonical token → what to draw, given the platform. */
const GLYPHS: Record<string, { apple: string; other: string }> = {
  mod: { apple: '⌘', other: 'Ctrl' },
  alt: { apple: '⌥', other: 'Alt' },
  shift: { apple: '⇧', other: 'Shift' },
  enter: { apple: '↵', other: 'Enter' },
  backspace: { apple: '⌫', other: 'Backspace' },
  esc: { apple: 'Esc', other: 'Esc' },
  up: { apple: '↑', other: '↑' },
  down: { apple: '↓', other: '↓' },
}

/**
 * Split a chord into the pieces to render.
 *
 * "then" survives as a word rather than becoming a key, because `g then i`
 * is a sequence and drawing it as `G` `THEN` `I` implies three keys held at
 * once. Exported so a test can assert the notation without rendering.
 */
export function chordParts(keys: string): { token: string; isSeparator: boolean }[] {
  return keys
    .split(/(\s+then\s+|\+)/)
    .map((part) => part.trim())
    .filter(Boolean)
    .map((part) =>
      part === 'then' || part === '+'
        ? { token: part === '+' ? '' : 'then', isSeparator: true }
        : { token: part, isSeparator: false },
    )
    .filter((part) => !(part.isSeparator && !part.token))
}

function glyph(token: string, apple: boolean): string {
  const known = GLYPHS[token.toLowerCase()]
  if (known) return apple ? known.apple : known.other
  return token.length === 1 ? token.toUpperCase() : token
}

export function KeyboardShortcutsSheet({
  groups = DEFAULT_GROUPS,
  open,
  onOpenChange,
  className,
}: KeyboardShortcutsSheetProps) {
  /*
    Per-instance prefix for every id this block emits.

    The literals these replaced were a latent duplicate the moment the
    block appeared twice on one document, and `aria-labelledby` on a
    duplicated id resolves to the first match -- so the second copy was
    labelled by the first copy's heading. Client component, so `useId` is
    the right tool.
  */
  const uid = React.useId()

  const [internalOpen, setInternalOpen] = React.useState(true)
  const isOpen = open ?? internalOpen
  const setOpen = (next: boolean) => {
    if (open === undefined) setInternalOpen(next)
    onOpenChange?.(next)
  }

  // See the note at the top: platform after mount, never during render.
  const [apple, setApple] = React.useState(false)
  React.useEffect(() => {
    setApple(/Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent))
  }, [])

  const [query, setQuery] = React.useState('')

  const filtered = React.useMemo(() => {
    const q = query.trim().toLowerCase()
    if (!q) return groups
    return groups
      .map((group) => ({
        ...group,
        shortcuts: group.shortcuts.filter(
          (s) => s.label.toLowerCase().includes(q) || s.keys.toLowerCase().includes(q),
        ),
      }))
      .filter((group) => group.shortcuts.length > 0)
  }, [groups, query])

  if (!isOpen) return null

  return (
    <div
      className={`w-full overflow-hidden rounded-2xl border border-border/60 bg-card shadow-xl ${className ?? ''}`}
      role="dialog"
      aria-modal="true"
      aria-labelledby={`${uid}-shortcuts-title`}
    >
      <header className="flex items-center gap-3 border-b border-border/60 px-5 py-3.5">
        <h2 id={`${uid}-shortcuts-title`} className="text-sm font-semibold tracking-tight">
          Keyboard shortcuts
        </h2>
        <div className="relative ms-auto">
          <Search
            aria-hidden
            className="pointer-events-none absolute start-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground"
          />
          <input
            type="search"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Filter"
            aria-label="Filter shortcuts"
            className="h-8 w-36 rounded-lg border border-border bg-background ps-8 pe-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring sm:w-48"
          />
        </div>
        <button
          type="button"
          onClick={() => setOpen(false)}
          aria-label="Close shortcuts"
          className="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
        >
          <X aria-hidden className="h-4 w-4" />
        </button>
      </header>

      <div className="max-h-[26rem] overflow-y-auto px-5 py-4">
        {filtered.length === 0 ? (
          <p className="py-8 text-center text-sm text-muted-foreground">
            No shortcut matches &ldquo;{query}&rdquo;.
          </p>
        ) : (
          <div className="grid gap-6 sm:grid-cols-2">
            {filtered.map((group) => (
              <section key={group.title}>
                {group.title ? (
                  <h3
                    data-stress-ignore
                    className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground"
                  >
                    {group.title}
                  </h3>
                ) : null}
                <dl className="space-y-1">
                  {group.shortcuts.map((shortcut) => (
                    <div
                      key={shortcut.keys}
                      className="flex items-center justify-between gap-4 rounded-lg px-2 py-1.5 hover:bg-muted/50"
                    >
                      <dt className="text-sm">{shortcut.label}</dt>
                      <dd className="flex shrink-0 items-center gap-1">
                        {chordParts(shortcut.keys).map((part, i) =>
                          part.isSeparator ? (
                            <span
                              key={`${shortcut.keys}-sep-${i}`}
                              className="px-0.5 text-xs text-muted-foreground"
                            >
                              then
                            </span>
                          ) : (
                            <kbd
                              key={`${shortcut.keys}-${i}`}
                              className="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium"
                            >
                              {glyph(part.token, apple)}
                            </kbd>
                          ),
                        )}
                      </dd>
                    </div>
                  ))}
                </dl>
              </section>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/keyboard-shortcuts-sheet.tsx and import it where you need the section:

import { KeyboardShortcutsSheet } from '@/components/keyboard-shortcuts-sheet'

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`groups`	`ShortcutGroup[]`	`DEFAULT_GROUPS`
`open`Controlled open state. Omit to let the sheet own it.	`boolean`	—
`onOpenChange`	`(open: boolean) => void`	—
`className`	`string`	—

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

keyboard-shortcuts-sheet.html

<!--
  Keyboard Shortcuts Sheet — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<div class="w-full overflow-hidden rounded-2xl border border-border/60 bg-card shadow-xl " role="dialog" aria-modal="true" aria-labelledby="_R_0_-shortcuts-title">
  <header class="flex items-center gap-3 border-b border-border/60 px-5 py-3.5">
    <h2 id="_R_0_-shortcuts-title" class="text-sm font-semibold tracking-tight">Keyboard shortcuts</h2>
    <div class="relative ms-auto">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search pointer-events-none absolute start-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" aria-hidden="true">
        <path d="m21 21-4.34-4.34"></path>
        <circle cx="11" cy="11" r="8"></circle>
      </svg>
      <input type="search" placeholder="Filter" aria-label="Filter shortcuts" class="h-8 w-36 rounded-lg border border-border bg-background ps-8 pe-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring sm:w-48" value="" />
    </div>
    <button type="button" aria-label="Close shortcuts" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x h-4 w-4" aria-hidden="true">
        <path d="M18 6 6 18"></path>
        <path d="m6 6 12 12"></path>
      </svg>
    </button>
  </header>
  <div class="max-h-[26rem] overflow-y-auto px-5 py-4">
    <div class="grid gap-6 sm:grid-cols-2">
      <section>
        <h3 data-stress-ignore="true" class="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">General</h3>
        <dl class="space-y-1">
          <div class="flex items-center justify-between gap-4 rounded-lg px-2 py-1.5 hover:bg-muted/50">
            <dt class="text-sm">Open the command palette</dt>
            <dd class="flex shrink-0 items-center gap-1">
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">Ctrl</kbd>
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">K</kbd>
            </dd>
          </div>
          <div class="flex items-center justify-between gap-4 rounded-lg px-2 py-1.5 hover:bg-muted/50">
            <dt class="text-sm">Focus search</dt>
            <dd class="flex shrink-0 items-center gap-1">
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">/</kbd>
            </dd>
          </div>
          <div class="flex items-center justify-between gap-4 rounded-lg px-2 py-1.5 hover:bg-muted/50">
            <dt class="text-sm">Show this sheet</dt>
            <dd class="flex shrink-0 items-center gap-1">
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">?</kbd>
            </dd>
          </div>
          <div class="flex items-center justify-between gap-4 rounded-lg px-2 py-1.5 hover:bg-muted/50">
            <dt class="text-sm">Close anything open</dt>
            <dd class="flex shrink-0 items-center gap-1">
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">Esc</kbd>
            </dd>
          </div>
        </dl>
      </section>
      <section>
        <h3 data-stress-ignore="true" class="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Navigation</h3>
        <dl class="space-y-1">
          <div class="flex items-center justify-between gap-4 rounded-lg px-2 py-1.5 hover:bg-muted/50">
            <dt class="text-sm">Go home</dt>
            <dd class="flex shrink-0 items-center gap-1">
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">G</kbd>
              <span class="px-0.5 text-xs text-muted-foreground">then</span>
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">H</kbd>
            </dd>
          </div>
          <div class="flex items-center justify-between gap-4 rounded-lg px-2 py-1.5 hover:bg-muted/50">
            <dt class="text-sm">Go to inbox</dt>
            <dd class="flex shrink-0 items-center gap-1">
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">G</kbd>
              <span class="px-0.5 text-xs text-muted-foreground">then</span>
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">I</kbd>
            </dd>
          </div>
          <div class="flex items-center justify-between gap-4 rounded-lg px-2 py-1.5 hover:bg-muted/50">
            <dt class="text-sm">Go to settings</dt>
            <dd class="flex shrink-0 items-center gap-1">
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">G</kbd>
              <span class="px-0.5 text-xs text-muted-foreground">then</span>
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">S</kbd>
            </dd>
          </div>
          <div class="flex items-center justify-between gap-4 rounded-lg px-2 py-1.5 hover:bg-muted/50">
            <dt class="text-sm">Back</dt>
            <dd class="flex shrink-0 items-center gap-1">
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">Ctrl</kbd>
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">[</kbd>
            </dd>
          </div>
          <div class="flex items-center justify-between gap-4 rounded-lg px-2 py-1.5 hover:bg-muted/50">
            <dt class="text-sm">Forward</dt>
            <dd class="flex shrink-0 items-center gap-1">
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">Ctrl</kbd>
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">]</kbd>
            </dd>
          </div>
        </dl>
      </section>
      <section>
        <h3 data-stress-ignore="true" class="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Editing</h3>
        <dl class="space-y-1">
          <div class="flex items-center justify-between gap-4 rounded-lg px-2 py-1.5 hover:bg-muted/50">
            <dt class="text-sm">Save</dt>
            <dd class="flex shrink-0 items-center gap-1">
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">Ctrl</kbd>
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">S</kbd>
            </dd>
          </div>
          <div class="flex items-center justify-between gap-4 rounded-lg px-2 py-1.5 hover:bg-muted/50">
            <dt class="text-sm">Save and close</dt>
            <dd class="flex shrink-0 items-center gap-1">
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">Ctrl</kbd>
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">Enter</kbd>
            </dd>
          </div>
          <div class="flex items-center justify-between gap-4 rounded-lg px-2 py-1.5 hover:bg-muted/50">
            <dt class="text-sm">Duplicate</dt>
            <dd class="flex shrink-0 items-center gap-1">
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">Ctrl</kbd>
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">Shift</kbd>
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">D</kbd>
            </dd>
          </div>
          <div class="flex items-center justify-between gap-4 rounded-lg px-2 py-1.5 hover:bg-muted/50">
            <dt class="text-sm">Delete</dt>
            <dd class="flex shrink-0 items-center gap-1">
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">Ctrl</kbd>
              <kbd class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-[11px] font-medium">Backspace</kbd>
            </dd>
          </div>
        </dl>
      </section>
    </div>
  </div>
</div>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

App Shell8 blocks

Want the whole screen instead of this one section? Open a page and copy it entire.

9 more blocks in Command & Search

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Command & Search

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Command & Search blocks

View category

Command Palette

The ⌘K switcher done properly: focus stays in the input while aria-activedescendant moves, arrows wrap, and the highlight resets on every query change.

Command & Search280 lines1 dep10 Sept

5 results

Docs

API reference

Guides

Shipping your first integration
GuidesGetting started
Grab a test-mode API key from the dashboard — it takes about two minutes.

No luck? Ask support — a human replies within a working day.

Grouped Search Results

Results grouped by section with visible breadcrumb paths and <mark>-highlighted matches — users recognise where a result lives faster than they read its snippet.

Command & Search194 lines1 dep11 Sept

Applied Filters Bar

The strip above a result set that answers "why am I only seeing four things" — every active constraint as a removable chip, with the excluded count beside it.

Command & Search238 lines1 dep13 Sept

Header Search with Suggestions

The field in the header, not the palette over it: Enter searches for what you typed unless you arrowed to a suggestion, late responses are dropped by sequence number, and recent searches are removable one at a time.

Command & Search357 lines1 dep11 Sept

Faceted Refinement Panel

Faceted search with result counts on every option, zero-count options kept visible and disabled so the list stays stable, and a note explaining why the counts do not sum.

Command & Search276 lines1 dep13 Sept

Results for “renewal”

Search Scope Switcher

One query counted across every scope it could have matched, as a real tablist with arrow-key movement — so an answer that is nowhere is visible without opening four tabs.

Command & Search247 lines1 dep

Pick up where you left off

An empty search box is the most common state of a search box, and it is usually blank. Recent queries are the cheapest useful thing to put there, and the result count is what makes them worth re-running.

Recent Search List

The empty state of a search box, filled with the searches that are worth repeating and the ones worth saving.

Command & Search150 linesNo deps10 Sept

Faceted Search Results

The whole faceted search assembled - rail, chips, live count and sort - with the intersection actually applied and relevance offered only when there is a query.

Command & Search388 lines1 dep

Price

114 products between £200 and £600

Range Facet with Histogram

The facet that is a number: a distribution over a dual-thumb slider built from two real range inputs, with typed bounds clamped on blur rather than per keystroke.

Command & Search272 lines1 dep

Keyboard Shortcuts Sheet

What's included

Works with

License

Preview