Projects
14 projects
- To do
- In progress
- In review
- Done
npx shadcn@latest add @txbrendan/badge @txbrendan/avatar-stack @txbrendan/ring-progress @txbrendan/progress @txbrendan/view-switchThe Projects page template and the view-morph engine are paid.
Works with these frameworks
And these editors and agents
- Claude Code
- Codex
- Cursor
One class, a new texture
Wrap any part in Dither, or put texture-dither on your body. Charts, meters, buttons, and photos turn to dots, with a glow on dark pages. Names, keys, and values stay the same.
Signal through the noise.
Charts, data, and agent flows
Charts with themed tooltips, polls, approvals, and edits in place, ready for a real product.
Bar Chart
betaBars that compare numbers across categories, side by side or stacked, with a themed tooltip, legend, and states.
Donut Chart
betaA ring split into slices that show how parts make up a whole, with the total in the middle and every value in the legend.
Arrow keys move a day or a week. Enter marks the start of a span, and again its end. Escape clears it.
Heat Calendar
betaWeeks 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.
Run migration 0042 on production?
npm run db:migrate -- --to 0042Approval Request
betaAn 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.
- Best day for practice?
- Monday67%
- Wednesday33%
18 votesChoice Poll
betaA 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.
- Owner
- Place
Inline Edit
betaA value people change where it sits. The value is the button, and the field opens in its exact box.
The everyday pieces, finished
Menus, fields, dialogs, and pickers with keyboard support and quiet motion. App components are free.
Button
betaA button that runs an action, with tones, emphasis levels, sizes, and a loading state.
Select
betaA button that opens a list to pick one option from, with groups, a check on the picked option, Input's sizes, and form support.
Delete this project?
You cannot undo it.
Dialog
betaA window over the page, with a backdrop, for a choice or a short task that must be done or cancelled before going on.
Command Menu
betaSearch everything from anywhere: ⌘K opens it over the page, results come grouped, and the arrows and Enter pick one.
- Three projects shipped this week.
Tabs
betaA row of tabs that switches between panels in one place, with a sliding indicator, a filled or underlined look, tones, and sizes.
Archived Tuesday training
Toast
betaA 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.
- Match date
Date Picker
betaA 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.
Slider
betaA 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.
Switch
betaAn on and off control for a setting that takes effect right away, with a built-in label, tones, and sizes.
Blocks
Ready-made pieces of an app screen, built from the components above. One install adds the block and every component it uses.
Agent Inbox
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.
Choropleth Explorer
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.
Empty State
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.
Feedback Banner
A banner that asks one question with a few answer buttons, says thanks after an answer, and can be dismissed.
First Use
A setup checklist for someone's first visit: steps with their actions, progress dots with a count, and a dismiss button.
Interface Icon Library
Browse outline, dither, and spot icons. Choose artwork colors and copy or download the result.
Payments Globe
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.
Pixel Icon Library
Browse 300 retro pixel icons, filter by category, copy SVG or JSX, and download individual files or the complete ZIP.
Project Views
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.
Scoreboard
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.
Settings Panel
A card of labeled settings rows, with switches, text fields, and selects, and a Save button that shows saving, saved, and errors.
Solid Icon Library
Browse 24 solid icons, choose a color, copy SVG or React usage, and download individual SVGs.
Stats Cards
A row of stat cards, each with a label, a value, and an optional change badge, with loading and empty states.
SVG Icon Library
Search and filter an SVG collection, preview icons, copy their markup, and download individual files or a prepared ZIP.
Task Inbox
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.
What we check
See how each one is checked, and what each check does not cover.
Contrast in our theme
Every color pair in our theme contract is checked for contrast, in light and dark.
Themes from one color
Make a light and dark theme from one brand color. Each one is checked against the same 81 contrast pairs as ours.
Keyboard and screen readers
Popups and form controls handle focus and keys for you. Keyboard and screen reader behavior is tested.
Size budgets
Every component has a size budget, and the build fails over it.
From your terminal, or from your agent
The full guide says why the order matters, and how to add the registry by hand.
shadcn CLI
Add the registry and the theme once. Then add any component.
npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"npx shadcn@latest add @txbrendan/themenpx shadcn@latest add @txbrendan/buttonMCP server
Your agent can list components, read their rules, and get the theme. The agents guide covers llms.txt too.
claude mcp add --transport http txbrendan https://txbrendan.dev/mcpFree core, paid on top
App components stay free. All-Access adds every paid website component, block, and template.
All-Access Yearly
$129a year
Pay each year while you use it.
- Every paid website component, block, and template
- Updates while your plan is active
- Renews each year, cancel any time
All-Access Lifetime
$199once
Pay once and keep it.
- Every paid website component, block, and template
- Every update, for life
- One payment
All-Access Team
$499once
Lifetime access for your whole team.
- Everything in Lifetime
- For up to 10 people on one team
- One payment
Paid parts are not on sale yet. Prices are in US dollars, before any sales tax or VAT.