App Components

Manage who has access and what they can do.

A stack of headings that each open and close a section below them, one at a time or several at once.

Gives a list of actions their single-key shortcuts. It shows nothing, and it ignores keys while someone is typing.

Consent and codes of conduct: an "I agree" button that records who and when, never a checkbox. Once agreed, the record shows in its place with the person's photo.

A window over the page that asks people to confirm or cancel something serious, like a delete, before anything happens.

A message box for important information, with tones, emphasis levels, and optional icon, title, description, and actions.

An AI agent asks before it acts: what it wants to do, why, and the command or change. Approve or Reject, then the outcome shows in place of the buttons and cannot be pressed again.

Filled areas that show how amounts change over time, alone or stacked into a total, with a themed tooltip, legend, and states.

Who a message goes to, said before it is sent, with messages for juniors, people under 18, going to their parents or guardians.

Overlapping faces for a count of people, one initial each until photos load, with +N past the limit.

A round profile photo that falls back to initials in one of eight soft tints, picked from the name.

A quiet link back to the page above, or a short trail of levels, that sits over a page title.

A small label for a status, category, or count, with tones, emphasis levels, and sizes.

The count from a baseball board: balls, strikes, and outs as lit numbers with their lights, and who is at bat.

Bars that compare numbers across categories, side by side or stacked, with a themed tooltip, legend, and states.

A team's batting order from a baseball board: each player's shirt number and position, with the batter at the plate marked. One soft tint glides from player to player under the pointer.

One dot per value along a single axis, stacked where values crowd, with a themed tooltip, legend, and states.

Shows items grouped into lanes by stage, side by side, with a count and an Add button on each lane and a card people open for each item.

One knockout match on its own, 124px tall and as wide as its column, with a peek that adds what the tile has no room for: the round, the result in words, and facts like the venue or form.

A trail of links from the top of the site to the current page, in a labeled nav.

Rows with their number and a pill bar, inside a card, for parts of a whole or a ranking, with targets, status tones, and change words.

The bar that rises while rows are selected, with the count and the verbs that work on all of them. Its keys work while it shows, and Esc clears the selection.

The classes behind Button, for a link that should look like a button. It works in a server file.

A button that runs an action, with tones, emphasis levels, sizes, and a loading state.

A month grid for picking one date or a range, with keyboard moves, date limits, and names in the user's language.

A next step offered in a card: a scene that shows it, what it is, why, how far along you are, and the step itself.

Card details as one group: the number, the expiry (MM / YY), and the security code, with one line of help or error under it. The number groups itself as it is typed and names the brand in words.

A bordered surface that groups related content, with header, title, description, content, and footer parts.

The champion's slot: a dashed "Winner to be decided" until crowned, then a warm card that springs in with sparkles and 3 seconds of confetti.

A key for a chart's title row that shows the point under the pointer, with numbers that roll as it moves. Area Chart, Bar Chart, and Line Chart use it for legend="top".

The base every chart builds on: a frame that holds its height, theme series colors, a themed tooltip and legend, and loading, empty, and error views.

An event's check-in code, for a host's phone or a tablet at the door. Faces arrive under it as people scan, and the count opens who is not in yet.

A box people tick to pick an option, with a built-in label, tones, sizes, and a mixed state.

Moves a wrapping row of chips when values come and go. A removed chip fades where it sits, then the others glide to their new places. It shows nothing.

Pills for short tags, like teams, plans, and days of the week. Pick several by default, with a check that springs in, or pick one with the arrow keys.

A question with options people pick one of. After a vote, it shows each option's share as a bar with a percent and a count.

Regions shaded by value in one hue, in steps, with hatching for regions with no data, a legend that filters, and arrow keys that move from region to region.

The club you're in, with its kit flag, name, and your roles, that opens a menu of every club you belong to.

One field for a code typed or pasted: a code sent by email or text, or a workspace's invite code. It drops anything else, and calls onComplete once the code is whole.

A text field that filters a list as you type, with groups, a check on the picked item, and chips for picking several.

Search everything from anywhere: ⌘K opens it over the page, results come grouped, and the arrows and Enter pick one.

A message to people, written and sent in place, with who it reaches above it and Undo for 8 seconds after Send.

How a group of raters lean, one segment per rating, and where their low, average, and high targets sit against the current value.

A meter for how much of a model's context window is used, like 84K of 200K tokens. It splits the use into parts with a legend, and turns warning near the limit.

A dense table on Table: sortable columns, people through Person, statuses, peeks, your row, zones, breaks, and quick actions per row.

A field that shows a day, like "Sat 3 Oct", and opens a calendar under it to pick one. Weeks start on Monday, and the year shows only when it is not this year.

A window over the page, with a backdrop, for a choice or a short task that must be done or cancelled before going on.

60 original monochrome icons with optional shifting dither dots, transparent backgrounds, and theme colors.

Moves a chart's dithered dots: an intro, a loop at rest, and dots that fill in near the pointer. It draws on a canvas under the chart.

Sets how the parts inside it draw their color, like charts, meters, and buttons: dots, a gradient, or grain, with a soft glow on dark pages.

A ring split into slices that show how parts make up a whole, with the total in the middle and every value in the legend.

One volunteer duty on one day, as a row in a card: its icon and name, what it involves, who is on it, and where it stands, ending in the quickest fix.

Long writing in a field's frame, with a glass toolbar over selected words and pasting that keeps only clean HTML.

What was expected against what came in, per period: a ring for the estimate and a dot for the actual, colored by beat, miss, or match.

A list of ideas, each with an upvote button and its count, or an up and down vote stacked around the count. It shows how this person voted.

The frame every field wears: a label above, the control, and a hint or an error under it, wired up for screen readers. Also exports FieldButton, the field-shaped trigger for lists and pickers.

Files in: an empty slot with a dashed edge. While a file is over it, it takes the selection look and says "Drop to add". A press anywhere on it opens the picker.

One file in a list: an icon by type, the name, "412 KB · 214 rows", and who added it, with their photo. It shows an upload's progress, its failure and the fix, or that it is done.

Finals day on one board: two semi-finals feed the cup final and the bronze final, each pitch's matches sit on a shared timeline, and a hold moves the later matches on the final's pitch.

A team's last results as W, D, and L on tinted squares, oldest first, with a peek that lists the scores, latest first.

Steps that narrow, like joining or trials, as numbered rows with a pill bar, each step's share of the first, and how many stopped before it.

Shows items as bars across a date range, in groups, with a fixed name column, week ticks, and a today marker. Use it to see when work runs and how far along it is.

One highlight for a whole list, which glides from row to row on a spring instead of each row lighting on its own.

Weeks across and days down, in one hue whose strength is how much happened, or each day in its event type's color, with a legend that filters and a span you can measure.

A row's quick icon actions in a small glass toolbar that sits on the row and springs in while the row is hovered or holds focus. A small tooltip above each icon says what it does.

A peek: hover, focus, or tap a person, status, count, or position to see the story behind it, without leaving the page.

A place to go: a spot icon or an icon, a title, and a line under it, washed on hover.

Choose an artwork color with a native picker or hex field, with validation and a reset.

A Lucide icon by name, from a small fixed set, sized at 14, 16, or 20px and colored by the text color.

A value people change where it sits. The value is the button, and the field opens in its exact box.

A reply or an edit written in place: a soft line that springs open into a field. Enter sends, and Esc cancels.

A one-line text field with sizes and an error state.

One job on one line, like an import, a send, a sync, or an export: its status, what it is, a few words about it, and how long it took. A thin bar fills while it runs. It opens to the details.

A keyboard key, shown as a small label with a border, or as quiet text inside a field, with a group part for key combinations.

A knockout draw round by round, up to three rounds side by side, paged one round at a time with chevrons. Cards, elbows, and titles glide together.

The draw as a circle: the champion at the hub with a trophy and a warm glow, and each round a ring further out. Hover or focus a team to light its run.

A visible name for a form control, linked to it by id.

Ranked people for one number, on DataTable: the place, the person, and the value. Ties share a place, and your row follows a Your place line.

Other games around the league, from a baseball board: each game's inning, both teams, their runs, and who is pitching.

Photos and videos one at a time, over everything, dark in both themes like a photo viewer, with your photo consent rule applied.

Lines that show how numbers change over time, with a themed tooltip, legend, and states.

A baseball line score: each team's runs by inning on number plates, then lit runs, hits, and errors, with the half-inning in play marked.

A row inside a card: a date or a photo or icon, the title and its status, a meta line, and a trailing chip, with hover actions over its end.

A knockout match tile with a flat shape: the time and pitch, an FT or Live badge, and two team rows with kit, score, and the winner's caret.

The match clock on playing time, across halves, half-time, extra time, and full time: one line for a scoreboard, or the timekeeper's console with its buttons.

Photos and videos as a grid of square tiles that open the Lightbox, with your photo consent rule applied.

A photo, or a video's still, with your photo consent rule applied: faces blurred, or the photo hidden, until consent is on file.

A list of actions or settings that opens from a button, with groups, check and radio items, and submenus.

A message with quick actions. Pointing at it or moving focus into it springs in Reply, and Edit on your own, with R and E keys. A reply or an edit opens in place.

Words that morph in place when they change: the width eases to the new words while the old ones blur out and the new ones blur in.

Runs a part's motion from script on the theme's motion variables: times, entrances, height glides, swaps, and scroll holds. It shows nothing.

Continuous transitions for changing labels, icons, and local layouts. Keeps the live controls and focus in place.

What someone sees when they open something they cannot: what it is, whose it is, and Request access with an 8-second Undo.

One quiet line under the thing a problem or note is about, with a tone-colored icon and no box.

A bell with the count of what's new, and the list it opens, grouped by day, with Mark all as read.

Minus, the number, plus. For small counts like seats, guests, or minutes, and for live scores.

Previous, next, and numbered page links in a labeled nav, with the current page marked and an ellipsis for gaps.

Switches what a box shows for a new tab, filter, or item. The box holds still and glides to its new height.

The standard content of a peek: who or what, status, facts, the people behind a count, fixes, a note, and next actions.

An avatar and a name that opens the person's PeekCard on hover, focus, or tap.

A two-page peek for an event: the plan on the left, and who is going on the right.

One period for a page of charts: period pills, the days they cover said once, Custom dates, and a switch to compare with the period before.

An avatar and a name, with an optional meta line. The way to name a person anywhere.

A person's own photo, changed in place: their photo at header size, then Change photo and Remove. A new photo opens in a circle to place, and saves as a 256px square.

300 original retro desktop icons, drawn on a 32-pixel grid with detailed silhouettes, beveled edges, and theme colors.

A small panel that opens from a button, with an arrow that points back at it, for extra details or a quick form.

One player in one position on a team sheet: their photo, their name, then "10 · Fly-half", with pick-then-place moves.

A price over time against a baseline like the previous close: green above it, red below, with volume and each point's open, high, low, and close.

The steps of a long piece of work, like an import, a setup, or a deploy. The list grows while it runs, then folds into one line, like Done in 34s, 5 steps. A failure stays open and says why.

A bar that shows how much of a task is done, with a label, an optional value, tones, sizes, and a state for when no one knows yet.

A real, scannable QR code made on the device, as ink on a white tile in both themes, with its quiet zone built in.

A set of radios where people pick exactly one option, with built-in labels, tones, sizes, and arrow-key movement.

The app's left rail, 199px wide: your app's name, Search, places grouped with their counts, one pinned at the bottom, and the workspace you're in.

How many have read a message, out of how many it went to, with a peek that reminds the rest.

What was paid, by whom, when, and how, with the status after the title. A declined payment puts its fixes where it is said.

A list you put in order, like an on-call order or a meeting's running order. Drag a row by its handle, or pick it up with Space and move it with the arrows.

How a session repeats, one question at a time: once, every week, or every 2 weeks, then the days, then until when. Under it, the series in words with its count, and any sessions that clash with a closure, with a way to skip them.

An availability or RSVP answer, like Going, Can't go, Maybe, or Online. Answers sit in a ResponseGroup named for the question, and work like native radios.

A small ring that fills toward a goal, with the percent inside. It turns green once the goal is met.

A number whose digits roll to each new value, each one the way the whole value moved, so a value that changes during a scrub or a step reads as one number moving.

A row's HoverActions and their single-key shortcuts together. While visible, the bar shows and every key its tooltips teach works.

A question answered on a short worded scale, for check-ins, like "Poor, Broken, OK, Good, Great". One answer, as cards in a row with the dot above each word. All ink, so no end of the scale looks better.

A picture drawn from the theme with something light floating on it: tiles, a preview card, people, or a hint.

A reading-progress pill with a ring, the current section, and an expandable menu for jumping through a page.

A search box with the same sizes as Input. A clear button shows once there is text, Esc clears it, and an optional count says how many matched.

A plain section title on the page, with an optional count and actions at the end of the row, that sits above a card.

A button that opens a list to pick one option from, with groups, a check on the picked option, Input's sizes, and form support.

Options as cards: a dot for one answer, a check for several, with a hint and an aside like a price on each card.

A thin line that divides content, horizontal or vertical.

A link to share as a read-only field, with Copy that slips to Copied for a moment and back.

A large, rounded dialog for one task, with a big heading, an optional preview tray, calm rows, and its actions placed by role.

Loading text with a slanted band of light that sweeps across it, like "Thinking" while an answer streams in. It can also cycle through messages.

A shirt number on a rounded square, never a circle, in ink by default or in a team's kit colors.

A pulsing placeholder shape that holds the place of content while it loads. Hidden from screen readers.

A track with a thumb people drag or move with arrow keys to pick a number, or two thumbs for a range, with a label, tones, and sizes.

Photos that crossfade one to the next on their own, each with a caption and a bar that fills while it shows.

A follow-up question that opens where a change landed, with the app's best guesses first and a search for anyone else.

24 original solid icons with softly squared silhouettes and transparent cutouts, in 16, 20, and 24px sizes.

A tiny trend line, inline with text or in a table cell. Plain SVG, with no Recharts.

A turning ring beside the control a person used, while their request runs, with a required label for screen readers.

A brand-colored sticker around an icon that names a piece of content, like a feature, an empty state, or a card's header.

Shows its children fading up one after another as they first appear, for lists, card grids, and sections on page load.

A league table or a tournament pool, on DataTable: the place, the team and its kit, the counts, points difference, points, and form, with zones.

Joined status pills for the top of a home page: a label with an optional status, the value under it, and controls at the end.

Status as colored text with no background, with an optional quickest fix and a peek behind it.

A row of dots that shows progress through steps, like an onboarding flow, with each step named for screen readers.

An AI or rule-based suggestion shown in place and never applied on its own: a quiet chip on a row, or ghost words that would continue a field. Taken, it says so in place, with Undo.

A player in the sin bin, sent off, or off for a temporary replacement, as a row in a card, counting down on the same clock value as MatchClock.

An on and off control for a setting that takes effect right away, with a built-in label, tones, and sizes.

Where a save stands, beside what changed: saving, saved, waiting for a signal, or failed, with a retry icon.

A data table built from native table elements, with a caption, row sizes, and a container that scrolls sideways on narrow screens.

A row of tabs that switches between panels in one place, with a sliding indicator, a filled or underlined look, tones, and sizes.

A small swatch of a team's two kit colors, in hoops, halves, thirds, or split, standing in for a club crest.

A multi-line text field that grows with its text, with sizes and an error state.

What an agent is doing, step by step. The list grows while it works, then folds into one line, like Thought for 34s, 5 steps.

A 24-hour time, typed or picked from a list under the field. "19", "1930", "19.30", and "7pm" all settle as 19:00-style times, and an end time shows how long it makes the event.

A day of rooms or other resources: one row per room, time across, each booking a soft block in its event type's color. Book free time, and drag a booking to another time or room.

Things in time order on one rail: who did what, newest first, or the day's running order with a line at now.

A short note in the corner after something happened. An undo toast offers Undo for 8 seconds, then commits the change. Tones say how it went, and a promise toast follows work to its end.

A field for entries that each resolve to one real thing, like emails and people. A finished entry becomes a soft token, a known person shows with their photo, and a bad email turns red.

A small button in a glass toolbar, with its label and key taught in a tooltip. A press can leave its result in place, with Undo and Retry.

One tool call an agent made, on one line: its status, the tool, its inputs in a few words, and how long it took. It opens to the inputs and the result.

A short text label that shows on hover or keyboard focus, to name an icon button or show a cut-off label in full.

The unit beside a value, like £, min, or km, that you can change in place. Click it for a menu of units. On a change the unit crossfades to the new one, and a note can say what changed.

One number for a whole, split into parts with a legend, like 412 GB of 1 TB or $84K of a $100K goal. Its digits roll and its parts slide when values change. Against a limit it warns, and against a goal it turns success.

Moves the same shells from one layout to another. The shell moves, then both faces crossfade together.

A row of views. The active one slides to the view you pick.

A frame for anything bigger than its card, like a bracket: drag to move, ⌘ or Ctrl and scroll to zoom, with −, +, and fit buttons.