Components
90 components, each with live examples, props, keyboard behaviour, accessibility notes and the tokens it reads. The 45 in the free core run on these pages from the real @superduperui/react package.
Free core, MIT (45)
Use them in any project, client and commercial work included. Each one has live examples you can use with your keyboard and switch between themes.
Stacked sections that open and close; headers are buttons inside headings at the level you choose.
A message about the page or a task: colour plus icon plus a hidden word, persistent until removed. Also the Banner and Callout.
A confirmation that interrupts: focus starts on Cancel, the action is a verb, Esc cancels.
Initials on a brand tint for a person or team; AvatarGroup stacks several with a count.
A short status or count, never interactive. Text is 7:1 on its tint; counts carry a hidden label.
Shows where the page sits in the site: a nav of links ending in the current page.
Triggers an action. Text label always; use IconButton for icon-only actions.
A bordered surface grouping related content, with a heading at the level you choose.
Turn one independent option on or off, or pick several from a group.
A text input that filters a list as you type. For long or searchable lists; the number of matches is announced.
A modal task or confirmation. Title required; focus is trapped and returns to the trigger.
A 1px line between content; decorative unless it separates groups.
What to show when there is nothing to show (first use, no results, an error), always with the next step.
A form that validates on submit and moves focus to an error summary linking to each field.
An icon-only action with a required name, shown as a tooltip on hover and keyboard focus.
One keyboard key, in running text or menus.
Navigation to another page or place, always underlined. Inline in sentences, or standalone at 44px.
A list of actions opened from a button. Arrow keys move, type-ahead jumps, Esc closes and returns focus.
The site's top navigation: links in a row, a Menu disclosure on narrow screens. Publishes its height for scroll padding.
A number typed or stepped with 44px buttons and the arrow keys, formatted with its unit or currency.
Moves between pages of a long list. Previous and Next are 44px; narrow screens show "Page 3 of 12". With onLoadMore it is a Load more button instead.
A password input with a 44px show toggle. Paste and password managers always work.
A small non-modal panel anchored to a button, for extra detail or a quick edit. Esc closes it and focus returns.
How far a task has got (ProgressBar, ProgressCircle) or how full something is (Meter).
Pick exactly one of 2 to about 6 options, all visible. Radio for short labels, RadioCard for options that need a sentence.
A search box with a 44px clear button. Enter submits; Esc clears.
Two to five short options side by side; the choice applies straight away (Day, Week, Month).
Choose one option from a list of up to about 15. Never submits on change.
A modal panel that slides in from an edge (also called Drawer). Fades instead under reduced motion.
Section navigation down the side, with groups that open. Collapses to a sheet on narrow screens.
Placeholder shapes in an aria-busy region while content loads; the shimmer stops under reduced motion.
Pick a value or a range on a scale by dragging or with the arrow keys. Thumbs have 44px hit areas.
An indeterminate wait, announced politely with its label.
One key number with its label and an optional trend, shown with an arrow icon and words.
Progress through a task in order. Completed steps show a tick and can be revisited; the current step is marked.
An on/off setting that applies immediately. The thumb carries a tick or a cross.
A static table of data with real header cells, tabular figures and optional sortable column headers.
Switch between related panels in the same view. Selected = 2px bar plus weight (vertical: the bar at the start edge); Contained raises the selected tab in a track.
A labelled group of tags: removable with a 44px remove button or Backspace (announced), or selectable as filter chips.
Multi-line text with a label, hint, error and an optional character count announced politely.
A labelled text input (or textarea) with hint and error, replacing v1's 17 Input sets.
A short, non-blocking message. Persistent until dismissed; announced politely; never takes focus.
A button that stays pressed, alone or in a group (Bold, Italic; Follow).
A named row of related controls: one tab stop, arrow keys between controls.
A short text description of a control, shown on focus and hover, hoverable, dismissed with Esc.
Supporting parts, used inside the components above: Field, FocusRing, Icon, VisuallyHidden.
Pro (45)
Data tables, dates, advanced inputs and the mobile components. They come with Solo, Team and Studio, so their code isn’t public: these pages show each one as a still preview, with the same docs.
ActionSheet
ProA short list of choices about one thing, from the bottom edge, with Cancel focused first.
AddressField
ProA UK postal address as separate fields with the right autocomplete tokens, so browsers fill it in one go.
AppBar
ProThe top bar of a mobile screen: back button, actions and a large title. Publishes its height when sticky.
BottomSheet
ProA modal panel from the bottom edge with a drag handle and a Close button; focus is trapped and returns.
Calendar
ProA month grid for choosing a day (or a range with RangeCalendar), always on the page.
CardInput
ProCard number, expiry and security code grouped in one bordered box, each part its own input with its own autocomplete token (cc-number, cc-exp, cc-csc).
Carousel
ProOne slide at a time, with Previous, Next and slide pickers. Never rotates unless you ask; then Pause comes first.
A figure for any chart: title, a one-line summary, the chart and a required data table people can open.
A scrolling row of filter chips for mobile lists. Selected chips show a tick.
ChoiceRow
ProOne answer row for a question screen: a radio (Single) or a checkbox (Multi) drawn as a full-width 56px bordered row with the indicator at the end.
CodeInput
ProA one-time code in one input drawn as boxes, so paste and SMS or email autofill always work.
Search every command and run it: Ctrl+K opens, typing filters (with keywords), the count is announced.
ContextMenu
ProActions for an item, opened by right-click or Shift+F10 and the Menu key on the focused item.
An amount of money, formatted with its currency in the locale and parsed the same way.
DataTable
ProRows of data people sort, search, select and act on: sortable headers, checkbox selection, bulk actions and a menu per row.
DateField
ProA date typed in day, month and year segments, without a calendar.
DatePicker
ProA date field with a calendar button: type the date or pick it from a month grid.
FieldStatus
ProA status line under a field, beside FieldError: success, checking (with a spinner) or a warning, each with its own glyph, colour and hidden prefix, never colour alone.
FileDropZone
ProDrag files in or use the Choose files button; chosen files are listed with remove buttons and every change is announced.
Filters
ProApplied filters as removable chips, an Add filter builder and saved views (desktop).
The one primary action of a mobile screen: a 56px button with a required name, optionally with a visible label.
HoverCard
ProA preview card for a person or link that opens on hover and on keyboard focus; supplementary only.
IconTile
ProA decorative icon on a rounded tinted tile, for feature lists, onboarding steps and empty states. The text beside it carries the meaning.
An A to Z jump strip beside a long alphabetical list (contacts, countries). One 44px-wide target; dragging shows the letter in a bubble.
Keypad
ProAn in-app number pad for PINs and amounts: digits 1 to 0 and a delete key, each a button named by its digit and 44px or larger.
ListRow
ProOne row of a mobile list (48px or taller). Swipe actions are always also in a visible More actions button.
NavItem
ProA link in a settings or section sidebar, with an optional icon and count; the current page is filled brand-subtle at the heavier weight.
Recent notifications in All and Unread tabs, announced politely, with a switch that pauses them.
Dots for the pages of an onboarding flow or gallery; each dot is a 44px target and the current one is wider.
The password requirements under a new-password field, each ticked as it is met; the count is announced when typing pauses.
PhoneField
ProA country dialling code and a phone number under one label, with the tel keyboard and autocomplete.
PickerSheet
ProA mobile picker in a bottom sheet: a searchable list (countries, long option lists) or a wheel (a date or a time), closed with Done.
PlanCard
ProA priced plan choice: a radio drawn as a card with the price, how it is billed, a detail line and a strong badge, as a full-width row or a tile.
Rating
ProChoose a rating from 1 to 5 stars with the keyboard or pointer; each star is a 44px target.
SaveBar
ProA sticky bar at the bottom of a settings page: unsaved changes with Discard and Save changes, then saving, saved or an error, announced politely.
SettingRow
ProOne setting: a title and description with its control at the end (a Switch, a Select, a Button, a read-only value or a link to a sub-page).
SocialSignIn
ProSign-in providers stacked at equal size before the password option, each with the vendor's own mark and wording.
SummaryLine
ProOne line of an order summary: a label and an amount, end aligned. Discount draws a minus and the success colour; Total sits under a rule at the heavier weight.
SystemUI
ProMobile 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.
TabBar
ProBottom navigation between the top-level screens of a mobile app: icon plus label, current screen marked.
TagInput
ProType words and press Enter to turn them into removable tags; additions and removals are announced.
TimeField
ProA time typed in hour and minute segments; 24-hour in en-GB unless you ask for 12.
Timeline
ProWhat happens when: a vertical list of dated steps (a trial: today, a reminder, the first charge) with done, current and upcoming nodes on a rail.
Tree
ProA hierarchy people expand and collapse (folders, categories). Arrow keys move and open; rows are 44px.
WalletButton
ProAn express-pay button. Google Pay places Google's own button artwork, unmodified; System stands in for a button the platform draws (Apple Pay must come from Apple's API, never recreated).