Technical precision, lit from above. Controls, overlays, data and agent components on warm stone neutrals, with glass only on what floats. Every token is prefixed litt-, so your app's theme stays untouched.
The Menu at the pointer: a right-click, Shift+F10 or a 500ms hold on touch. The same glass, rows, gliding highlight and solid submenus as the Menu, grown from the pointer's corner, and on a phone a submenu that replaces the list in place.
A working context menu: ProjectRowsDemo, the first demo on its page (https://littmd.vercel.app/#context-menu). It installs the components it uses.
A key that copies a command shown on LCD glass: the key sinks its 2px, the check draws in, and the command's glyphs decode back in a wave. A Device part.
A working copy button: InstallDemo, the first demo on its page (https://littmd.vercel.app/#copy-button). It installs the components it uses.
An easing shaped by hand, as a cubic Bézier: two round caps pull the curve from its start and its end, on a well that shows progress from -0.25 to 1.25. It writes the curve as CSS, says what it feels like in words, and a dot crosses a rail on it when you let go.
A working curve editor: ExitDemo, the first demo on its page (https://littmd.vercel.app/#curve-editor). It installs the components it uses.
A deploy dashboard as one screen: an app shell with a full-height sidebar, four number tiles, a chart of deploys per day and a table of recent deploys with its pagination. On a phone the sidebar becomes a top bar and its nav opens in the bottom sheet.
A day or a range from a month calendar, as YYYY-MM-DD strings. A field in the Select trigger's look opens the calendar in a popover, a bottom sheet on a phone, with optional presets. Day numbers in mono, the picked day filled with the foreground, today ringed, six weeks always, the full date-grid keyboard, and months that slide in from the side they come from.
A working date picker: LaunchDateDemo, the first demo on its page (https://littmd.vercel.app/#date-picker). It installs the components it uses.
One deploy as a screen: its commit and who started it, the status, the facts and a progress rail, then the changed files in a tree beside the build log with a line to drag, and each file's diff a press away. On a phone the two take turns.
An information card of labelled facts about one thing, such as a deployment or a client: rows with the labels in one column, or a grid with each label above its value. Values can be copied, a missing one says Not set, and a loading card keeps its height.
A working details: DeploymentDemo, the first demo on its page (https://littmd.vercel.app/#details). It installs the components it uses.
The one expressive moment. The panel is placed, not thrown: it rises a short distance and settles, and exits are quicker and never bounce.
A working dialog: PublishDemo, the first demo on its page (https://littmd.vercel.app/#dialog). It installs the components it uses.
A distribution drawn as stacks of dots, mirrored about a center line, so you see where most values fall. With a goal, dots inside it take a data hue and the rest stay gray; the median is a line, an outlier can be named, and the legend gives the shares in numbers.
A working dot plot: ReplySpeedDemo, the first demo on its page (https://littmd.vercel.app/#dot-plot). It installs the components it uses.
What a view says when it has nothing yet, is waiting or has failed. Empty offers one action, a skeleton keeps the content's exact size, and an error says what went wrong and how to retry.
A working empty and loading states: EmptyDemo, the first demo on its page (https://littmd.vercel.app/#states). It installs the components it uses.
What an agent changed in a codebase, to review before keeping it: the files added, modified, deleted and renamed, each with its lines added and removed said in words and figures, each opening to its diff, each kept or undone on its row, and Keep all and Undo all for the rest. Send keeps the view's accent fill: Keep all is a raised block unless accent is set on a screen with no composer.
A working file changes: TurnDemo, the first demo on its page (https://littmd.vercel.app/#file-changes). It installs the components it uses.
An area to drop files on or choose them from, that turns away the wrong type or size and says why, and rows that show each file uploading on a Progress rail, with Retry for one that failed.
A working file drop: UploadDemo, the first demo on its page (https://littmd.vercel.app/#file-drop). It installs the components it uses.
The pieces that turn fields into a page: settings sections, fieldsets, an error summary that takes focus and links to each field, and the action row.
A working form: StartProjectDemo, the first demo on its page (https://littmd.vercel.app/#form). It installs the components it uses.
Whether a whole screen stands alone or sits inside a page that has its own main landmark and h1. Inside Framed, a block's Main is a div and its headings drop one level, so the page keeps one main, one h1 and an outline that never skips.
How many went on at each step, as rows rather than a trapezoid: a thin 4px rail per step filled to its share of the first, in one data hue, with the label and a mono reading beside it, and between two steps a quiet line that says in words how many went on ("38% continued"). The header ends with the overall conversion. Static. Visited, signed up, activated, paid.
A working funnel: StoreDemo, the first demo on its page (https://littmd.vercel.app/#funnel). It installs the components it uses.
One value against a range on a semicircle of fine ticks, with the label, the figure and a caption in the opening. The ticks up to the value take the foreground or one data hue, and the last, longer tick marks the value. Static, like the meter.
A working gauge: CreditsDemo, the first demo on its page (https://littmd.vercel.app/#gauge). It installs the components it uses.
A sticky glass bar with a wordmark, a nav and your actions. The page blurs under it as it scrolls, and on a narrow bar the links fold behind a menu button instead of squeezing.
A working glass header: DesktopDemo, the first demo on its page (https://littmd.vercel.app/#header). It installs the components it uses.
The highlight that glides from row to row in the Menu and the Command menu.
Twelve weeks of growth as one screen: sign-ups by source as thin stacked columns with a legend and a week range that filter them, the funnel from visit to paid and retention by signup week. Each source keeps one data hue.
A dot matrix whose depth says how much: usage per day in a month, deploys per day over a year, mail per hour of the week. One data hue in four steps over an empty dot, row labels and totals in mono, a tooltip on hover, touch and focus, and a legend from less to more. A wide grid scrolls sideways inside its own box.
A working heatmap: UsageDemo, the first demo on its page (https://littmd.vercel.app/#heatmap). It installs the components it uses.
A preview of what a link points at, opened after the pointer rests on it or at once on keyboard focus, and kept while the pointer crosses into it. Floating glass that grows from the link on the responsive tier. A touch never opens it.
A working hover card: PersonDemo, the first demo on its page (https://littmd.vercel.app/#hover-card). It installs the components it uses.
99 solid icons and a status mark on one 16-unit grid: filled shapes with their details cut out, lines at 1.5, four keylines, in the text color.
A working icons: KeylinesDemo, the first demo on its page (https://littmd.vercel.app/#icons). It installs the components it uses.
A roomy, slightly rounded text field on the 32, 44 and 56 scale, with a label above and a hint or an error below. Focus and error turn the edge on the instant tier, and the box never moves.
A working input: StatesDemo, the first demo on its page (https://littmd.vercel.app/#input). It installs the components it uses.
Seven raised panels, one idea each: reply times as a dot plot, shortcuts as a bar list, a mail rule, a voice pad, a deploy timeline, a credits gauge and a heatmap of credits by day. Two columns when wide, one on a phone, and Create rule is the one accent fill.
A floating glass panel for tuning one thing live, built from litt's own controls: groups that fold, versions you save and go back to, a check against your rules with a Fits or Change row each, and Copy tokens.
A working inspector: ToastInspectorDemo, the first demo on its page (https://littmd.vercel.app/#inspector). It installs the components it uses.
The key cap for a real shortcut, such as ⌘K or esc. One chip everywhere, in Geist Mono.
A working kbd: KeysDemo, the first demo on its page (https://littmd.vercel.app/#kbd). It installs the components it uses.
Toggles which series a chart shows: a wrapping row of buttons, each a 12 by 4px hued rail swatch, the name and an optional mono reading, pressed while its series shows. Hidden turns the swatch to the grey track and the name to the subtle ink. The last shown series cannot be hidden.
A working legend: ChartDemo, the first demo on its page (https://littmd.vercel.app/#legend). It installs the components it uses.