# crisp-ui

> Patterns for dashboards where people depend on a job and need to hear how it is going. Open code, installed with the shadcn CLI.

crisp-ui is a small set of UI patterns for internal-tool dashboards, such as a status headline, who gets notified, confirm-then-send, and an unsaved-changes bar. It is a shadcn registry: the source is installed into your project and you own it. There is no package to depend on.

## For coding agents

- Install an item with `npx shadcn@latest add https://realgood.site/r/<item>.json`, for example `status-notify`. Items that depend on other items install those too.
- `https://realgood.site/r/<item>.json` is the machine-readable item: its files, npm dependencies and registry dependencies. Read it, or the installed files, before writing code against an item.
- Every docs page has a Markdown twin: add `.md` to its URL, or request the page with `Accept: text/markdown`. The links below are the twins.
- https://realgood.site/llms-full.txt is every page below in one file.
- The patterns are UI only. They do not enforce access control, permissions or compliance; the handlers you pass in and your backend must do that.

## Guides

- [Introduction](https://realgood.site/docs.md): Components for dashboards where people depend on a job and need to hear how it is going. Open code, installed with the shadcn CLI.
- [Installation](https://realgood.site/docs/installation.md): Add a crisp-ui item to a project that already uses shadcn/ui.
- [The story: See, Decide, Act, Confirm, Record](https://realgood.site/docs/story.md): A recommended order for the screens of an internal tool, and which crisp-ui pattern belongs to each step.
- [Build the whole arc in one prompt](https://realgood.site/docs/build-the-arc.md): One prompt that makes a coding agent install the smallest pattern from each stage and wire See, Decide, Act, Confirm and Record into one workflow screen on your own data.
- [Use with AI agents](https://realgood.site/docs/ai.md): How to point a coding agent at crisp-ui, and what it can and cannot do for you.

## Patterns

- [Components](https://realgood.site/docs/components.md): Every crisp-ui pattern, grouped by the stage of the story it belongs to.
- [Status strip](https://realgood.site/docs/components/status-strip.md): A headline number, a segmented bar and a legend for the stages of one whole, with a slot for the action that acts on it.
- [Data table](https://realgood.site/docs/components/data-table.md): A table of rows with named saved views and live counts, row selection, an action slot that receives the selected rows, and stale, empty, no-match and error states.
- [Recipient roster](https://realgood.site/docs/components/recipient-roster.md): One list of people with a switch per channel, per-channel limits, paste-to-add and inline validation.
- [Alert rules](https://realgood.site/docs/components/alert-rules.md): An editor for reminder cadence, escalation and quiet hours, with a plain-language summary under each rule. It edits the saved rule; it does not send or schedule anything.
- [Save bar](https://realgood.site/docs/components/save-bar.md): An "Unsaved changes" bar with Discard and Save that only renders when there is something to save.
- [Approval step](https://realgood.site/docs/components/approval-step.md): A sign-off with a stated reason and meaning. Shows who must sign and who has, and gives the one person who can still decide Approve and Reject behind a confirm.
- [Confirm send](https://realgood.site/docs/components/confirm-send.md): Click, confirm with the recipient count, send, then a status line. Can be blocked with a reason.
- [Notify envelope](https://realgood.site/docs/components/notify-envelope.md): Pure helpers to build a roster from per-channel lists, compare lists, and build a one-message To and Cc envelope.
- [Quiz](https://realgood.site/docs/components/quiz.md): Tap an answer and see at once whether it was right, and which option was. One attempt per question, then a score and Try again.
- [Audit timeline](https://realgood.site/docs/components/audit-timeline.md): A read-only "who did what, when, and why" list of events your server has recorded, grouped by day, with honest empty, error and stale states.
- [Status and notify](https://realgood.site/docs/components/status-notify.md): A status headline, a confirm-then-send action, and one roster of who hears about it.
- [Calibration desk](https://realgood.site/docs/components/calibration-desk.md): One worked example of the whole arc on one screen. Gauges due for calibration, a rule, a two-role approval, a confirm-then-send to owners, and an audit timeline, handing off to one another.