Components
Every component, live
246 React components in 21 groups, built on React Aria and styled only with the tokens. Each one is shown in the light, dark and high contrast themes, with code to copy and its accessibility notes.
Actions
Everything a person presses to do something: buttons and their states, links that look like buttons, copy, close, grouped and toggled actions, keyboard hints and the handles that reorder lists. Built to WCAG 2.2 AA as a target: visible focus, 24px minimum targets, keyboard for every action and states said in words, not colour alone.
- ButtonThe default way to run an action. Use primary for the one main action of a view, outline or ghost for the rest, danger for removal and danger-solid only to confirm something that cannot be undone.
- ToggleButtonA button that stays on or off, for view options such as wrapping lines or showing only your items. Use a Switch for settings that save.
- LinkButtonNavigation that needs the weight of a button, such as "Read the guide" on an empty page. If it changes data rather than the page, use Button.
- IconButtonA square button with only an icon, for toolbars and dense rows where the icon is well known. Prefer a labelled Button when there is room.
- CloseButtonCloses or dismisses the thing it sits in: a notice, a panel or a dialog. Inside a React Aria Dialog, slot="close" closes it with no handler.
- CopyButtonCopies a command, key or link to the clipboard and confirms it. Use it next to text people are likely to paste elsewhere.
- ButtonGroupKeeps related buttons together. Spaced for sets of separate actions, attached for a segmented look, toolbar for a strip of tools, and stackOnNarrow for form footers that should go full width on a phone.
- KbdShows one key in running text or in a hint. Use KeyCombo for a combination.
- KeyComboA keyboard shortcut: keys pressed together, a sequence, or several shortcuts that do the same thing. Use it in menus, tooltips and help pages.
- DragHandleThe grip that drags an item in a sortable React Aria GridList, Table or Tree. Always pair dragging with a second way to reorder, such as NudgeButtons, for people who cannot drag.
- NudgeButtonsOne step up and one step down: the keyboard and single-pointer way to reorder a list, next to or in place of dragging (WCAG 2.5.7). Horizontal lists use left and right.
- GatedActionAn action that is not available yet, with the reason and what unlocks it. Use it instead of a silently disabled button whenever the person can do something about it.
Agents
The pieces of a view where several coding agents run side by side: panes with their state, the workspace tree, an overview of every session, the toolbar under a terminal and the steps of a pipeline. A session state always has a word and its own glyph shape, so colour never carries it alone, and every part reflows down to a 320px screen. Built to WCAG 2.2 AA as a target.
- SessionStateChipThe state of one agent session: starting, working, waiting for you, done, ready or exited. Pick it wherever a session is listed; make it a button when the app can explain how the state was detected.
- AgentPaneOne session on a board: a header, the terminal or chat, and a toolbar. Pick it for each agent or shell the user runs; the frame shows when the session waits for them or is picked for a broadcast.
- AgentPaneHeaderThe title row of a pane: selection box, avatar, title, facts such as the branch, the state and the pane buttons. Pick it inside AgentPane; on a narrow pane the badges and buttons wrap instead of being cut.
- AgentBoardSeveral sessions side by side, one to three columns by the board’s own width. Pick it for the main area of an agents view; it has room for an empty state, a loading state and a message on top.
- WorkspaceTreeThe sidebar of an agents view: each project, its main copy and worktrees, and the sessions in each, with the most urgent state rolled up. Pick it when sessions are grouped by where they run.
- AgentOverviewEvery session at a glance as cards with the last lines of each screen, most urgent first. Pick it for a quick switcher across many sessions, often in a dialog behind a shortcut.
- SessionPeekA glance at a session’s screen next to its row, without opening it. Pick it for lists of sessions where switching costs a context change.
- TerminalBarThe strip under a terminal pane with tools that type into the session and figures about it. Pick it for any live agent session; turn it off while the agent waits for an answer.
- ToolbarButtonThe quiet button of agent toolbars, with an icon and optional text. Pick it inside a TerminalBar or a pane header; use Button elsewhere.
- ToolbarMenuA small panel from a toolbar button for choices such as the model, plugins or slash commands. Pick it when a choice needs more than one control; use a menu for a plain list of actions.
- ToolbarStatSmall read-only figures for a session: time, context used and subagents. Pick ToolbarStat for any other figure; the three others format their value and switch tone on their own.
- CommandListThe slash commands of an agent behind a search field. Pick it in a ToolbarMenu or beside a composer, wherever the user picks one command to type into the session.
- EffortChipsOne choice among a few levels, such as how hard a model thinks. Pick it for three to six short options that fit on one line; use a Select for more.
- PipelineStepNodeOne step of a pipeline of agents: its role, agent, prompt and status. Pick it for the nodes of a pipeline graph or a list of steps; steps of one stage run in parallel.
Brand
The Skribly marks and the small identity badges around them: the logo, the wordmark, the app lockup, people, agents, git hosts, trackers and sites. Badges use letters on a tint of a colour token, so they read in every theme and never rely on colour.
- LogoThe Skribly mark, plain or with the glyph of a tool. Use tone="nav" on the dark sidebar.
- WordmarkThe written name with its first letter in the amber tile, for the front of a site or a splash screen. Use AppLockup in app chrome.
- AppLockupThe logo with Skribly and the tool name, for the title bar, the sidebar and sign-in pages. Give it href to make it the link home; compact keeps only the logo in a folded sidebar.
- AvatarA person as initials or a photo, in lists, comments and assignee fields. With no name it draws the dashed unassigned circle.
- AgentAvatarThe square letter tile of a coding agent, in session lists, tabs and chips. The app passes the letters and the colour from its agent list.
- AgentChipAn agent as a small pill with its avatar, name and version, for the row of ready agents. A missing agent gets a dashed edge and can become the button that installs it.
- VcsBadgeThe git host of an account or a repository: GitHub, GitLab, Bitbucket, Gitea or Azure DevOps. Pass the account avatar as src to show the person instead.
- TrackerBadgeThe issue tracker an account or a task comes from, in settings and task lists.
- FaviconLetterA site icon with a letter fallback, for browser tabs, bookmarks and link lists. The letter is the first one of the host, without www.
Charts
Plain SVG charts and figures for reports and dashboards, built to WCAG 2.2 AA as a target. Each chart is a named figure with a written summary; the arrow keys step through the data points and read each one; every value is also in a table behind a disclosure. Series differ by colour and by line pattern, and marks switch to system colours in forced colours. Charts draw at the width of their box, so labels keep their size at any zoom and thin out on narrow screens.
- LineChartA trend over time for one or more measures on one axis. Pick it for daily or weekly series; add the previous period as a ghost line to compare, and annotations for releases or incidents.
- Chart statesWhat a chart shows before and instead of its data: loading, an error and nothing to draw. Each keeps the height of the chart, so the page does not jump when data arrives.
- BarChartCounts per day as columns, or a ranking as rows. Pick columns for a count over time and flag the days that need a look; pick rows for top lists, where names can be long and the screen narrow.
- StackedBarsThe parts of a whole for each row, such as page loads rated good, needs work and poor. Pick share to compare the mix between rows, and value to compare the totals as well.
- DonutChartThe share of a whole across a few parts, such as visits by device. Pick it for up to five parts; past that, the smallest fold into one "other" slice, and a bar chart may read better.
- SparklineA tiny trend with no axes, for a tile, a table cell or a line of text. Pick it when the shape matters more than the numbers.
- ActivityHeatmapDaily activity over months as a calendar, one column per week, such as commits over a year. Pick it to show rhythm and streaks; pick a bar chart for exact daily counts over a few weeks.
- ScoreRingA score out of a known maximum, such as an audit result out of 100. Pick it for one to four headline scores; use Meter of the feedback group for levels in a list.
- DeltaThe change of a figure against an earlier period, with its direction and whether that is good news. Pick it beside a headline number, in a tile or a table.
- MetricTileOne key figure with its change and recent trend, for a row of tiles at the top of a report. Pick StatCard of the surfaces group when the tile links to a full view.
- ChartLegend and ChartTooltipThe key and the point readout every chart here uses, for a custom chart that should look the same. Pick ChartLegend whenever colour stands for more than one thing.
Code
The parts of a code workspace: changed files, the commit box with its reasons, the commit graph and refs, the pull request of a branch, the status under an editor, search results across files, and a page preview with its address bar and device sizes. Rows sit in List and TreeView from the data group, so arrow keys, typeahead and selection come from React Aria.
- GitFileRowOne changed file with its kind as a letter, the name before the folder and actions for staging or discarding. Pick it for working tree and staged changes; put the rows in a List.
- CommitBoxThe top of a changes panel: branch, push and pull with counts, the message and the commit button, with room for suggestion tools and a ReasonList that explains a suggested message. Try committing a short message to see the inline error.
- GitGraphThe commit history with branch lines drawn in SVG, refs as badges, authors, dates and short hashes. Pick it for a history view where people pick a commit to inspect.
- GitGraph statesAn empty history, the history while it loads and a failure that blocks it, shown in place of the rows.
- PullRequestCardThe pull request of the current branch, or the next step towards one: install the tool, sign in, then create. Each state has its own icon, a colour and a word. Walk through the steps in the demo.
- EditorStatusBarThe bar under a code editor: caret position as a "go to line" button, selection, unsaved state, language, encoding and line endings.
- Search in filesResults of a search across files, grouped by file with a count, each hit with its line number and the match marked. Put them in a TreeView; Expand all and Collapse all control expandedKeys.
- BrowserBar and DeviceFrameA page preview: back, forward, reload or stop, the address and the preview size, over a frame that simulates a screen width. Pick it for previewing a site while working on it; the frame holds an iframe in an app.
- RefBadgeA branch, remote branch, tag or the current HEAD, on its own, such as in a header or a release list.
Content
Text people read: rendered Markdown, a write-and-preview field, code with a copy button, single commands, program output and a still terminal screen. Code and output scroll inside their own box, so the page never scrolls sideways.
- MarkdownRenders Markdown from a user, a tracker or an agent as safe HTML. It runs on the server too, with no DOM, so pick it for any stored Markdown text.
- ProseGives plain HTML the reading styles of Skribly. Pick it for long text written in JSX or HTML from your own source; use Markdown for Markdown.
- MarkdownFieldA text area for Markdown with a preview tab, for descriptions and comments. Pick it when the text will be shown rendered; use a plain TextField for short values.
- CodeBlockShows a block of code with an optional file name, language tag, line numbers and copy button. Pick Snippet for a single command.
- SnippetOne command or key with a copy button, such as an install line. The text wraps, so it fits a phone screen.
- OutputBoxProgram output such as an install or build log, with an optional outcome. Pick it for text a tool printed; pick CodeBlock for source code.
- TerminalScreenA still picture of a terminal, such as the last lines of an agent session on an overview card. Pick it to preview; a live terminal needs xterm in the app.
Conversation
Chats with an agent and comment threads: the message log, bubbles, tool steps, the message box with attachments, and comments with a Markdown form. Every state carries a word and an icon, and failures that block are announced at once.
- MessageThreadThe scrolling log of a chat. It keeps the newest message in view, offers a jump button when you scroll up, and shows who is writing. Pick it for any back-and-forth with a person or an agent.
- MessageBubbleOne message: your own on the end side in the accent colour, others on the start side. Shows author, time, a typing mark and delivery state with retry.
- ToolLineOne step an agent took between messages, such as reading a file or running a command. Add detail to let people open the output.
- ComposerThe message box under a chat: it grows with the text, sends on Enter, attaches files by button, paste or drop, and turns into a stop button while the agent answers. Pick CommentForm for longer Markdown posts.
- AttachmentChipsThe files attached to a message or a comment, with size, upload state and a remove button. Without onRemove it is a read-only list.
- CommentItemOne comment in a thread, with avatar, author, a badge, time, edited mark and actions. Put the comments of a thread in an ordered list.
- CommentFormWrites a Markdown comment with a preview, checks it is not empty, and shows posting, posted and failed states. Pick it under a comment thread or to edit a comment.
Data
Tables, lists, trees and timelines for showing records. Each collection has the same loading, empty and error states, and every interactive one runs on React Aria for keyboard, selection and screen reader support. Built to WCAG 2.2 AA as a target.
- TableA read-only table on native table markup with a caption, row headers and optional sorting. Pick it for reports and summaries; on a phone it either scrolls in its own box or stacks each row into a labelled card.
- DataTable with bulk actionsAn interactive grid for records people select, sort and open: a sticky header, numeric and action columns, and a selected row marked with a tint and a leading rule. BulkActionBar sits above it and acts on the selection.
- DataTable statesThe same three states every collection in this group shows in place of its rows: nothing to show, loading and a blocking error.
- SortHeaderThe label and direction arrow of a sortable column. DataTable and Table use it already; use it alone for a custom header, with onSort when it should be a button.
- ListAn interactive list of records with an icon, title, description, trailing meta and row actions. Pick it over a table when each record reads as one line of text rather than as columns.
- List reorderingPass React Aria drag and drop hooks to let people reorder items by mouse, touch or keyboard.
- List statesEmpty, loading and error states shown in place of the items, the same as in tables and trees.
- VirtualListA List that renders only what is on screen, for thousands of results such as a file search. Give it a height; items are measured, so wrapped text and the compact density still fit.
- TreeViewA hierarchy such as files or nested sections, with a folder icon that opens, badges and row actions. Pick it when depth matters; use List for flat records.
- TimelineAn ordered history of events with who and when, such as the changes to a record or the steps of a deploy. Each tone has its own icon and a word, never colour alone.
- KeyValueListLabelled facts about one thing, such as account or server details. The inline layout puts labels beside values when there is room and stacks them on a phone; columns fits more facts on wide screens.
Feedback
Status, messages and loading. Success, information, warning and error share one system: each has a tone, an icon shape and a word, so colour never carries the meaning alone. Messages that arrive later are read out through polite live regions, and blocking errors through assertive ones.
- BadgeA short label for a state or a count, such as Draft or Failed. Pick it for static facts inside rows and headers; use StatusDot when the state is live.
- SeverityBadgeThe level of a finding or an incident, from critical to info. Pick it whenever items are ranked by how much they matter.
- StatusDotA small dot and a word for the state of a process, a service or a person. Pick it for lists of things that run.
- AlertA message inside the content, next to what it is about. Pick it for a result that stays on screen, such as the error summary at the top of a form; pick a toast for news that may pass.
- BannerA full-width strip at the top of a page or panel for a state that lasts, such as read-only mode or a lost connection.
- FlashMessagesMessages the server left for the next page, such as "Saved" after a redirect or the errors of a form. Pick it for server-rendered results; use useToast for results of actions on the client.
- SpinnerA small ring for a wait of unknown length, such as loading a list. Pick ProgressBar when the share of work done is known.
- SkeletonPlaceholders that hold the space of content while it loads, so the page does not jump. Pick SkeletonRow for lists and tables, SkeletonText for paragraphs and Skeleton for any other shape.
- EmptyStateWhat fills a view that has nothing to show: nothing yet, no results, or could not load. Always offer the next step, such as creating the first item, clearing filters or trying again.
- MeterA level within a known range, such as storage used or a score. Pick ProgressBar for work that moves towards done.
- ProgressBarProgress of a task towards done, such as an upload or an import. Leave out value while the length is unknown.
- ToastsShort messages about the result of an action, shown at the edge of the screen. Pick a toast for news that may pass, such as "Saved". Results that must stay belong in an Alert. useToast() shows one from anywhere under the provider, and container renders the stack inside a themed panel.
Forms
Fields with one look and one message system: a label with a required or optional mark, help text, a status in the ok, info or warn tone, and an error with an icon. Every message is linked to its control, errors set aria-invalid, and a summary links to the fields after a failed submit. Built to WCAG 2.2 AA, from 320px up.
- FieldLabel, help, status and error around a control that is not one of this group, such as a native element or a widget from another library. Pick a ready field such as TextField when one fits.
- FormErrorSummaryThe list of problems after a submit fails, placed at the top of the form. Use it with inline errors on each field, never instead of them.
- InputThe bare text box, for building a field from React Aria parts or for a Field around it. Most forms want TextField, which includes the label.
- TextFieldA labelled single-line field: names, titles, emails, URLs. It shows the four message tones: help in muted text, ok, info and warn with an icon, and the error.
- TextareaMulti-line text, such as a description or a note. Turn on monospace for Markdown or code, and add a counter when there is a limit.
- SelectOne choice from a list of up to about fifteen options. For more, or when people know what to type, a searchable combo box fits better.
- MultiSelectSeveral choices from a known list, such as labels or channels. For free text that becomes tags, use ChipInput.
- CheckboxA Checkbox is one yes or no answer saved with the form, such as accepting terms. A CheckboxGroup is several independent choices under one label.
- RadioGroupOne choice from two to six options that should all be visible. For more, use Select.
- SwitchAn on and off setting that takes effect at once, with no save button. For a choice saved with a form, use Checkbox.
- RangeA value on a scale where the exact number matters less than the feel, such as text size or a price band. Pass an array for two thumbs.
- FileInputAttach files by picking, dropping or pasting them. It checks type and size and lists what was chosen with a remove button each.
- ColorInputA colour as a hex value, typed or picked. Presets keep choices within a palette, such as label or brand colours.
- DateInputA day, typed segment by segment or picked in a calendar, such as a due date. The order of day, month and year follows the locale.
- DateTimeInputA day and a time in one field, such as a reminder or a release. Pass a ZonedDateTime to show the time zone.
- SearchFieldText that filters or searches, with a clear button and an optional key hint. Without a visible label give it an aria-label.
- InputWithIconA text field with a leading icon and optional end text, such as a unit or a domain. The icon is a hint, never the label.
- ChipInputFree text that turns into removable chips, such as topics or email addresses. For a fixed list of options, use MultiSelect.
- SettingRowOne line of a settings list: the title and explanation on the left, any control on the right. On a narrow screen the control moves below.
- ToggleRowA settings line that is one switch, such as a reader preference. It takes effect at once.
- FormActionsThe button row at the end of a form, with the result of the last submit. Put the main button last.
Media
Files and images: the library grid and its tiles, uploads, a picker dialog, an ordered image field for forms, crop and focal point, and the fields of an image preset. Built to WCAG 2.2 AA as a target: every tile, frame and marker has a keyboard and screen reader path, states are said in words with a glyph, and every layout reflows from 320px.
- MediaGridThe files of a folder as tiles or as a list, with selection for bulk actions, an action per file, drag to reorder and files dropped from the desktop. Pick it for any library view; use MediaTile alone for one file outside a list.
- MediaTileOne file: a thumbnail or the glyph of its kind, the name, the size and a notice. Use it alone in a sidebar or a detail view; MediaGrid uses it for every tile.
- ImagePlaceholderThe box that stands in for a missing, loading or broken image, and for files with no picture. Pick it wherever an image may be absent, so the layout never jumps.
- UploadDropzoneWhere files are added: a picker button, a drop area and the list of running uploads with progress and status. Use it on library pages; FileInput in forms keeps files with the form instead.
- MediaPickerA dialog for choosing one or more files from the library, with search, folders and upload. Use it behind an ImageField or any "choose an image" button.
- ImageFieldA form field holding images from the library in order, such as a cover or a gallery. Pick it whenever a form saves image references; pair it with MediaPicker to add.
- ImageEditorCrop and focal point for one image, with optional rotate and flip. Use it in a dialog or a side panel when an image has to fit fixed shapes; the app does the actual image work through the callbacks.
- PresetFieldsThe fields of one image preset: name, size, fit, format, quality, weight limit and rules. Use it in the form that creates or edits a preset.
Navigation
Ways to move between views, pages and filters: tabs, link tabs, segmented choices, tab strips that close, breadcrumbs, pagination, filter chips and the language controls. Built to WCAG 2.2 AA as a target, from 320px wide up.
- TabsSwitches between panels of one view without leaving the page. Pick it when the panels belong together; use LinkTabs when each tab is its own address.
- LinkTabsLooks like Tabs but each tab is a link to another page. Pick it for section navigation that changes the address.
- SegmentedOne choice out of two to five, all visible at once, such as a view mode or a period. For more options use a select.
- ClosableTabsA strip of open documents or pages that the reader can close, as in an editor or a browser. A dot marks unsaved changes and turns into the close button on hover or focus.
- BreadcrumbsShows where a page sits and links to each level above it. With moreLabel set, long trails fold their middle levels into a menu.
- PaginationMoves through a long list split into pages. Pass getHref for real links that work without JavaScript, or onChange for buttons inside an app.
- FilterChipsQuick filters above a list, with an optional count on each. Multiple mode toggles each chip on its own; single mode picks one. ChipCount is the count badge, also used inside tabs.
- ChipCountA small count next to a label: unread items, open issues or results. It caps long numbers, such as 99+.
- LanguageSwitchA short row of language codes for a top bar. With onChange it switches in place; with href on each language it links to the same page in that language.
- LanguagePickerFinds a language in a long list by its own name, English name or code, with an optional field for any other code. Pick it for settings; use LanguageSwitch for two or three languages.
- LanguageBannerTells the reader what happens to a translation: downloading, offline, failed or ready. It can repeat the message in a second language while the first is still missing.
Onboarding
Help for the first minutes: a guided tour that points at the interface, a first-steps card driven by real data, and checklists with the way to fix each item. Progress is always said in words as well as shown.
- TourA guided walk that dims the page, rings one element per step and explains it in a bubble beside it. Use it once after sign-up or from a Help menu; steps whose element is missing are skipped and not counted.
- TourSpotlightThe dim and the ring a Tour draws, on its own, to point at one element, such as a new feature. It never blocks the pointer, so the page stays usable.
- OnboardingStepsA first-run card with what to set up, how far along the reader is and a button per step. Feed isDone from real data, so a step is done when the thing exists, not when it was ticked.
- ChecklistA list of what has to happen before something is ready, with a link to fix each item. Items can show state from data, or be checkboxes the reader ticks for a manual list.
Ops
Running and tending the tools around the code: containers and compose files, alerts, audit findings with their score, plugins and rules with switches, a catalogue of skills, install and sign-in steps, editor themes and connected accounts. Rows sit in a List from the data group, so arrow keys, typeahead and selection come from React Aria.
- ContainerRowOne container with its state, image, uptime, ports, usage and actions. Pick it for a list of containers or services; the demo changes state, shows a busy row and confirms with a polite message.
- ToneDotThe state of anything that runs as a small glyph and a word. Pick it inside rows and headers; use the label even where it is hidden.
- ComposeBarThe compose files of a project with their commands. One command runs at a time, and Down asks first. Pick it above a list of containers.
- AlertRowA record of an alert that happened, such as a crash or a failed health check, with where and when. Pick it for an alert history; Enter jumps to the source.
- FindingRow and ScoreBadgeAudit results: a score out of 100 with its grade, and findings with severity, rule and place that can be picked to send on together. Pick it for security, accessibility or SEO reports.
- ScoreBadge sizesThree sizes and the three grades. The thresholds can change, for example for a check where 70 is already good.
- PluginRowAn installed plugin or server with a switch that takes effect at once, its id, version, scope and description. The second list shows the loading state.
- RuleRowAn instruction rule with a switch for "always apply", when it applies, its file pattern and description. Pick it for agent or editor rules.
- SkillCardOne skill or template in a catalogue grid, with its command, description, category and install state, and a checkbox to pick several.
- InstallInstalling or signing in to a tool with one press: the button, the progress with the last line of output and the time, and the command folded away. Try the second button to see a failure.
- ThemeSwatchAn editor theme drawn as a little editor in its colours, with its name. With onPress it is a toggle for a grid of themes; without it a static preview.
- ConnectionCardA connected account or service: who, its state, a quiet detail and actions. Pick it for Git hosts, trackers or any integration settings.
Overlays
Layers over the page: dialogs, confirmations, popovers, menus and tips. Each one traps or returns focus, closes on Escape, keeps a visible border in forced-colors mode and fits a 320px screen, where the modal becomes a bottom sheet.
- ModalA dialog that blocks the page until it is closed. Pick it for a short task, such as a form or a choice, that must finish before going on; the body scrolls and the actions stay in view.
- ConfirmDialogAsks before an action that is hard to undo. It waits for an async action, shows the pending state and keeps the dialog open with an error if the action fails.
- PopoverA small panel attached to a button, for extra controls or details that do not need the whole screen. Prefer it to a Modal when the page should stay in view.
- DropdownMenuA list of actions behind a button. MenuItem rows take an icon, a description, a shortcut and a danger tone; pick a menu for commands, not for choosing a form value.
- MenuCheckItemA menu row that can be checked, for view settings such as visible columns. It needs a selectionMode on the menu or on its MenuLabel group.
- MenuLabelA labelled group of menu rows with a dividing line before it. A group can hold its own selection, such as one theme mode next to plain actions.
- TooltipA short hint on hover or keyboard focus. Use it for extra words about a control that already has a name; for anything a touch user needs, use InfoTip.
- InfoTipA small round button beside a term that opens a short explanation. Pick it over Tooltip when the text matters, because it works by touch, by keyboard and at any zoom.
- FocusTrapKeeps Tab inside a panel of your own while it is open, then gives focus back. Modal, Popover and DropdownMenu already do this; pick FocusTrap for a custom drawer or a guided step.
Pages
Whole screens for signing in, resetting a password and reporting an error. They reflow from 320px up, keep every message as a tone, an icon and a word, and are built to WCAG 2.2 AA as a target.
- AuthLayoutThe frame of the sign in and password reset screens: a brand on top, one card with the page heading, and room for a language switch underneath. Use it for any short task a reader does before entering an app.
- LoginFormEmail and password sign in with remember me, a password reset link and a show password button. Checks run in the browser first; the server adds field errors and a notice. Try any password, then "skribly".
- PasswordResetForm: request a linkThe first step of a reset: the reader asks for a link by email. Say that a link is on its way whether or not the address has an account.
- PasswordResetForm: choose a new passwordThe second step, opened from the emailed link: a new password typed twice. Pass the token in hiddenFields, and hideEmail when the link already names the account.
- ErrorPageA full page for 404, 403, 500 and 503: what happened in plain words and the ways out. Children add a second language, a request id or a search box.
- ErrorPage: service unavailableThe same page for a server error, with a retry button and a request id to quote to support.
Search
Finding things: the top-bar search with grouped results and the / key, the command palette, quick open for files, result rows and groups, search options and match highlighting. Built to WCAG 2.2 AA as a target, from 320px wide up.
- GlobalSearchThe search box of a top bar. The app filters on its side, often on a server, and passes grouped results; Enter with nothing highlighted submits the query for a full results page.
- SearchOptionToggleOn or off options inside a search field: match case, whole word, regular expression. Pass them to GlobalSearch through actions.
- CommandPaletteOne search for every view and action of an app, opened with Cmd K or Ctrl K. Pick it for apps with many places to go; use GlobalSearch for content.
- QuickOpenGo to a file by a few letters of its name, ranked like a code editor. ":120" after the name opens the file at that line.
- SearchResultGroup and SearchResultItemThe rows and sections of any results list, inside GlobalSearch or a ListBox of their own, such as a full results page. An item with href is a link.
- HighlightMarks the part of a text that matched a search, by query or by the positions of a fuzzy match.
Shell
The frame around every Skribly screen: the web layout with a dark sidebar and a top bar, the desktop layout with a title bar, an activity bar, a status bar and a dock, and split panes. It measures its own width, so it reflows the same in a narrow window, at 400% zoom and in a preview, and its sheets hold focus on small screens.
- Web app layoutThe page frame of the web apps: skip links, a sidebar, a top bar and the main column. Pick it for any signed-in screen; useAppLayout gives a custom control the same state as the menu button.
- Desktop app layoutThe frame of the desktop app: a title bar, an activity bar, a status bar and a dock for a side panel such as the agent chat. Pick Dock for a panel that sits beside any view and can be resized or closed.
- SidebarThe dark navigation column of the web apps, with the brand on top and the person signed in at the foot. It stays dark in every theme, like the Tracker.
- SidebarNavThe list of links in a Sidebar. Give it the current route and it marks the matching link and opens the group around it.
- NavItemOne link of the sidebar with an icon and an optional NavKey or count at the end. NavKey shows a short code, such as a project key.
- NavGroupA titled set of NavItems that can collapse. Use it once the sidebar holds more than about eight links; set isCollapsible false for a plain heading.
- TopbarThe bar above the main column with search and icon actions. TopbarIcon is an icon button with a tip; give it isSelected for a toggle such as dark mode, or wrap it in a MenuTrigger.
- PageHeaderThe heading row of a screen: an eyebrow, the title, a description and actions. Use one per screen, at the top of MainContent.
- MainContentThe scrolling main column, the target of the skip link. Pick width wide for boards and tables, full for editors.
- ActivityBarThe column of view icons on the start edge of the desktop app. ActivityItem shows a view with a tip, a shortcut and a badge; pin settings and help to the bottom with footer.
- StatusBarThe thin bar at the bottom of the desktop app. StatusBarItem shows one fact, as text, a button or a link; StatusPill is a rounded setting such as the theme.
- PaneA scrolling panel of a split layout with a sticky header. Use the side variant for a list beside the work and sunken for a panel under it.
- SplitViewPanes divided by splitters that the pointer and the keyboard can move. Side by side panes stack below 40rem, so neither gets too narrow to read.
- DockGripThe resize handle on the edge of a panel, such as a terminal under the editor. Dock adds one itself; use DockGrip directly for a panel of your own.
Surfaces
The boxes a screen is built from: cards, stat tiles, the welcome banner, settings sections, the list of things that need attention, dividers and selectable tiles. Each one reflows from 320px up and keeps its edges in Windows high contrast.
- CardA bordered surface for one block of content. Use the header, body and footer parts for a titled panel with actions; use the card alone with padding for a simple box.
- StatCardOne number with its label, for the row of figures at the top of a dashboard. Give it href or onPress when the number leads to the full list.
- HeroThe welcome banner at the top of a home screen, with a greeting, one paragraph and the first actions. Use it once per page.
- SettingsSectionA titled block of a settings screen. The rows inside get a line between each; turn framed off to place cards of your own under the heading.
- AttentionItemA short list of what needs the reader today: a count, what it is, why, and the way there. Mark blocking items urgent. When the list is empty, pass an empty state with the next step.
- DividerA line between groups of content, across or upright, with an optional word such as Or in the middle.
- OptionCardSelectable tiles with a preview, for choices people judge by eye: themes, fonts, animations. One choice makes a radio group, selectionMode="multiple" a checkbox group.
Theme and accessibility
Light, dark and high contrast themes with the reader settings of the Skribly apps: text size, reduced motion, a strong focus ring and underlined links. Also the small pieces every page needs: a skip link, hidden labels and live announcements. Built to WCAG 2.2 AA as a target.
- ThemeProviderHolds the theme mode, stores the choice and sets data-theme on the page. Put one at the root of an app; useTheme reads and changes the mode from any component below it. scoped themes a single panel, as here.
- ThemeToggleLets the reader pick light, dark, high contrast or the system setting. Use the segmented form in settings and the menu form in a crowded top bar.
- ThemeScriptAn inline script for the head that applies the stored theme and reader settings before the first paint, so a dark page never flashes light. themeScript() gives the same source as a string for heads that React does not render.
- AccessibilitySettingsAccessibilityProvider applies the reader settings to the page and stores them on the device; useAccessibility reads them, for example to skip an animation. AccessibilitySettings is the ready settings section, and takes extra rows such as a ThemeToggle.
- SkipLink and VisuallyHiddenSkipLink lets keyboard users jump past repeated navigation to the content. VisuallyHidden keeps text for screen readers only, such as the unit after a price or the name of an icon.
- LiveRegion and useAnnounceLiveRegion reads changes to its content aloud, such as a result count after filtering. useAnnounce speaks a one-off message without showing it, such as "Draft saved" after a shortcut.
Tracker
Issues and the board of Skribly Tracker, and the tasks the Agent pulls from any tracker. Status, priority and type each pair a glyph shape with a word, so nothing rests on colour; lists reflow from 320px; the board moves cards by pointer, keyboard, screen reader and a one-tap menu, and says what happened through live regions. Built to WCAG 2.2 AA as a target.
- IssueKeyThe project key and number of an issue in the monospace face. Pick it wherever an issue is named, and pass href when the key should open the issue.
- IssueStatusBadgeA status under the project’s own name, tinted by its category: not started, in progress, done or cancelled. Pick it for the status of an issue in lists, cards and headers.
- PriorityBadgeThe priority of an issue as an arrow glyph and a word. Pick compact on cards, where only the glyph shows.
- IssueTypeBadgeThe kind of an issue as a glyph and a word: bug, feature, task, improvement or epic. Pass icon for a kind the app defines itself.
- LabelBadgeOne label with the colour the project picked for it. Pass onRemove where labels are edited.
- LabelListThe labels of an issue as a named, wrapping list. Pick max where space is short; the rest fold behind a +N button.
- IssueRowOne issue on one line, as on the dashboard. Pick it for short lists such as "Assigned to me"; use IssueTable for long lists people sort.
- IssueTableThe issue list of a project on the shared Table, with sorting, empty, loading and error states. Pick stack, the default, to turn rows into cards below 36rem, or scroll to keep the grid in its own scrolling box.
- BoardThe Kanban board of a project: a column per status, cards that move between them, and a voice that says how the move went. The board is controlled; apply onMove with moveBoardCards and save it. Turn on "Fail the next save" to see the error path.
- Board statesA read-only board, the loading, error and empty states of the board, and a column that is still loading.
- TaskCardA task from any connected tracker, as in the task list of the Agent. Pick it for lists where one task opens next to the list, and put the start button in actions.