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.
Sections that open in place, split by hairlines: 56px triggers in headings with a chevron that turns half a turn, one section open at a time or several. The height snaps, the content fades in and drops a little, and the rows below move by transform, so the page never jumps.
A working accordion: StudioQuestionsDemo, the first demo on its page (https://littmd.vercel.app/#accordion). It installs the components it uses.
A glass bar that floats at the bottom of the view while rows or cards are selected: the count in words, the actions as small buttons and Clear. A toolbar with one Tab stop and the arrow keys inside; Esc clears.
A working action bar: SelectDemo, the first demo on its page (https://littmd.vercel.app/#action-bar). It installs the components it uses.
A studio's activity as one screen: a filter by kind, then the events grouped by day, each one sentence with who and what in the foreground and the time in the mono. A deploy says how it ended in a tag, and Show earlier adds the day before below.
A chat with an agent as one screen, from the first word to the deploy: the conversation, the thinking, a plan, a run of tool calls, an approval, the answer with its code and the composer. A scripted run plays every state without a model and waits for you at the approval.
What an agent is doing, in hardware: a seven-segment chase for thinking, a tuner for searching, stereo meters for reading, a dot matrix for reasoning, step lights for running and tape reels for writing, each moving only while tokens arrive. A Device part.
A working agent indicator: SixDemo, the first demo on its page (https://littmd.vercel.app/#agent-indicator). It installs the components it uses.
The frame around an app's pages: a 240px sidebar that runs the full height of the page with its links kept in view, and a main area. On a phone the sidebar goes, a glass top bar holds a menu button, and the nav opens in the bottom sheet.
A working app shell: ShellDemo, the first demo on its page (https://littmd.vercel.app/#app-shell). It installs the components it uses.
A round mark for a person, a client or a company, in three sizes: a photo, or initials on the tint of one of the five data hues, picked from the name so the same name always gets the same color. A group overlaps them with a ring in the surface they sit on, and counts the rest in a +N pill.
A working avatar: InboxDemo, the first demo on its page (https://littmd.vercel.app/#avatar). It installs the components it uses.
A ranked list where each row carries a thin bar for its share: top pages, most-used shortcuts, busiest repos. An optional lead, a label, a 4px rail, a mono value and a change in words. The bars line up across rows, and under 28rem the bar moves under the label.
A working bar list: ShortcutsDemo, the first demo on its page (https://littmd.vercel.app/#bar-list). It installs the components it uses.
Where a page sits, with a slash between the levels and the current page in the foreground. Past four levels the middle folds into a round ghost button that opens the Menu, and phones show the last two levels. No motion of its own.
A working breadcrumb: SettingsTrailDemo, the first demo on its page (https://littmd.vercel.app/#breadcrumb). It installs the components it uses.
One whole split into its parts: a thin split rail with a segment per part in the data hues, then a row per part with its own 4px rail, a label and a mono reading, or a small legend for a tile. Storage by file type, credits by feature.
A working breakdown: StorageDemo, the first demo on its page (https://littmd.vercel.app/#breakdown). It installs the components it uses.
Roomy and slightly rounded, with the label at the title weight, in primary, secondary and ghost, on the shared control scale. Hover and press are instant and never move the box.
A working button: VariantsDemo, the first demo on its page (https://littmd.vercel.app/#button). It installs the components it uses.
An inline note in the page flow: a tip, a heads-up or a result to act on. A raised surface with a 16px icon, a title, a line of detail, and an optional action and close button. Only the icon takes the status color, and a hidden word before the title says the same thing, so there is never a rail, a tinted fill or a colored border. It measures its own width and drops the action below the text under 28rem.
A working callout: TipDemo, the first demo on its page (https://littmd.vercel.app/#callout). It installs the components it uses.
A raised surface for one object that links somewhere. A linked card is one real link stretched over the whole card, and hover moves the fill one step, with no lift, growth or scale.
A working card: ClientCardsDemo, the first demo on its page (https://littmd.vercel.app/#card). It installs the components it uses.
One choice shown as cards: tiles of a picture over a word in one tray, or cards with a title, a line and a detail such as a price, in a row when they fit and stacked when they do not. Native radios; the picked card is the raised block, gliding to the pick.
A working card picker: PlanDemo, the first demo on its page (https://littmd.vercel.app/#card-picker). It installs the components it uses.
A row of slides that scrolls sideways with the browser's own scrolling, snaps each slide to the start edge and lets the next one peek. The range in words with Previous and Next, arrow keys on the track and a mouse drag. It never moves on its own.
The cart as a sheet from the right (a bottom sheet on a phone): lines with a quantity and Remove undone from a toast, and a summary with a free-shipping meter, a rolling subtotal and Check out. Plus the header's cart button, Add to cart with its Added state, and useCartState, a cart in memory.
One project told as a page: a wide hero image, the facts in a row, the story with its labels in a narrow left column, the series in a carousel, the details in a grid and the next project as a card. Every image opens one lightbox that runs through them all, and the carousel follows it.
Bar, line and stacked charts in plain SVG, and a meter. The marks are never the accent: the quiet foreground by default, one series at 55% with the current mark full or up to three stepping down, or up to five data hues when color tells the series apart. The stacked chart draws each category's parts as one thin rail, a hue per series, with the total in the tooltip. Hairline gridlines, mono labels, a tooltip on hover and focus, and one entrance on the responsive tier.
A working chart: DeploysDemo, the first demo on its page (https://littmd.vercel.app/#chart). It installs the components it uses.
Real checkboxes and radios drawn in the litt look, with the label on the right and the whole row clickable. A group is a fieldset with a legend, and a select-all box can show the mixed state.
A working checkbox and radio: StatesDemo, the first demo on its page (https://littmd.vercel.app/#checkbox). It installs the components it uses.
Code in an answer, a tool's output or a diff: mono on a quiet surface with a 32px header that holds the file name and a Copy button. tsx, ts, jsx and js are highlighted in the foreground's tones only (strings take a hint of the accent text), a diff shows a + in success and a - in danger on a faint band with hidden "Added" and "Removed" words, line numbers sit in a gutter that is not selected or copied, and long lines scroll sideways inside a focusable, labelled block. Static.
A working code block: FilesDemo, the first demo on its page (https://littmd.vercel.app/#code-block). It installs the components it uses.
A short one-time code drawn as one cell per character but built as one real field, so paste, one-time-code autofill and screen readers work as in any field. The last character runs onComplete once.
A working code input: VerifyDemo, the first demo on its page (https://littmd.vercel.app/#code-input). It installs the components it uses.
Retention by signup week as a real table: a row per cohort, a column per period since signup, and in every cell the number in mono with a dot before it in one data hue's four steps. Younger cohorts have fewer periods and their empty cells draw nothing. An optional row sums up every cohort, weighted by size. The cohort column stays put while the periods scroll sideways inside the grid's own box. Static, with a legend from less to more.
A working cohort grid: WeeklyDemo, the first demo on its page (https://littmd.vercel.app/#cohort-grid). It installs the components it uses.
A store's products as a grid: the title and the count, a filter row with what to show and the order, product cards with no buy buttons (two across on a phone), an empty state for a filter with nothing in it, and the cart as a sheet.
One color as a hex string: a saturation and brightness area, a hue rail, the hex in mono, an eyedropper where the browser has one, and optional swatches as radios. A field in the Select trigger's look opens it in a popover, a bottom sheet on a phone. The thumbs follow the pointer and the keys at once, and every input says the color in words.
A working color picker: BrandColorDemo, the first demo on its page (https://littmd.vercel.app/#color-picker). It installs the components it uses.
Type to find one value, or several, in a long list: a client, a framework, a teammate. The Input's field with the Menu's glass list under it: filtered as you type, ignoring case and accents, with the first match lit, one gliding highlight, a check on each pick and optional group labels. With multiple the picks sit in the field as removable tokens. Solid inside a dialog, and anchored under the field on a phone.
A working combobox: NewProjectDemo, the first demo on its page (https://littmd.vercel.app/#combobox). It installs the components it uses.
Search every page, project and action from the keyboard. The panel drops in over a dimmed canvas and one highlight glides between rows.
A working command menu: OpenDemo, the first demo on its page (https://littmd.vercel.app/#command-menu). It installs the components it uses.
Where the person writes to an agent: a box on surface-1 with the Input's edge, a text field that grows a line at a time to eight rows, file chips, a toolbar for your controls and a round Send that turns into Stop while the agent answers. Send is the view's one accent fill. Enter sends, Shift+Enter starts a line, Esc stops, and Enter never sends mid-composition. Attach, paste and drop add files, suggestions fill the field, and a count shows near maxLength. FileChip is exported for a message that was already sent.
A working composer: StudioDemo, the first demo on its page (https://littmd.vercel.app/#composer). It installs the components it uses.