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.
One image of a set at the size of the screen, on the canvas, opened from a Media. Opening is the view's expressive moment; arrow keys, Previous and Next or a swipe move through the set, and Esc, Close or a click around the image closes it.
Airy project rows and raised cards that arrive in one staggered cascade. Filtering and inserting stay responsive, and hover never moves anything.
The generated cover art used by project rows and cards.
Optional. Loads Geist at 400, 500 and 600 and Geist Mono at 400, and applies litt's page defaults: headings and bold at the title weight, table headers at the label weight, the control radius on native controls and the litt focus ring.
litt.md's colors, type, space, shape, depth and motion as CSS variables, Tailwind names and the litt-glass, litt-raised, litt-trim, litt-lit and litt-grain classes. Every name starts with litt, so none of it touches your own.
A build's or a deploy's output as it arrives, on the code block's surface: numbered, timed lines, warnings and errors in their status color with a mark and a hidden word, following the newest line until you scroll up to read.
A working log view: BuildDemo, the first demo on its page (https://littmd.vercel.app/#log-view). It installs the components it uses.
One picture in a frame with a fixed shape, so the page never jumps when it arrives: still surface-2 while it loads, a fade in on the instant tier, and its words when it fails. A hairline lies over the image, and with onOpen the frame is a button that opens a Lightbox.
A glass dropdown with one highlight that glides from row to row. It grows from its trigger and travels from the side it really opens on.
A working menu: ProjectMenu, the first demo on its page (https://littmd.vercel.app/#menu). It installs the components it uses.
A chat between a person and an agent. The agent's words sit on the page with no bubble, and the person's turn is a raised bubble on the right. MessageText styles what a markdown renderer produces, with no library: paragraphs, lists, accent links, inline code, a quiet pre and quotes with no rail. MessageActions puts Copy and Retry under a finished answer, and a turn that stopped says so with a Retry button. The conversation scrolls on its own in a column up to 48rem, follows the newest line while an answer streams, and offers Jump to latest once you scroll up.
A working message: ThreadDemo, the first demo on its page (https://littmd.vercel.app/#message). It installs the components it uses.
The motion engine the components share. Hooks for the instant, responsive and expressive tiers, exits, travel and stagger, and the compact and coarse device signals, all reading litt's tokens.
A labelled number with − and + inside the field's end: steps by the arrow keys, a press or a hold, reads what is typed in the page's locale, keeps it between its bounds and on its step, and shows it formatted with Intl.NumberFormat.
A working number field: SeatsDemo, the first demo on its page (https://littmd.vercel.app/#number-field). It installs the components it uses.
One option of a product (a size, a frame, a color) as native radios with a visible legend that names the pick. Words take the segmented track, colors and images take chips with a check in black or white. A sold-out value stays pickable and says so in words.
Two values set at once on one surface, like a reply's tone against its length. A well with a static dot grid, a round thumb with dashed crosshairs, a dashed circle for the default, and a tooltip that says the value in words. It is the Slider in two dimensions, in the foreground and never the accent.
A working pad: VoiceDemo, the first demo on its page (https://littmd.vercel.app/#pad). It installs the components it uses.
Previous and next for a table that shows one page of many. The range comes first, in words and mono, like 21 to 40 of 143. Page numbers show only when the row is wide enough, and the buttons at either end disable.
A working pagination: DeploysDemo, the first demo on its page (https://littmd.vercel.app/#pagination). It installs the components it uses.
An agent's steps for a task, ticked off as it works: the label and a mono count ("3 of 7") over a 4px rail in the foreground, then an ordered list of steps, each with a 16px status mark. The running step is a half-filled circle that never spins, a done step steps its color back and is never struck through, a failed step has a danger x and says Failed, a skipped one is a dashed circle that says Skipped, and any step can carry a detail line. A polite live region says which step started and when the plan is done. Statuses swap at once, and a step added later fades in.
A working plan: MoveDemo, the first demo on its page (https://littmd.vercel.app/#plan). It installs the components it uses.
A floating glass panel for a small form, a share link or a detail card. It grows from its trigger's corner, slides in from the side it really opens on, and flips near an edge.
A working popover: ShareDemo, the first demo on its page (https://littmd.vercel.app/#popover). It installs the components it uses.
One amount at the title weight with tabular figures, formatted from Shopify's MoneyV2 shape (an amount and a currency code) in the page's locale. A sale strikes the old price through with hidden words, and can add a neutral tag with the saving. Never red, never the accent.
One product's page for a store: the pictures beside the details (a carousel on a phone), the title, the price, the options with sold-out picks said in words, the quantity and Add to cart as the one accent fill, the rest in an accordion, and the cart as a sheet. Every picture opens a lightbox.
One product in a grid: an inset 4/5 cover, the name and its price (From when the variants differ), as one link to its page. No buy button and no accent. Also the Product type and priceRange, findVariant, defaultPicks and optionsFor for a product page.
A thin rail for work that is happening now, such as an upload or an import. It fills on the instant tier, ends done or failed in words, and with no value yet stays empty: nothing sweeps, pulses or shimmers.
A working progress: UploadDemo, the first demo on its page (https://littmd.vercel.app/#progress). It installs the components it uses.
A studio's projects as one screen: a title with the count, a toolbar with the status filters, a search, a list or grid switch and New project, then the rows or the cards. Every empty case says why and offers the way back.
One quantity over time as a barcode of thin bars, with labelled segments and their shares in a tray above, and a range you brush by hand: drag across the bars, drag either edge, or drag the whole span. The edges follow the pointer one to one and settle on a bar or a segment start; the segment that matches the range is raised. The total of what is brushed rolls as you go, its last group of digits in the quiet ink. In fun mode the span can be thrown and the bars it sweeps rise and settle.
A working range chart: VisitorsDemo, the first demo on its page (https://littmd.vercel.app/#range-chart). It installs the components it uses.
Panels side by side or stacked, with a hairline between each two that follows the pointer one to one. Each panel keeps between its smallest and largest size, the arrow keys move the line, a double click puts it back, and autoSaveId keeps the layout.
A working resizable: SplitDemo, the first demo on its page (https://littmd.vercel.app/#resizable). It installs the components it uses.
A figure whose changed digits roll to the new value: each leaves half of the travel token and fades as the new one comes in from the other side, on the responsive tier, up when the value rises and down when it falls. Any Intl.NumberFormat format, tabular figures, the whole figure as text for screen readers. The first render and reduced motion just show the number.
A working rolling number: DeploysDemo, the first demo on its page (https://littmd.vercel.app/#rolling-number). It installs the components it uses.
Conditions built from rows: a field, an operator and a value, joined by And or Or, grouped and nested, added, removed and reordered by a handle. A row picked up by its handle rises into a raised block and the others make room; the new order is committed once it has settled. Space lifts a row for the arrow keys.
A working rule builder: ExpensePolicyDemo, the first demo on its page (https://littmd.vercel.app/#rule-builder). It installs the components it uses.
An agent's run as a card: what it is making, how far it has got in words (Step 2 of 3) and in a ring, and its steps. Hide folds it into a raised block you press to open again; the ring travels between the two while the words glide, and the height snaps. A polite status keeps saying the step while the card is folded.
A working run card: WorldDemo, the first demo on its page (https://littmd.vercel.app/#run-card). It installs the components it uses.
An agent's runs for a sidebar or an inbox: each run's title, its status in words and a mark (running, needs you, done, failed, stopped), where it has got and when it last changed, the runs that need you first, the selected run as a raised block that glides from row to row, a filter by status with counts, and Stop or Archive on a row.
A working run list: SidebarDemo, the first demo on its page (https://littmd.vercel.app/#run-list). It installs the components it uses.
A region that scrolls inside the page: native scrolling with litt's 6px thumb, shown while it scrolls or a mouse is over it, and a hairline on any edge with more beyond it. While it scrolls it is a labelled Tab stop with an inset focus ring. No gradient fades.
A working scroll area: DeployLogDemo, the first demo on its page (https://littmd.vercel.app/#scroll-area). It installs the components it uses.
A short choice of two to five options in one track. The selected surface glides to your pick, and the control is built from native radios, so the arrow keys work.
A working segmented control: ThemeDemo, the first demo on its page (https://littmd.vercel.app/#segmented). It installs the components it uses.
One value from a short list. The trigger looks like the input, and the list is the menu's glass panel with 44px rows, a gliding highlight and a check on the current option. It stays anchored on phones.
A working select: AccountFormDemo, the first demo on its page (https://littmd.vercel.app/#select). It installs the components it uses.