# txbrendan/ui

> Themeable React components that coding agents can use, theme, and check. Styled with Tailwind v4 and one set of theme tokens. Shared as a shadcn registry. The theme is checked for contrast in light and dark.

Install in this order:

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@txbrendan": "https://txbrendan.dev/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@txbrendan` in a public list that txbrendan/ui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @txbrendan/theme
   ```

3. Add each component you need:

   ```bash
   npx shadcn@latest add @txbrendan/<name>
   ```

To use your own brand color, install a theme link in step 2, in place of our theme. Pick a color, corners, and buttons at https://txbrendan.dev/start, or write the ID yourself. A theme ID is a brand color as six lowercase hex digits, a dash, and round, soft, or sharp, like 0f766e-soft. Add -pill for pill buttons and fields, like 0f766e-soft-pill. The install looks like `npx shadcn@latest add https://txbrendan.dev/r/themes/0f766e-soft.json`. The server makes the theme from the ID, and turns down a color whose theme fails a contrast check.

For pill buttons and fields in an app that already has a theme, run `npx shadcn@latest add @txbrendan/pill`. It makes buttons, toolbars, tabs, and fields fully round, and leaves every other token alone. A theme ID without -pill does not take the pill corners back out. To go back, delete the lines that name --button-radius, --tool-button-radius, --toolbar-radius, --tabs-radius, --input-radius, --select-trigger-radius from the global CSS.

Blocks, website components, illustrations, and templates are ready-made sections, pages, and pictures built from these components. Add one the same way, by its name. The install also adds every component it uses, and the files are yours to edit.

Props that set the look use these words and values:

- `tone`: `neutral`, `brand`, `danger`, `success`, `warning`
- `emphasis`: `solid`, `soft`, `outline`, `ghost`
- `size`: `sm`, `md`, `lg`
- `loading` and `disabled`: `true` or `false`

Read a component's page before you use it. "Use it for" says when it fits. "Avoid it for" says when it does not, and what to use instead. The accessibility notes say what the component handles and what you still have to do. Each page also lists the props it takes and their defaults.

The MCP server at https://txbrendan.dev/mcp serves the same component data over Streamable HTTP. It does not serve blocks, website components, illustrations, or templates yet. Its tools are `list_components`, `get_component`, and `get_theme_rules`. Add a theme ID to its URL, like https://txbrendan.dev/mcp?theme=0f766e-soft, and `get_component` gives that theme's install command in place of ours.

## Components

- [Access List](https://txbrendan.dev/md/access-list.md): Manage who has access and what they can do. Status: beta.
- [Accordion](https://txbrendan.dev/md/accordion.md): A stack of headings that each open and close a section below them, one at a time or several at once. Status: beta.
- [Action Keys](https://txbrendan.dev/md/action-keys.md): Gives a list of actions their single-key shortcuts. It shows nothing, and it ignores keys while someone is typing. Status: beta.
- [Agreement](https://txbrendan.dev/md/agreement.md): 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. Status: beta.
- [Alert Dialog](https://txbrendan.dev/md/alert-dialog.md): A window over the page that asks people to confirm or cancel something serious, like a delete, before anything happens. Status: beta.
- [Alert](https://txbrendan.dev/md/alert.md): A message box for important information, with tones, emphasis levels, and optional icon, title, description, and actions. Status: beta.
- [Approval Request](https://txbrendan.dev/md/approval-request.md): 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. Status: beta.
- [Area Chart](https://txbrendan.dev/md/area-chart.md): Filled areas that show how amounts change over time, alone or stacked into a total, with a themed tooltip, legend, and states. Status: beta.
- [Audience](https://txbrendan.dev/md/audience.md): Who a message goes to, said before it is sent, with messages for juniors, people under 18, going to their parents or guardians. Status: beta.
- [Avatar Stack](https://txbrendan.dev/md/avatar-stack.md): Overlapping faces for a count of people, one initial each until photos load, with +N past the limit. Status: beta.
- [Avatar](https://txbrendan.dev/md/avatar.md): A round profile photo that falls back to initials in one of eight soft tints, picked from the name. Status: beta.
- [Back Link](https://txbrendan.dev/md/back-link.md): A quiet link back to the page above, or a short trail of levels, that sits over a page title. Status: beta.
- [Badge](https://txbrendan.dev/md/badge.md): A small label for a status, category, or count, with tones, emphasis levels, and sizes. Status: beta.
- [Ball Count](https://txbrendan.dev/md/ball-count.md): The count from a baseball board: balls, strikes, and outs as lit numbers with their lights, and who is at bat. Status: beta.
- [Bar Chart](https://txbrendan.dev/md/bar-chart.md): Bars that compare numbers across categories, side by side or stacked, with a themed tooltip, legend, and states. Status: beta.
- [Batting Order](https://txbrendan.dev/md/batting-order.md): 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. Status: beta.
- [Beeswarm Chart](https://txbrendan.dev/md/beeswarm-chart.md): One dot per value along a single axis, stacked where values crowd, with a themed tooltip, legend, and states. Status: beta.
- [Board](https://txbrendan.dev/md/board.md): 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. Status: beta.
- [Bracket Match](https://txbrendan.dev/md/bracket-match.md): 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. Status: beta.
- [Breadcrumb](https://txbrendan.dev/md/breadcrumb.md): A trail of links from the top of the site to the current page, in a labeled nav. Status: beta.
- [Breakdown List](https://txbrendan.dev/md/breakdown-list.md): 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. Status: beta.
- [Bulk Bar](https://txbrendan.dev/md/bulk-bar.md): 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. Status: beta.
- [Button Variants](https://txbrendan.dev/md/button-variants.md): The classes behind Button, for a link that should look like a button. It works in a server file. Status: beta.
- [Button](https://txbrendan.dev/md/button.md): A button that runs an action, with tones, emphasis levels, sizes, and a loading state. Status: beta.
- [Calendar](https://txbrendan.dev/md/calendar.md): A month grid for picking one date or a range, with keyboard moves, date limits, and names in the user's language. Status: beta.
- [Call To Action](https://txbrendan.dev/md/call-to-action.md): 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. Status: beta.
- [Card Field](https://txbrendan.dev/md/card-field.md): 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. Status: beta.
- [Card](https://txbrendan.dev/md/card.md): A bordered surface that groups related content, with header, title, description, content, and footer parts. Status: beta.
- [Champion Card](https://txbrendan.dev/md/champion-card.md): 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. Status: beta.
- [Chart Key](https://txbrendan.dev/md/chart-key.md): 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". Status: beta.
- [Chart](https://txbrendan.dev/md/chart.md): 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. Status: beta.
- [Check-in Code](https://txbrendan.dev/md/check-in-code.md): 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. Status: beta.
- [Checkbox](https://txbrendan.dev/md/checkbox.md): A box people tick to pick an option, with a built-in label, tones, sizes, and a mixed state. Status: beta.
- [Chip Glide](https://txbrendan.dev/md/chip-glide.md): 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. Status: beta.
- [Choice Chips](https://txbrendan.dev/md/choice-chips.md): 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. Status: beta.
- [Choice Poll](https://txbrendan.dev/md/choice-poll.md): 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. Status: beta.
- [Choropleth Map](https://txbrendan.dev/md/choropleth-map.md): 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. Status: beta.
- [Club Switcher](https://txbrendan.dev/md/club-switcher.md): The club you're in, with its kit flag, name, and your roles, that opens a menu of every club you belong to. Status: beta.
- [Code Field](https://txbrendan.dev/md/code-field.md): 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. Status: beta.
- [Combobox](https://txbrendan.dev/md/combobox.md): A text field that filters a list as you type, with groups, a check on the picked item, and chips for picking several. Status: beta.
- [Command Menu](https://txbrendan.dev/md/command-menu.md): Search everything from anywhere: ⌘K opens it over the page, results come grouped, and the arrows and Enter pick one. Status: beta.
- [Composer](https://txbrendan.dev/md/composer.md): A message to people, written and sent in place, with who it reaches above it and Undo for 8 seconds after Send. Status: beta.
- [Consensus Meter](https://txbrendan.dev/md/consensus-meter.md): How a group of raters lean, one segment per rating, and where their low, average, and high targets sit against the current value. Status: beta.
- [Context Window](https://txbrendan.dev/md/context-window.md): 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. Status: beta.
- [Data Table](https://txbrendan.dev/md/data-table.md): A dense table on Table: sortable columns, people through Person, statuses, peeks, your row, zones, breaks, and quick actions per row. Status: beta.
- [Date Picker](https://txbrendan.dev/md/date-picker.md): 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. Status: beta.
- [Dialog](https://txbrendan.dev/md/dialog.md): A window over the page, with a backdrop, for a choice or a short task that must be done or cancelled before going on. Status: beta.
- [Dither Icon](https://txbrendan.dev/md/dither-icon.md): 60 original monochrome icons with optional shifting dither dots, transparent backgrounds, and theme colors. Status: beta.
- [Dither Motion](https://txbrendan.dev/md/dither-motion.md): 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. Status: beta.
- [Texture](https://txbrendan.dev/md/dither.md): 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. Status: beta.
- [Donut Chart](https://txbrendan.dev/md/donut-chart.md): 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. Status: beta.
- [Duty Slot](https://txbrendan.dev/md/duty-slot.md): 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. Status: beta.
- [Editor](https://txbrendan.dev/md/editor.md): Long writing in a field's frame, with a glass toolbar over selected words and pasting that keeps only clean HTML. Status: beta.
- [Estimate Chart](https://txbrendan.dev/md/estimate-chart.md): 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. Status: beta.
- [Feature Voting](https://txbrendan.dev/md/feature-voting.md): 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. Status: beta.
- [Field Frame](https://txbrendan.dev/md/field-frame.md): 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. Status: beta.
- [File Drop](https://txbrendan.dev/md/file-drop.md): 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. Status: beta.
- [File Row](https://txbrendan.dev/md/file-row.md): 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. Status: beta.
- [Finals Board](https://txbrendan.dev/md/finals-board.md): 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. Status: beta.
- [Form Guide](https://txbrendan.dev/md/form-guide.md): A team's last results as W, D, and L on tinted squares, oldest first, with a peek that lists the scores, latest first. Status: beta.
- [Funnel Chart](https://txbrendan.dev/md/funnel-chart.md): 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. Status: beta.
- [Gantt Chart](https://txbrendan.dev/md/gantt-chart.md): 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. Status: beta.
- [Glide Highlight](https://txbrendan.dev/md/glide-highlight.md): One highlight for a whole list, which glides from row to row on a spring instead of each row lighting on its own. Status: beta.
- [Heat Calendar](https://txbrendan.dev/md/heat-calendar.md): 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. Status: beta.
- [Hover Actions](https://txbrendan.dev/md/hover-actions.md): 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. Status: beta.
- [Hover Card](https://txbrendan.dev/md/hover-card.md): A peek: hover, focus, or tap a person, status, count, or position to see the story behind it, without leaving the page. Status: beta.
- [Hub Link](https://txbrendan.dev/md/hub-link.md): A place to go: a spot icon or an icon, a title, and a line under it, washed on hover. Status: beta.
- [Icon Color Picker](https://txbrendan.dev/md/icon-color-picker.md): Choose an artwork color with a native picker or hex field, with validation and a reset. Status: beta.
- [Icon](https://txbrendan.dev/md/icon.md): A Lucide icon by name, from a small fixed set, sized at 14, 16, or 20px and colored by the text color. Status: beta.
- [Inline Edit](https://txbrendan.dev/md/inline-edit.md): A value people change where it sits. The value is the button, and the field opens in its exact box. Status: beta.
- [Inline Reply](https://txbrendan.dev/md/inline-reply.md): A reply or an edit written in place: a soft line that springs open into a field. Enter sends, and Esc cancels. Status: beta.
- [Input](https://txbrendan.dev/md/input.md): A one-line text field with sizes and an error state. Status: beta.
- [Job Card](https://txbrendan.dev/md/job-card.md): 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. Status: beta.
- [Kbd](https://txbrendan.dev/md/kbd.md): 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. Status: beta.
- [Knockout Bracket](https://txbrendan.dev/md/knockout-bracket.md): 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. Status: beta.
- [Knockout Wheel](https://txbrendan.dev/md/knockout-wheel.md): 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. Status: beta.
- [Label](https://txbrendan.dev/md/label.md): A visible name for a form control, linked to it by id. Status: beta.
- [Leaderboard](https://txbrendan.dev/md/leaderboard.md): 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. Status: beta.
- [League Scores](https://txbrendan.dev/md/league-scores.md): Other games around the league, from a baseball board: each game's inning, both teams, their runs, and who is pitching. Status: beta.
- [Lightbox](https://txbrendan.dev/md/lightbox.md): Photos and videos one at a time, over everything, dark in both themes like a photo viewer, with your photo consent rule applied. Status: beta.
- [Line Chart](https://txbrendan.dev/md/line-chart.md): Lines that show how numbers change over time, with a themed tooltip, legend, and states. Status: beta.
- [Line Score](https://txbrendan.dev/md/line-score.md): 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. Status: beta.
- [List Row](https://txbrendan.dev/md/list-row.md): 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. Status: beta.
- [Match Card](https://txbrendan.dev/md/match-card.md): 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. Status: beta.
- [Match Clock](https://txbrendan.dev/md/match-clock.md): 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. Status: beta.
- [Media Grid](https://txbrendan.dev/md/media-grid.md): Photos and videos as a grid of square tiles that open the Lightbox, with your photo consent rule applied. Status: beta.
- [Media Image](https://txbrendan.dev/md/media-image.md): A photo, or a video's still, with your photo consent rule applied: faces blurred, or the photo hidden, until consent is on file. Status: beta.
- [Menu](https://txbrendan.dev/md/menu.md): A list of actions or settings that opens from a button, with groups, check and radio items, and submenus. Status: beta.
- [Message Row](https://txbrendan.dev/md/message-row.md): 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. Status: beta.
- [Morph Label](https://txbrendan.dev/md/morph-label.md): 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. Status: beta.
- [Motion Timing](https://txbrendan.dev/md/motion-timing.md): Runs a part's motion from script on the theme's motion variables: times, entrances, height glides, swaps, and scroll holds. It shows nothing. Status: beta.
- [Motion](https://txbrendan.dev/md/motion.md): Continuous transitions for changing labels, icons, and local layouts. Keeps the live controls and focus in place. Status: beta.
- [No Access](https://txbrendan.dev/md/no-access.md): What someone sees when they open something they cannot: what it is, whose it is, and Request access with an 8-second Undo. Status: beta.
- [Notice](https://txbrendan.dev/md/notice.md): One quiet line under the thing a problem or note is about, with a tone-colored icon and no box. Status: beta.
- [Notifications](https://txbrendan.dev/md/notifications.md): A bell with the count of what's new, and the list it opens, grouped by day, with Mark all as read. Status: beta.
- [Number Stepper](https://txbrendan.dev/md/number-stepper.md): Minus, the number, plus. For small counts like seats, guests, or minutes, and for live scores. Status: beta.
- [Pagination](https://txbrendan.dev/md/pagination.md): Previous, next, and numbered page links in a labeled nav, with the current page marked and an ellipsis for gaps. Status: beta.
- [Panel Switch](https://txbrendan.dev/md/panel-switch.md): Switches what a box shows for a new tab, filter, or item. The box holds still and glides to its new height. Status: beta.
- [Peek Card](https://txbrendan.dev/md/peek-card.md): The standard content of a peek: who or what, status, facts, the people behind a count, fixes, a note, and next actions. Status: beta.
- [Peek Person](https://txbrendan.dev/md/peek-person.md): An avatar and a name that opens the person's PeekCard on hover, focus, or tap. Status: beta.
- [Peek Spread](https://txbrendan.dev/md/peek-spread.md): A two-page peek for an event: the plan on the left, and who is going on the right. Status: beta.
- [Period Picker](https://txbrendan.dev/md/period-picker.md): 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. Status: beta.
- [Person](https://txbrendan.dev/md/person.md): An avatar and a name, with an optional meta line. The way to name a person anywhere. Status: beta.
- [Photo Field](https://txbrendan.dev/md/photo-field.md): 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. Status: beta.
- [Pixel Icon](https://txbrendan.dev/md/pixel-icon.md): 300 original retro desktop icons, drawn on a 32-pixel grid with detailed silhouettes, beveled edges, and theme colors. Status: beta.
- [Popover](https://txbrendan.dev/md/popover.md): A small panel that opens from a button, with an arrow that points back at it, for extra details or a quick form. Status: beta.
- [Position Slot](https://txbrendan.dev/md/position-slot.md): One player in one position on a team sheet: their photo, their name, then "10 · Fly-half", with pick-then-place moves. Status: beta.
- [Price Chart](https://txbrendan.dev/md/price-chart.md): 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. Status: beta.
- [Progress Log](https://txbrendan.dev/md/progress-log.md): 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. Status: beta.
- [Progress](https://txbrendan.dev/md/progress.md): 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. Status: beta.
- [QR Code](https://txbrendan.dev/md/qr-code.md): A real, scannable QR code made on the device, as ink on a white tile in both themes, with its quiet zone built in. Status: beta.
- [Radio Group](https://txbrendan.dev/md/radio-group.md): A set of radios where people pick exactly one option, with built-in labels, tones, sizes, and arrow-key movement. Status: beta.
- [Rail](https://txbrendan.dev/md/rail.md): 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. Status: beta.
- [Read By](https://txbrendan.dev/md/read-by.md): How many have read a message, out of how many it went to, with a peek that reminds the rest. Status: beta.
- [Receipt](https://txbrendan.dev/md/receipt.md): What was paid, by whom, when, and how, with the status after the title. A declined payment puts its fixes where it is said. Status: beta.
- [Reorder List](https://txbrendan.dev/md/reorder-list.md): 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. Status: beta.
- [Repeat Field](https://txbrendan.dev/md/repeat-field.md): 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. Status: beta.
- [Response Button](https://txbrendan.dev/md/response-button.md): 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. Status: beta.
- [Ring Progress](https://txbrendan.dev/md/ring-progress.md): A small ring that fills toward a goal, with the percent inside. It turns green once the goal is met. Status: beta.
- [Rolling Number](https://txbrendan.dev/md/rolling-number.md): 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. Status: beta.
- [Row Actions](https://txbrendan.dev/md/row-actions.md): A row's HoverActions and their single-key shortcuts together. While visible, the bar shows and every key its tooltips teach works. Status: beta.
- [Scale Question](https://txbrendan.dev/md/scale-question.md): 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. Status: beta.
- [Scene](https://txbrendan.dev/md/scene.md): A picture drawn from the theme with something light floating on it: tiles, a preview card, people, or a hint. Status: beta.
- [Scroll Progress](https://txbrendan.dev/md/scroll-progress.md): A reading-progress pill with a ring, the current section, and an expandable menu for jumping through a page. Status: beta.
- [Search Field](https://txbrendan.dev/md/search-field.md): 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. Status: beta.
- [Section Header](https://txbrendan.dev/md/section-header.md): A plain section title on the page, with an optional count and actions at the end of the row, that sits above a card. Status: beta.
- [Select](https://txbrendan.dev/md/select.md): 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. Status: beta.
- [Selection Card](https://txbrendan.dev/md/selection-card.md): Options as cards: a dot for one answer, a check for several, with a hint and an aside like a price on each card. Status: beta.
- [Separator](https://txbrendan.dev/md/separator.md): A thin line that divides content, horizontal or vertical. Status: beta.
- [Share Link](https://txbrendan.dev/md/share-link.md): A link to share as a read-only field, with Copy that slips to Copied for a moment and back. Status: beta.
- [Sheet](https://txbrendan.dev/md/sheet.md): A large, rounded dialog for one task, with a big heading, an optional preview tray, calm rows, and its actions placed by role. Status: beta.
- [Shimmer](https://txbrendan.dev/md/shimmer.md): 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. Status: beta.
- [Shirt Number](https://txbrendan.dev/md/shirt-number.md): A shirt number on a rounded square, never a circle, in ink by default or in a team's kit colors. Status: beta.
- [Skeleton](https://txbrendan.dev/md/skeleton.md): A pulsing placeholder shape that holds the place of content while it loads. Hidden from screen readers. Status: beta.
- [Slider](https://txbrendan.dev/md/slider.md): 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. Status: beta.
- [Slideshow](https://txbrendan.dev/md/slideshow.md): Photos that crossfade one to the next on their own, each with a caption and a bar that fills while it shows. Status: beta.
- [Smart Pick](https://txbrendan.dev/md/smart-pick.md): A follow-up question that opens where a change landed, with the app's best guesses first and a search for anyone else. Status: beta.
- [Solid Icon](https://txbrendan.dev/md/solid-icon.md): 24 original solid icons with softly squared silhouettes and transparent cutouts, in 16, 20, and 24px sizes. Status: beta.
- [Sparkline](https://txbrendan.dev/md/sparkline.md): A tiny trend line, inline with text or in a table cell. Plain SVG, with no Recharts. Status: beta.
- [Spinner](https://txbrendan.dev/md/spinner.md): A turning ring beside the control a person used, while their request runs, with a required label for screen readers. Status: beta.
- [Spot Icon](https://txbrendan.dev/md/spot-icon.md): A brand-colored sticker around an icon that names a piece of content, like a feature, an empty state, or a card's header. Status: beta.
- [Stagger](https://txbrendan.dev/md/stagger.md): Shows its children fading up one after another as they first appear, for lists, card grids, and sections on page load. Status: beta.
- [Standings](https://txbrendan.dev/md/standings.md): 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. Status: beta.
- [Status Strip](https://txbrendan.dev/md/status-strip.md): 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: beta.
- [Status Text](https://txbrendan.dev/md/status-text.md): Status as colored text with no background, with an optional quickest fix and a peek behind it. Status: beta.
- [Step Dots](https://txbrendan.dev/md/step-dots.md): A row of dots that shows progress through steps, like an onboarding flow, with each step named for screen readers. Status: beta.
- [Suggestion](https://txbrendan.dev/md/suggestion.md): 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. Status: beta.
- [Suspension Row](https://txbrendan.dev/md/suspension-row.md): 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. Status: beta.
- [Switch](https://txbrendan.dev/md/switch.md): An on and off control for a setting that takes effect right away, with a built-in label, tones, and sizes. Status: beta.
- [Sync Status](https://txbrendan.dev/md/sync-status.md): Where a save stands, beside what changed: saving, saved, waiting for a signal, or failed, with a retry icon. Status: beta.
- [Table](https://txbrendan.dev/md/table.md): A data table built from native table elements, with a caption, row sizes, and a container that scrolls sideways on narrow screens. Status: beta.
- [Tabs](https://txbrendan.dev/md/tabs.md): A row of tabs that switches between panels in one place, with a sliding indicator, a filled or underlined look, tones, and sizes. Status: beta.
- [Team Flag](https://txbrendan.dev/md/team-flag.md): A small swatch of a team's two kit colors, in hoops, halves, thirds, or split, standing in for a club crest. Status: beta.
- [Textarea](https://txbrendan.dev/md/textarea.md): A multi-line text field that grows with its text, with sizes and an error state. Status: beta.
- [Thinking State](https://txbrendan.dev/md/thinking-state.md): 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. Status: beta.
- [Time Field](https://txbrendan.dev/md/time-field.md): 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. Status: beta.
- [Time Grid](https://txbrendan.dev/md/time-grid.md): 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. Status: beta.
- [Timeline](https://txbrendan.dev/md/timeline.md): Things in time order on one rail: who did what, newest first, or the day's running order with a line at now. Status: beta.
- [Toast](https://txbrendan.dev/md/toast.md): 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. Status: beta.
- [Token Field](https://txbrendan.dev/md/token-field.md): 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. Status: beta.
- [Tool Button](https://txbrendan.dev/md/tool-button.md): 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. Status: beta.
- [Tool Call Card](https://txbrendan.dev/md/tool-call-card.md): 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. Status: beta.
- [Tooltip](https://txbrendan.dev/md/tooltip.md): A short text label that shows on hover or keyboard focus, to name an icon button or show a cut-off label in full. Status: beta.
- [Unit Switch](https://txbrendan.dev/md/unit-switch.md): 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. Status: beta.
- [Usage Meter](https://txbrendan.dev/md/usage-meter.md): 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. Status: beta.
- [View morph](https://txbrendan.dev/md/view-morph.md): Moves the same shells from one layout to another. The shell moves, then both faces crossfade together. Status: beta.
- [View switch](https://txbrendan.dev/md/view-switch.md): A row of views. The active one slides to the view you pick. Status: beta.
- [Zoom Pan](https://txbrendan.dev/md/zoom-pan.md): A frame for anything bigger than its card, like a bracket: drag to move, ⌘ or Ctrl and scroll to zoom, with −, +, and fit buttons. Status: beta.

## Blocks

- [Agent Inbox](https://txbrendan.dev/md/agent-inbox.md): One calm list of background agent tasks, grouped into Needs you, Running, and Done, with filter tabs and live counts. A row opens to its last steps and the action its state needs. Status: beta.
- [Choropleth Explorer](https://txbrendan.dev/md/choropleth-explorer.md): A world map of one measure. Choose a country to see its states, provinces, or regions, with a breadcrumb back, a country search, a ranked list, and a tab per measure. Status: beta.
- [Empty State](https://txbrendan.dev/md/empty-state.md): What a list, table, or page shows when it has nothing in it yet: an icon, a title, a short description, and one or two actions. Status: beta.
- [Feedback Banner](https://txbrendan.dev/md/feedback-banner.md): A banner that asks one question with a few answer buttons, says thanks after an answer, and can be dismissed. Status: beta.
- [First Use](https://txbrendan.dev/md/first-use.md): A setup checklist for someone's first visit: steps with their actions, progress dots with a count, and a dismiss button. Status: beta.
- [Interface Icon Library](https://txbrendan.dev/md/interface-icon-library.md): Browse outline, dither, and spot icons. Choose artwork colors and copy or download the result. Status: beta.
- [Payments Globe](https://txbrendan.dev/md/payments-globe.md): A dotted globe you can spin, with payments flying home from their cities as arcs, a rolling total, a top-cities list to pick from, a day you can replay, and a live mode. Status: beta.
- [Pixel Icon Library](https://txbrendan.dev/md/pixel-icon-library.md): Browse 300 retro pixel icons, filter by category, copy SVG or JSX, and download individual files or the complete ZIP. Status: beta.
- [Project Views](https://txbrendan.dev/md/project-views.md): Shows one set of projects as a Board, a List, or a Timeline, switched by tabs, with search, filters, and a sheet for each project. The name column stays still between List and Timeline, and only the dates side changes. Status: beta.
- [Scoreboard](https://txbrendan.dev/md/scoreboard.md): A ballpark scoreboard on a dark green board: the line score across the top, then the count, both batting orders, the umpires, and other games around the league. Status: beta.
- [Settings Panel](https://txbrendan.dev/md/settings-panel.md): A card of labeled settings rows, with switches, text fields, and selects, and a Save button that shows saving, saved, and errors. Status: beta.
- [Solid Icon Library](https://txbrendan.dev/md/solid-icon-library.md): Browse 24 solid icons, choose a color, copy SVG or React usage, and download individual SVGs. Status: beta.
- [Stats Cards](https://txbrendan.dev/md/stats-cards.md): A row of stat cards, each with a label, a value, and an optional change badge, with loading and empty states. Status: beta.
- [SVG Icon Library](https://txbrendan.dev/md/svg-icon-library.md): Search and filter an SVG collection, preview icons, copy their markup, and download individual files or a prepared ZIP. Status: beta.
- [Task Inbox](https://txbrendan.dev/md/task-inbox.md): One calm list of tasks, grouped into Needs you, Running, and Done, with filter tabs and live counts. Use it for approvals, requests, and background jobs. A row opens to its last steps and the action its state needs. Status: beta.

## Website Components

- [Announcement Dialog](https://txbrendan.dev/md/announcement-dialog.md): A launch popup with feature tiles and one button, plus an optional review step that takes people from the news to checkout. Status: beta.
- [Article](https://txbrendan.dev/md/article.md): The reading layout of one blog post: a back link, tag, title, lead, author, date, and cover, then the post as plain HTML, with a list of its sections on wide screens. Status: beta.
- [Bento Grid](https://txbrendan.dev/md/bento-grid.md): A grid of soft gray cards that show off features, each with a live preview, an icon, or a link. Status: beta.
- [Call to Action Band](https://txbrendan.dev/md/call-to-action-band.md): The closing band of a marketing page, above the footer: a big two-tone headline, one short line, and a main action with an optional second one. Status: beta.
- [Changelog](https://txbrendan.dev/md/changelog.md): A list of product releases for a changelog page, newest first: each with its date and version, a title, a short summary, an optional cover, and its changes marked New, Improved, Fixed, or Removed. Status: beta.
- [Comparison](https://txbrendan.dev/md/comparison.md): A table that compares your product with other ways of doing the job, with a dot, a ring, or a dash for included, manual, and missing. Status: beta.
- [Dot Field](https://txbrendan.dev/md/dot-field.md): A wide field of dithered dots, with bands of theme color that wind across it, as art behind a hero or a section title. Status: beta.
- [FAQ](https://txbrendan.dev/md/faq.md): Questions and answers in one soft gray column, each answer opening in place. Status: beta.
- [Feature Grid](https://txbrendan.dev/md/feature-grid.md): A grid of feature cells split by thin lines, each with a title, a description, and a picture above or below. Status: beta.
- [Footer](https://txbrendan.dev/md/footer.md): The bottom of a site: brand, a line about you, social links, columns of links, the legal line, and drawn ridges. Status: beta.
- [Headline](https://txbrendan.dev/md/headline.md): A section's big two-tone headline: the claim in full ink, then the rest in gray. Status: beta.
- [Hero](https://txbrendan.dev/md/hero.md): The top of a landing page: a big claim, a lead with a call to action, customer logos, and a framed product preview. Status: beta.
- [Logo Marquee](https://txbrendan.dev/md/logo-marquee.md): A "Used by teams at" row of logos that scrolls slowly in a loop and stands still for reduced motion. Status: beta.
- [Morph Navbar](https://txbrendan.dev/md/morph-navbar.md): A navbar whose menus share one floating box. Moving from menu to menu, the box glides to the new menu and changes size to fit it, while the links slide across. Status: stable.
- [Navbar](https://txbrendan.dev/md/navbar.md): The bar across the top of a site: brand, links, and actions, with a menu on narrow screens. Status: beta.
- [Post Grid](https://txbrendan.dev/md/post-grid.md): A grid of blog posts, each one link with a cover, a tag, a title, an excerpt, a date, and its author, with an optional row of tags to narrow them. Status: beta.
- [Pricing](https://txbrendan.dev/md/pricing.md): A row of plan cards, light and dark, with mono labels, label and value rows, what is included, and a call to action. Status: beta.
- [Stat Band](https://txbrendan.dev/md/stat-band.md): A row of two to four big figures, each with a short label and an optional note, for an About page or a landing page. Status: beta.
- [Team Grid](https://txbrendan.dev/md/team-grid.md): A grid of people for an About page, each with an avatar, name, role, a line about them, and icon links, with an optional cell for open roles. Status: beta.
- [Testimonial Wall](https://txbrendan.dev/md/testimonial-wall.md): A headline over a masonry wall of quote cards, each with a name, role, and avatar, and an optional Show more. Status: beta.

## Illustrations

- [Code Key](https://txbrendan.dev/md/code-key.md): A picture of owning the code: a key whose handle holds a code mark, with scrambled characters in the corner. Status: beta.
- [Contrast Orb](https://txbrendan.dev/md/contrast-orb.md): A picture of contrast in light and dark: an orb cut into a light half and a dark half, with letters on each. Status: beta.
- [Folder](https://txbrendan.dev/md/folder.md): A folder whose front hinges forward as two papers rise and fan apart. Status: beta.
- [Speed Gauge](https://txbrendan.dev/md/speed-gauge.md): A picture of speed: a dial with a lit arc, ticks around its edge, and a needle near the top of its range. Status: beta.
- [Stacked Blocks](https://txbrendan.dev/md/stacked-blocks.md): A picture of parts put together: a stack of blocks, with the last one floating down into place. Status: beta.
- [Theme Layers](https://txbrendan.dev/md/theme-layers.md): A picture of one theme under every part: three sheets in the air, with a grid, lines of type, and color swatches. Status: beta.

## Templates

- [About Page](https://txbrendan.dev/md/about-page.md): A whole about page, built from our website components: a floating navbar, a page title, the story beside its headline, a few figures, what you hold to, the people, a closing band, and a footer. Status: beta.
- [Blog Page](https://txbrendan.dev/md/blog-page.md): A whole blog index, built from our website components: a floating navbar, a page title, every post with the newest drawn wide and a row of tags to narrow them, a closing band, and a footer. Status: beta.
- [Changelog Page](https://txbrendan.dev/md/changelog-page.md): A whole changelog page, built from our website components: a floating navbar, a page title, every release newest first with tabs to narrow them to one type of change, a closing band, and a footer. Status: beta.
- [Contact Page](https://txbrendan.dev/md/contact-page.md): A whole contact page, built from our website components: a floating navbar, a page title over the ways to reach you, a form in one soft card, a FAQ, and a footer. Status: beta.
- [Landing Page](https://txbrendan.dev/md/landing-page.md): A whole landing page, built from our website components: a floating navbar, a split hero, a logo row, bento grids, a comparison, a testimonial wall, pricing, a FAQ, and a footer. Status: beta.
- [Post Page](https://txbrendan.dev/md/post-page.md): A whole blog post page, built from our website components: a floating navbar, the post with its author and a list of its sections, other posts to read next, a closing band, and a footer. Status: beta.
- [Pricing Page](https://txbrendan.dev/md/pricing-page.md): A whole pricing page, built from our website components: a floating navbar, a two-tone page title, the plans side by side, a comparison, a testimonial wall, a FAQ, and a footer. Status: beta.
- [Projects](https://txbrendan.dev/md/projects.md): A projects page with board, list, and timeline layouts that share one shell per project. Status: beta.
- [Projects Page](https://txbrendan.dev/md/projects-page.md): A whole projects page for an app: the left rail beside one set of projects shown as a board, a list, or a timeline. On narrow screens the rail moves into a menu. Status: beta.
- [Site](https://txbrendan.dev/md/site.md): A whole product website in page files: home, pricing, a blog with a page per post, a changelog, about, and contact, with one navbar and footer, ready to run in a Next.js app. Status: beta.

## Optional

- [Everything in one file](https://txbrendan.dev/llms-full.txt): every component page and the theme contract
- [Registry index](https://txbrendan.dev/r/registry.json): the shadcn registry, as JSON
- [Agent setup](https://txbrendan.dev/start): pick a brand color, corners, and buttons, and get a theme ID and one command for your agent