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.
An account's settings as one screen: the profile, the notifications and the appearance, Save and Cancel, and deleting the studio apart behind a slide to confirm. A failed save puts a summary on top that takes focus, and a good one ends in a toast.
A figure or a count on seven-segment digits behind LCD glass, each digit's segments lit from the ink and fading like phosphor when they change. A Device part.
A working seven-segment readout: CounterDemo, the first demo on its page (https://littmd.vercel.app/#seven-segment). It installs the components it uses.
litt's commerce parts on a Shopify store: a small Storefront API client pinned to one version, getProduct, getProducts and getCollection that return litt's Product, and toProduct for your own queries. No React in it, so it runs in a server component too.
A cart kept in Shopify: ShopifyCart near the root and useShopifyCart() anywhere under it, with the same CartState as useCartState, so Cart, CartButton and AddToCart work unchanged. The cart's id survives a reload, and Check out goes to Shopify's hosted checkout.
The page before the app: the wordmark, one left-aligned column with email, password, Sign in and a second way in, and a quiet column of what is new on a wide screen. Wrong fields say so under themselves and take focus, and a refusal shows in a callout.
A value on a range, such as an animation speed, or a span with two thumbs, such as builds that took 20s to 80s. A thin rail, a foreground range and round thumbs that follow the pointer one to one, with words for the two ends. The thumbs of a range never cross, and a form sends both values under one name.
A working slider: SpeedDemo, the first demo on its page (https://littmd.vercel.app/#slider). It installs the components it uses.
A deliberate yes to something that cannot be undone: the segmented control's track and a raised thumb to slide to the end. The thumb follows the finger one to one, springs back on the responsive tier if let go early, and confirms at the end with a check. The thumb is also a button: Enter, Space or a screen reader confirms, a mouse click alone does not.
A working slide to confirm: DeleteProjectDemo, the first demo on its page (https://littmd.vercel.app/#slide-confirm). It installs the components it uses.
Where an answer came from: Sources holds a turn's sources and numbers them once, Citation is a quiet numbered chip in the running text that opens its source and previews it in a hover card (the site, the title, the passage, when it was read), and SourceList lists them under the answer or as what a search call found. Resting on a citation lights its row, and resting on a row lights its citations. A source the model gives a url that is not http or https shows as text.
A trend in one thin line, with no axes, gridlines or labels: a 2px line in the foreground or a data hue, a dot on the latest value and an optional dashed baseline. For a stat tile, a table cell or a list row. It shows shape, not values.
A working sparkline: BesideAFigureDemo, the first demo on its page (https://littmd.vercel.app/#sparkline). It installs the components it uses.
How values spread, one thin rail per row on a shared scale: the full range faint, the middle half in a data hue, the median as a tick and in mono at the end. Build times by site, reply times by client. A row gives its values or its quartiles, a goal is a dashed line through every rail, and under 28rem the label moves above its rail. Static, with a legend in words.
A working spread: BuildTimesDemo, the first demo on its page (https://littmd.vercel.app/#spread). It installs the components it uses.
A spring shaped by hand, as time and bounce (Motion's visualDuration and bounce, Framer's Time and Bounce). The Pad's well with the spring's curve on its floor: drag the cap right for a slower spring and up for more bounce. It says what the spring does in words, a dot crosses a rail on it when you let go, and tier draws litt's limits with a Fits or Change row per rule.
A working spring editor: ToastSpringDemo, the first demo on its page (https://littmd.vercel.app/#spring-editor). It installs the components it uses.
A number tile for one figure: a small label, the value large in the sans with tabular numbers, and an optional change in words. Green and red are for good and bad news only. A group of tiles measures its own width.
A working stat: StudioStatsDemo, the first demo on its page (https://littmd.vercel.app/#stat). It installs the components it uses.
Where someone is in a flow of a few steps, in the step marks: a check for done, a half-filled circle for now, an empty circle for what is left. A row, a column, or in a narrow box Step 2 of 4 with a rail per step.
A working steps: SetupDemo, the first demo on its page (https://littmd.vercel.app/#steps). It installs the components it uses.
An on or off setting. A pill track that fills with the foreground color when on, never the accent, and a thumb that slides on the instant tier.
A working switch: SettingsListDemo, the first demo on its page (https://littmd.vercel.app/#switch). It installs the components it uses.
A table with real semantics, hairline rows, mono figures and a sticky header. It scrolls inside its own region on a phone, and its rows can arrive in one staggered cascade, sort, filter and insert. A virtual body draws ten thousand rows and loads more from a server as you scroll.
A working table: DeployHistoryDemo, the first demo on its page (https://littmd.vercel.app/#table). It installs the components it uses.
A filter for one column of a Table, in its header: a funnel button that opens the column's values as Menu rows, checkboxes with how many rows each would show, or radio buckets for a number. A filtering column's button wears the selected segment.
Underline or segmented tabs. The indicator slides between tabs, the label only changes color and the panel fades in from the side of the tab you picked.
A working tabs: ProjectTabs, the first demo on its page (https://littmd.vercel.app/#tabs). It installs the components it uses.
A small label at the control radius that names a thing or reports its state. A status tag colors its text, never the fill, and always says the status in words.
A working tag: LabelsDemo, the first demo on its page (https://littmd.vercel.app/#tag). It installs the components it uses.
Progress as two tape reels: the supply empties and the take-up fills, each turning at the speed the tape's constant pace gives its radius, with the value said in words. A Device part.
A working tape progress: ExportDemo, the first demo on its page (https://littmd.vercel.app/#tape-progress). It installs the components it uses.
A studio's people as one screen: the seats as a meter, and a table with each person's role to change in place, open invites, when they were last active and a menu of actions. Invite opens a dialog that takes several addresses, and a removal is undone from its toast.
The agent's reasoning as a quiet disclosure above its answer: a row with a chevron, "Thinking" and a clock that counts whole seconds, never a shimmer, a pulse or a spinner, then "Thought for 12s". The reasoning sits under it in the quiet text tone with no box. It is open while the agent thinks and closes itself when it stops, unless the reader toggled it.
A working thinking: LiveDemo, the first demo on its page (https://littmd.vercel.app/#thinking). It installs the components it uses.
The steps of a run in order, such as a deploy: when each started, a status icon on a hairline rail, the label and how long it took, grouped into phases. In a proportional timeline long steps draw their time as a bar in the phase's data hue, with the last run beside it. A strip shows the whole run at a glance.
A working timeline: DeployDemo, the first demo on its page (https://littmd.vercel.app/#timeline). It installs the components it uses.
A moment in a run that already happened, found by dragging a ruler of its time under a fixed needle: ticks every step, labelled times, and what happened along the run marked in its status color. The ruler follows the pointer one to one and settles on the nearest step or an event, Page Up and Page Down go from event to event, and in fun mode it can be thrown.
A working time scrubber: ReplayDemo, the first demo on its page (https://littmd.vercel.app/#time-scrubber). It installs the components it uses.
Toasts arrive from just below the corner and leave sideways. Older ones stack behind the newest and open into a list on hover or focus.
A working toast: SavedDemo, the first demo on its page (https://littmd.vercel.app/#toast). It installs the components it uses.
A field that collects short values as removable tokens: recipients, sender domains, tags. Enter, a comma or blur adds what you typed, a pasted list is split, and Backspace or the x removes one. The Input's own size, edge, label and focus ring, with the Tag's look inside. A long list folds into a +N token until the field is focused.
A working token input: SendersDemo, the first demo on its page (https://littmd.vercel.app/#token-input). It installs the components it uses.
What an agent did, one row per call: a status mark (a still half circle while it runs, never a spinner), the action in words, the target in mono cut at the end, what it found ("5 sources", "+2 −2") and the time. A call with an input or an output opens them under it, in a mono well; a part with its own surface (a log, a diff, a list of sources) opens as given in details. A group folds a run of calls and closes itself when they finish, and an approval asks first on a raised panel with Allow as the accent fill and Deny beside it, then becomes a row that says what was chosen.
A working tool call: RunDemo, the first demo on its page (https://littmd.vercel.app/#tool-call). It installs the components it uses.
A small solid label for icons, shortcuts and status. It opens after a short hover or at once on focus, then grows from its trigger.
A working tooltip: Toolbar, the first demo on its page (https://littmd.vercel.app/#tooltip). It installs the components it uses.
Things inside things, opened a level at a time: a project's files, a docs site's pages. Indented rows with a hairline guide down each level, the selected row in the selected segment's look, and the keys of a file tree.