# Altitude > Altitude is a design and HCI framework for React web applications built by agents, published on npm as `altitude-design` (MIT, React 18.2 or 19). Its one idea: height is the interface, and the ground is the record. Settled content sits on the ground, anything live rises above it, and anything waiting to receive (a field, a slot, a track) sinks below it. It ships components, design tokens, task patterns with workflow hooks, and the rules for using them. This file covers https://richlaconte.github.io/altitude/. It describes the repository's `main` branch as of 2026-11-02 (`package.json` version 0.6.1), and every link below is a plain Markdown, JSON or TypeScript file served from this site and rebuilt from `main` on each deploy. The published npm package can be older than `main`, so in a project that has it installed, the installed package is the authority: - Check `node_modules/altitude-design/package.json` for the version, and the installed declarations (`node_modules/altitude-design/dist/types/index.d.ts`) for what it exports. If a component or hook listed here isn't exported there, the installed version predates it: don't import it or imitate it; use what's installed, or upgrade the package. - If `node_modules/altitude-design/dist/guidance/README.md` exists, it holds the task guidance matched to the installed version, and `npm exec -- altitude patterns ""` finds the right contract. Older versions ship neither. Rules agents most often get wrong (each is explained in the linked guides): - Install `altitude-design`, import `altitude-design/altitude.css` once (or `altitude.no-fonts.css` to avoid the Google Fonts request), render one `AltitudeProvider` around the whole app, and render `Toaster` once inside it. Components are client components (`"use client"`). - Meaning lives in four tiers: sunk (an opening to fill), ground (settled, read it), raised (live, press it), floating (above the page). The eight levels exist for hover and press motion; never make two things mean different things by putting them one level apart. One thing at level 5, ever. - Push up, fill down: things you press are raised, things you fill are sunk. Never style an input as raised or a button as sunk. Only surfaces that do something lift on hover. - Never encode an amount in height. In charts the data is flat ink standing on the ground line: no shadows, gradients or 3D, no pie or donut charts, no dual axes, and colour does one job per chart. - Height never travels alone: every elevation signal also has a word, an icon, an ARIA state or a border, and status is never colour alone. - Pass data as it loads (`user?.name`, `rows={deploys}`); components draw their own loading imprint, so don't hand-write skeletons. - Don't disable a submit button to say a form is invalid; let it be pressed and list what's missing with `ErrorSummary`. Disable it only while the submission is in flight. - Use the tokens in `tokens.json`; don't invent colours, shadows or radii. Copy is sentence case, and buttons start with a verb and name the outcome ("Delete project", never "OK" or "Submit"). - Pending and success states must match the operation's real state. The application owns persistence, permissions, business rules and real undo; automated checks don't prove a screen is accessible. - Each component's guide says what it's for, how it uses height and what you provide; read it before using the component. - For a whole product task (settings, sign-in, members, billing, import), read the matching task pattern before composing components. For a new screen, start with Screen layout. ## Start here - [Design guide](https://richlaconte.github.io/altitude/project/README.md): the laws of the elevation model, content and honesty rules, colour, type, spacing, focus and states, and how to use the components. - [Elevation](https://richlaconte.github.io/altitude/project/Elevation.md): the model in full: the tiers and levels, how each level is drawn, and every signal height carries. - [Component API](https://richlaconte.github.io/altitude/project/components/index.d.ts.md): TypeScript declarations for every public component, hook and prop (large: search it for the name you need rather than reading it whole). - [Design tokens](https://richlaconte.github.io/altitude/project/tokens.json): colours for both schemes, the elevation ladder, spacing, radii, type and motion, as JSON. ## Guides - [Motion](https://richlaconte.github.io/altitude/project/Motion.md): read before animating anything; motion only travels along the height axis, and duration is distance travelled. - [Charts](https://richlaconte.github.io/altitude/project/Charts.md): read before drawing any chart, stat or meter; the form chooser, the colour rule and how each chart part is built. - [Mobile](https://richlaconte.github.io/altitude/project/Mobile.md): read before laying anything out for touch or a small screen. - [Theming](https://richlaconte.github.io/altitude/project/Theming.md): the daylight and nightfall schemes, custom accents, the data palette, and using Altitude's styles with shadcn/ui. - [Distinctiveness](https://richlaconte.github.io/altitude/project/Distinctiveness.md): read before composing a screen, so it doesn't read as generated. - [Fundamentals](https://richlaconte.github.io/altitude/project/Fundamentals.md): the established design laws generated interfaces break, and where Altitude answers each. - [Actions in place](https://richlaconte.github.io/altitude/project/ActionsInPlace.md): editing a value where it lives with `InlineEdit` and `EditRegion`, direct actions with real recovery, and targeted confirmation. ## Task patterns - [Framework entry](https://richlaconte.github.io/altitude/project/framework/README.md): how to choose a pattern from the person's task, and what the application must still supply. - [Principles](https://richlaconte.github.io/altitude/project/framework/principles.md): who owns what between Altitude and the application, and how to run the examples and verification. - [App skeleton](https://richlaconte.github.io/altitude/project/framework/app-skeleton.md): shell, page header, a filtered and paged table, a record in a sheet, and settings, composed correctly. - [Agent action](https://richlaconte.github.io/altitude/project/framework/patterns/agent-action.md): Let an agent propose, wait for approval, run, recover and leave provenance, with each state drawn as one reading. - [Assistant conversation](https://richlaconte.github.io/altitude/project/framework/patterns/assistant-conversation.md): Send, stream, stop, retry and recover in a conversation with an assistant, without losing the person's words or claiming an answer is complete before it is. - [Async collection](https://richlaconte.github.io/altitude/project/framework/patterns/async-collection.md): Find records while understanding loading, empty and failure states. - [Audit log](https://richlaconte.github.io/altitude/project/framework/patterns/audit-log.md): Find who did what, to which resource, when and from where, and export it. - [Auth](https://richlaconte.github.io/altitude/project/framework/patterns/auth.md): Sign in, sign up, verify, pass two-factor and reset a password without revealing whether an account exists. - [Billing](https://richlaconte.github.io/altitude/project/framework/patterns/billing.md): Show usage against limits as readings and change plan with the cost reviewed before it's confirmed. - [Consequential action](https://richlaconte.github.io/altitude/project/framework/patterns/consequential-action.md): Complete a consequential operation with appropriate review or real recovery. - [Developer settings](https://richlaconte.github.io/altitude/project/framework/patterns/developer-settings.md): Create, roll and revoke API keys, manage webhooks and connect integrations without treating them as ordinary forms. - [Edit record](https://richlaconte.github.io/altitude/project/framework/patterns/edit-record.md): Edit a durable record without losing work. - [Import](https://richlaconte.github.io/altitude/project/framework/patterns/import.md): Upload a file, map its columns, fix the rows with problems, review and import with a receipt. - [Members](https://richlaconte.github.io/altitude/project/framework/patterns/members.md): Invite people, change roles and remove access without misdrawing invitations or breaking ownership. - [Onboarding](https://richlaconte.github.io/altitude/project/framework/patterns/onboarding.md): Get someone new to value with a stamped setup checklist, empty states before tours, and what's new. - [Review and submit](https://richlaconte.github.io/altitude/project/framework/patterns/review-submit.md): Review and correct answers before final commitment. - [Screen layout](https://richlaconte.github.io/altitude/project/framework/patterns/screen-layout.md): Choose a screen's frame from the person's task, the one thing that leads and the one primary action, instead of inheriting a sidebar, a top bar and a grid of cards. - [Settings](https://richlaconte.github.io/altitude/project/framework/patterns/settings.md): Change how a workspace or account behaves, deciding per section whether changes apply now or save together. - [Sync](https://richlaconte.github.io/altitude/project/framework/patterns/sync.md): Say truthfully what has reached the server, through offline queues, conflicts and expiring sessions. ## Components: Foundations - [AltitudeProvider](https://richlaconte.github.io/altitude/project/components/AltitudeProvider/README.md): Sets the color scheme, accent and motion preference for everything inside it, and hosts the layers that rise above the page. - [Surface](https://richlaconte.github.io/altitude/project/components/Surface/README.md): The primitive every component is built from: a box placed on one rung of the elevation ladder. ## Components: Layout - [AppShell](https://richlaconte.github.io/altitude/project/components/AppShell/README.md): The frame of an app: a sidebar of destinations (grouped, collapsible), a top bar with search and the user's menu, and the page. - [Artifact](https://richlaconte.github.io/altitude/project/components/Artifact/README.md): What an agent is making (a document, a component, a page, a chart, a config) in its own pane beside the conversation, with its versions. - [Board](https://richlaconte.github.io/altitude/project/components/Board/README.md): Columns of cards you move between, a kanban: columns are receptacles that open when you carry a card, and the card floats in your hand until it lands. - [Resizable](https://richlaconte.github.io/altitude/project/components/Resizable/README.md): Panes side by side, with a divider you drag: an inbox, a ticket queue, a file browser, a record beside its list, an agent's chat beside its artifact. - [ScrollArea](https://richlaconte.github.io/altitude/project/components/ScrollArea/README.md): A scrolling region whose edges show where content continues, so it never looks finished when it isn't. - [Separator](https://richlaconte.github.io/altitude/project/components/Separator/README.md): A divider: between sections in a card, groups in a toolbar, items in a sidebar, or "or" between two ways to sign in. - [SortableList](https://richlaconte.github.io/altitude/project/components/SortableList/README.md): Reorders a list by picking items up: the item you hold floats in your hand, the slot it will land in opens, and it lands. - [ThreadList](https://richlaconte.github.io/altitude/project/components/ThreadList/README.md): Conversations with an assistant, beside the thread: new conversation, grouped by date, search, rename, delete, and for agents that run in the background, which ones are still working, which finished while you were away and which are waiting for you. ## Components: Navigation - [Accordion](https://richlaconte.github.io/altitude/project/components/Accordion/README.md): Reveals sections one at a time. - [Breadcrumb](https://richlaconte.github.io/altitude/project/components/Breadcrumb/README.md): Where you are in an app with routes: Settings › Members › Jane Doe, or Projects › Atlas › Issues. - [Drilldown](https://richlaconte.github.io/altitude/project/components/Drilldown/README.md): Navigates a hierarchy as a stack. - [Link](https://richlaconte.github.io/altitude/project/components/Link/README.md): Navigation: a link in prose, "Learn more" after a hint, "View all invoices →" at the end of a card, an external link to docs. - [PageHeader](https://richlaconte.github.io/altitude/project/components/PageHeader/README.md): The block every page opens with: breadcrumb, title, a line of description, the page's actions, and sometimes tabs. - [Pagination](https://richlaconte.github.io/altitude/project/components/Pagination/README.md): Moves through pages of a collection the server pages: invoices, members, audit events. - [Stepper](https://richlaconte.github.io/altitude/project/components/Stepper/README.md): Shows where you are in a process of a few steps: done steps settle into the record, the current one stands raised, and steps to come are imprints. - [Tabs](https://richlaconte.github.io/altitude/project/components/Tabs/README.md): Switches between views of the same content. - [Tree](https://richlaconte.github.io/altitude/project/components/Tree/README.md): A hierarchy you see all at once and change in place: rename a node (F2), add a sibling or a child, carry a node to a new place (Space, or drag), collapse and expand, remove. ## Components: Inputs - [Checkbox](https://richlaconte.github.io/altitude/project/components/Checkbox/README.md): Toggles one independent option. - [Checklist](https://richlaconte.github.io/altitude/project/components/Checklist/README.md): A list you write into, one line per item: to-dos, acceptance criteria, a packing list, a runbook's steps. - [ColorPicker](https://richlaconte.github.io/altitude/project/components/ColorPicker/README.md): A brand colour for a white-label portal, a label or tag colour, a calendar colour. - [Combobox](https://richlaconte.github.io/altitude/project/components/Combobox/README.md): An editable Select: type to narrow a long list, then choose. - [DatePicker](https://richlaconte.github.io/altitude/project/components/DatePicker/README.md): Choose a date in a field, by typing it or by picking it from a month calendar. - [DropZone](https://richlaconte.github.io/altitude/project/components/DropZone/README.md): A receptacle that opens only when there's something to receive: flush at rest, sunk while a file is in flight, deeper under the pointer. - [EditRegion](https://richlaconte.github.io/altitude/project/components/EditRegion/README.md): Edit several fields of one record where the record is shown, and save them together as one write. - [Field](https://richlaconte.github.io/altitude/project/components/Field/README.md): Pairs one control with its label, an optional hint and an error message that emerges beneath it. - [InlineEdit](https://richlaconte.github.io/altitude/project/components/InlineEdit/README.md): Edit one value where its committed value already appears: by default a single-line string, a paragraph with `multiline`, or any value with a custom `editor`. - [Input](https://richlaconte.github.io/altitude/project/components/Input/README.md): A single-line text field. - [InputOTP](https://richlaconte.github.io/altitude/project/components/InputOTP/README.md): A one-time code: two-factor sign-in, email verification, device approval. - [NumberInput](https://richlaconte.github.io/altitude/project/components/NumberInput/README.md): A number field: seats on a plan, rate limits, retention days, prices, quantities. - [PasswordInput](https://richlaconte.github.io/altitude/project/components/PasswordInput/README.md): A password field: signing in, signing up, a reset, "change password" in settings. - [PermissionMatrix](https://richlaconte.github.io/altitude/project/components/PermissionMatrix/README.md): Roles against permissions: "Admins can manage billing, Members can invite, Viewers can only read". - [PlanPicker](https://richlaconte.github.io/altitude/project/components/PlanPicker/README.md): Choose a plan (Free, Pro, Business) in sign-up, upgrade and downgrade flows, with a Monthly / Annually switch, prices, and what each plan includes. - [PromptInput](https://richlaconte.github.io/altitude/project/components/PromptInput/README.md): Where a person writes to an assistant or agent: a textarea that grows, attachments as chips, optional tools or a model picker, Send, and Stop while a response is generating. - [RadioGroup](https://richlaconte.github.io/altitude/project/components/RadioGroup/README.md): Chooses exactly one option. - [SaveBar](https://richlaconte.github.io/altitude/project/components/SaveBar/README.md): Unsaved changes on a settings page or a long record form, held above the page until they're saved or discarded. - [SecretField](https://richlaconte.github.io/altitude/project/components/SecretField/README.md): A key or token: an API key, a webhook signing secret, a personal access token. - [Select](https://richlaconte.github.io/altitude/project/components/Select/README.md): Chooses one value from a list: an opening you fill by choosing, with the list rising from its edge at level 3. - [Slider](https://richlaconte.github.io/altitude/project/components/Slider/README.md): Picks a number from a range by dragging a raised thumb along a trench. - [Suggestions](https://richlaconte.github.io/altitude/project/components/Suggestions/README.md): Prompts to start from or follow up with. - [Switch](https://richlaconte.github.io/altitude/project/components/Switch/README.md): Turns a setting on or off immediately: a raised thumb riding in a trench. - [TagInput](https://richlaconte.github.io/altitude/project/components/TagInput/README.md): Edit a set of short values in one field: labels on an issue, recipients, skills, keywords, allowed domains. - [TimeInput](https://richlaconte.github.io/altitude/project/components/TimeInput/README.md): A time of day: when a scheduled report is sent, quiet hours, business hours, a maintenance window. ## Components: Actions - [Button](https://richlaconte.github.io/altitude/project/components/Button/README.md): Triggers an action. - [CopyButton](https://richlaconte.github.io/altitude/project/components/CopyButton/README.md): Copies a value and says so: API keys, install commands, invite links, IDs, webhook URLs. - [FeatureGate](https://richlaconte.github.io/altitude/project/components/FeatureGate/README.md): A feature that needs another plan, shown to people on a plan that doesn't include it: "Export to CSV · Business", "SAML SSO · Enterprise", a menu item with a lock. - [HoldButton](https://richlaconte.github.io/altitude/project/components/HoldButton/README.md): Commits a consequential action by pushing it through the ground: hold until it sinks into a trench. - [SplitButton](https://richlaconte.github.io/altitude/project/components/SplitButton/README.md): One action with its alternatives: "Save changes ▾" (Save as draft, Save and close), "Merge ▾" (squash, rebase), "Deploy ▾" (to staging, to production). - [Toggle](https://richlaconte.github.io/altitude/project/components/Toggle/README.md): Buttons that stay on: bold and italic in a formatting bar, a list/board/calendar view switch, "Show archived", thumbs up or down on an AI answer. - [Toolbar](https://richlaconte.github.io/altitude/project/components/Toolbar/README.md): A row of small actions with one tab stop: a formatting bar, a table's tools, a comment composer, a canvas's tools. ## Components: Display - [AILabel](https://richlaconte.github.io/altitude/project/components/AILabel/README.md): Says when content was generated or changed by AI, and explains how when asked: for trust, and under transparency rules such as the EU AI Act. - [Alert](https://richlaconte.github.io/altitude/project/components/Alert/README.md): Tells the person something about the current context. - [Avatar](https://richlaconte.github.io/altitude/project/components/Avatar/README.md): Represents a person. - [Await](https://richlaconte.github.io/altitude/project/components/Await/README.md): Components that bring their own loading state. - [Badge](https://richlaconte.github.io/altitude/project/components/Badge/README.md): Labels status or metadata. - [Card](https://richlaconte.github.io/altitude/project/components/Card/README.md): A raised surface that groups related content; it moves only if the whole card is one action. - [CodeBlock](https://richlaconte.github.io/altitude/project/components/CodeBlock/README.md): Code to read and copy: install commands, API examples in several languages, webhook payloads, config, code an agent wrote. - [CommentThread](https://richlaconte.github.io/altitude/project/components/CommentThread/README.md): Comments on a task, a document, a design or a deal: write with @mentions, post, retry a failed post, delete your own, and resolve the thread. - [Conversation](https://richlaconte.github.io/altitude/project/components/Conversation/README.md): The thread between a person and an assistant: their messages, the assistant's answers (often streamed), copy, regenerate, feedback, versions, and "Jump to latest" once you've scrolled up. - [DataGrid](https://richlaconte.github.io/altitude/project/components/DataGrid/README.md): A table whose cells you edit one by one, with spreadsheet keys: arrows to move, type to replace, Enter or F2 to edit, Enter and Tab to save and move on, Escape to back out, a block pasted from a spreadsheet. - [DiffView](https://richlaconte.github.io/altitude/project/components/DiffView/README.md): What changed between two versions: version history, audit-log detail ("Plan: Pro → Business"), config changes before a deploy, and edits an AI proposes to a document or record. - [EmptyState](https://richlaconte.github.io/altitude/project/components/EmptyState/README.md): What a list, board, search or page shows when it has nothing to show: a statement of what's empty, why, and one obvious next step. - [FilterBar](https://richlaconte.github.io/altitude/project/components/FilterBar/README.md): Build and change a query as a row of conditions, each edited in place: “Status is In review”, “Assignee is Mara Quist”, “Updated between 1 Oct and 20 Oct”. - [FormattedNumber](https://richlaconte.github.io/altitude/project/components/FormattedNumber/README.md): A number in a sentence or a table cell, formatted once: invoices, usage ("4.5 GB of 10 GB"), latency ("128 ms"), seats, error rates. - [InlineCitation](https://richlaconte.github.io/altitude/project/components/InlineCitation/README.md): Numbered source markers in a grounded answer ("…renews monthly [2]"), with a preview of each source on hover or focus, and `Sources`, the list at the end. - [ItemGroup](https://richlaconte.github.io/altitude/project/components/ItemGroup/README.md): A list of records shown as slats (media, title, description, actions), changed in the list itself: edit a slat in place, add one at the end, reorder by picking one up, remove one with real recovery. - [Kbd](https://richlaconte.github.io/altitude/project/components/Kbd/README.md): Shows a keyboard key as a keycap: a tiny slab with a 2px wall that presses down when the person presses that key. - [Markdown](https://richlaconte.github.io/altitude/project/components/Markdown/README.md): An answer's Markdown, set as Altitude prose, as it streams. - [Pile](https://richlaconte.github.io/altitude/project/components/Pile/README.md): Shows a group of items as a stack. - [Progress](https://richlaconte.github.io/altitude/project/components/Progress/README.md): Shows how far along a task is: a raised fill rising out of a trench. - [PropertyList](https://richlaconte.github.io/altitude/project/components/PropertyList/README.md): One record's properties as label–value pairs, each editable where it sits: an issue's sidebar (status, assignee, priority, estimate), a customer's details, a settings summary, a “Check your answers” page. - [RelativeTime](https://richlaconte.github.io/altitude/project/components/RelativeTime/README.md): A moment shown as "3 minutes ago", for activity feeds, audit logs, comments and "last edited". - [RemovalReceipt](https://richlaconte.github.io/altitude/project/components/RemovalReceipt/README.md): The slot of an item that can leave its list: a file archived, a webhook removed, an invitation revoked. - [SavedViews](https://richlaconte.github.io/altitude/project/components/SavedViews/README.md): Named combinations of a filter, a sort and the columns, kept as tabs above a table: "My open deals", "Enterprise churn risk", "Unassigned this week". - [Schedule](https://richlaconte.github.io/altitude/project/components/Schedule/README.md): A day or week of time whose events you handle directly: drag across empty time to create one, carry an event to move it, pull its bottom edge to change its length, rename it in place. - [Skeleton](https://richlaconte.github.io/altitude/project/components/Skeleton/README.md): Stands in for loading content as an imprint: the shape of what's coming, pressed into the page. - [SyncIndicator](https://richlaconte.github.io/altitude/project/components/SyncIndicator/README.md): One honest answer to "is my work saved?", for autosaving editors, optimistic UIs and local-first apps: "Saved", "Saving…", "Offline · 3 changes waiting", "Couldn't sync", "1 conflict to resolve". - [Table](https://richlaconte.github.io/altitude/project/components/Table/README.md): Rows and columns of records: the rows sit on the ground with `line` dividers, and only the ones that are selected, matching, in hand or under your pointer rise. - [Terminal](https://richlaconte.github.io/altitude/project/components/Terminal/README.md): A command's output as it runs, with how it ended. - [Timeline](https://richlaconte.github.io/altitude/project/components/Timeline/README.md): Events in order: activity on a record ("Maya changed status to Done"), workspace activity, version history, webhook delivery attempts, an order's history, background agent runs. - [Trace](https://richlaconte.github.io/altitude/project/components/Trace/README.md): The steps an agent takes (searching, calling tools, reasoning, waiting for approval), so people can see what it did, what it's doing, what it plans, and where it failed. ## Components: Feedback - [AgentFleet](https://richlaconte.github.io/altitude/project/components/AgentFleet/README.md): Every agent working on one job, as a roster: grouped by what they need from you (needs you, working, done), each row saying the agent's state in words, what it's doing in one line, how long it has waited or run, where it is in its plan and what it has spent, with warnings for trouble that's coming (two agents changing one file, an agent making no progress). - [AgentRequests](https://richlaconte.github.io/altitude/project/components/AgentRequests/README.md): Every decision your agents are waiting on, in one queue: approvals, questions, reviews and failures, oldest first, each answerable where it is. - [Confirmation](https://richlaconte.github.io/altitude/project/components/Confirmation/README.md): Approve or reject an action an agent proposes, before anything happens: "Send 214 emails to Pro customers", "Delete 3 stale branches". - [Question](https://richlaconte.github.io/altitude/project/components/Question/README.md): An agent asks the person something before it carries on: "Which environment should I deploy to?", "Keep the old column or drop it?". ## Components: Overlays - [CommandPalette](https://richlaconte.github.io/altitude/project/components/CommandPalette/README.md): Finds and runs anything in the product from one field: the summit, at level 5, opened with ⌘K or Ctrl+K. - [ContextMenu](https://richlaconte.github.io/altitude/project/components/ContextMenu/README.md): Actions on a thing (a file, a row, a board card, a tree node, a canvas object), opened where you right-click or long-press it, or at it with Shift+F10 or the Menu key. - [Dialog](https://richlaconte.github.io/altitude/project/components/Dialog/README.md): Asks for a decision or a focused task at level 5, the summit. - [DropdownMenu](https://richlaconte.github.io/altitude/project/components/DropdownMenu/README.md): Lists actions for a trigger; one highlight glides between items, which arrive in quick sequence. - [HoverCard](https://richlaconte.github.io/altitude/project/components/HoverCard/README.md): A richer preview of what a link or a face points to: who someone is, what a project holds. - [NotificationCenter](https://richlaconte.github.io/altitude/project/components/NotificationCenter/README.md): An inbox of what happened: mentions, assignments, approvals waiting, failed jobs, billing notices. - [Popover](https://richlaconte.github.io/altitude/project/components/Popover/README.md): Shows rich, interactive content anchored to a trigger, floating at level 3. - [Sheet](https://richlaconte.github.io/altitude/project/components/Sheet/README.md): A large panel laid over the page at level 4, anchored to an edge, for a task that needs more room than a popover and less commitment than a page. - [Toaster](https://richlaconte.github.io/altitude/project/components/Toaster/README.md): Confirms what just happened, in a depth stack: the newest toast floats in front at level 4 and older ones sink behind it. - [Tooltip](https://richlaconte.github.io/altitude/project/components/Tooltip/README.md): Names an icon-only control or adds a short hint; it floats at level 3 above its anchor. - [Tour](https://richlaconte.github.io/altitude/project/components/Tour/README.md): A few steps pointing at parts of the interface, for onboarding or a feature launch: "Projects moved here", "New: filter by owner". ## Components: Charts - [AgentLanes](https://richlaconte.github.io/altitude/project/components/AgentLanes/README.md): Where each agent's time went, one lane per agent on a shared clock: working, waiting on you, waiting on another agent, failed. - [AreaChart](https://richlaconte.github.io/altitude/project/components/AreaChart/README.md): A total over time and the parts that make it up (requests by region, storage by type), or a single volume over time. - [BarChart](https://richlaconte.github.io/altitude/project/components/BarChart/README.md): Amounts compared across categories or periods: deploys per team, signups per month, cost per region. - [BarList](https://richlaconte.github.io/altitude/project/components/BarList/README.md): Top pages, top referrers, top customers by spend: a ranked list where each row is its own bar, the label is readable at any length, and the exact value sits at the end. - [ChartBrush](https://richlaconte.github.io/altitude/project/components/ChartBrush/README.md): Picks a time window on an overview of the whole series, under the plot: look at a year and read a fortnight without losing where you are (overview + detail; Cockburn, Karlson & Bederson, 2009). - [ChartContainer](https://richlaconte.github.io/altitude/project/components/ChartContainer/README.md): The frame every chart shares. - [ChartLegend](https://richlaconte.github.io/altitude/project/components/ChartLegend/README.md): Names each series, and optionally lets people hide and show series. - [ChartReference](https://richlaconte.github.io/altitude/project/components/ChartReference/README.md): Reading a chart against something: an SLO target, a budget, a normal range, the average, the day you shipped v2. - [ChartTooltip](https://richlaconte.github.io/altitude/project/components/ChartTooltip/README.md): Reading exact values off a chart. - [DotPlot](https://richlaconte.github.io/altitude/project/components/DotPlot/README.md): Values compared across categories where zero isn't part of the story: ten services' p95, all between 180 and 240 ms; scores by team with their spread; last quarter against this one. - [Heatmap](https://richlaconte.github.io/altitude/project/components/Heatmap/README.md): A value per cell across two dimensions: load by hour and weekday, error rate by service and region, or activity by day over a year (`variant="calendar"`, as in GitHub's contributions). - [LineChart](https://richlaconte.github.io/altitude/project/components/LineChart/README.md): Change over time: latency over a day, revenue over a year, one series or a few compared. - [Meter](https://richlaconte.github.io/altitude/project/components/Meter/README.md): Where a reading sits in a known range: storage used of a quota, seats used of a plan, CPU, a score. - [ScatterChart](https://richlaconte.github.io/altitude/project/components/ScatterChart/README.md): Two measures per record, to see whether they move together and to spot the ones that don't: response time against payload per endpoint, spend against seats per customer. - [Sparkline](https://richlaconte.github.io/altitude/project/components/Sparkline/README.md): A trend the size of a word: the last 30 days of a metric in a `DataTable` cell, a `PropertyList` value, a `Stat`, or a sentence. - [Stat](https://richlaconte.github.io/altitude/project/components/Stat/README.md): The tile at the top of a dashboard: a label, a big number, how it changed and against what ("Active users · 12,480 · Up 8% vs last month: 11,556"). ## Agent setup - [Agent setup](https://richlaconte.github.io/altitude/docs/framework/AGENT-SETUP.md): connecting Codex or Claude Code to the installed guidance with `npx altitude init`, and removing it. - [Release notes](https://richlaconte.github.io/altitude/docs/framework/RELEASE-NOTES.md): what changed in the framework, and migration notes. ## Optional - [Full text](https://richlaconte.github.io/altitude/llms-full.txt): every guide and task pattern above in one file, for loading all of it at once (large). - [Research](https://richlaconte.github.io/altitude/project/Research.md): the numbered experiments and measurements behind each rule (very large). - [Contributing](https://richlaconte.github.io/altitude/CONTRIBUTING.md): how work is organised, and what makes a useful bug report or feature request. - [Agent notes for the repository](https://richlaconte.github.io/altitude/AGENTS.md): for agents changing Altitude itself or filing issues against it. - [Storybook](https://richlaconte.github.io/altitude/storybook/): every component with a live preview in both schemes (HTML, for people).