@litt

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 cla…

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 …

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 he…

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 …

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 …

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 wit…

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 goe…

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 sa…

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 val…

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 ope…

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 readi…

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 n…

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 …

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 …

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 …

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,…

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 …

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 mar…

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-a…

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 hi…

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. Th…

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 …

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),…

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 rad…

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 t…

Search every page, project and action from the keyboard. The panel drops in over a dimmed canvas and one highlight glides between rows.

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 fo…

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 …

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…

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,…

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 …

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 it…

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 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 re…

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, w…

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.

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 …

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…

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…

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 inst…

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 em…

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 gla…

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 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 …

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 heat…

The key cap for a real shortcut, such as ⌘K or esc. One chip everywhere, in Geist Mono.

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 seri…

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 s…

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.

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 h…

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 word…

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 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 styl…

The motion engine the components share. Hooks for the instant, responsive and expressive tiers, exits, travel and stagger, and the compact and coarse device si…

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 i…

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 image…

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 ci…

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 …

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, ea…

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 fli…

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 strike…

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, t…

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 t…

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 s…

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…

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, t…

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 respons…

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 mo…

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 wo…

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 cu…

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 confir…

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 Pro…

A cart kept in Shopify: ShopifyCart near the root and useShopifyCart() anywhere under it, with the same CartState as useCartState, so Cart, CartButton and AddT…

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 s…

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 …

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 thumb…

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 basel…

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. B…

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 …

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 …

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…

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 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 stagg…

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, …

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 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 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 m…

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 …

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 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 p…

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 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, a…

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…

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.

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 i…

A plan's usage as one screen, drawn only in rails: trends under the figures, storage and bandwidth by kind of file, the plan's limits against their budgets and…

A working button: VariantsDemo, the first demo on its page (https://littmd.vercel.app/#button). It installs the components it uses.

A working code input: VerifyDemo, the first demo on its page (https://littmd.vercel.app/#code-input). It installs the components it uses.

A working combobox: NewProjectDemo, the first demo on its page (https://littmd.vercel.app/#combobox). It installs the components it uses.

A working date picker: LaunchDateDemo, the first demo on its page (https://littmd.vercel.app/#date-picker). It installs the components it uses.

A working file drop: UploadDemo, the first demo on its page (https://littmd.vercel.app/#file-drop). It installs the components it uses.

A working input: StatesDemo, the first demo on its page (https://littmd.vercel.app/#input). It installs the components it uses.

A working number field: SeatsDemo, the first demo on its page (https://littmd.vercel.app/#number-field). It installs the components it uses.

A working select: AccountFormDemo, the first demo on its page (https://littmd.vercel.app/#select). It installs the components it uses.

A working token input: SendersDemo, the first demo on its page (https://littmd.vercel.app/#token-input). It installs the components it uses.

A working checkbox and radio: StatesDemo, the first demo on its page (https://littmd.vercel.app/#checkbox). It installs the components it uses.

A working color picker: BrandColorDemo, the first demo on its page (https://littmd.vercel.app/#color-picker). It installs the components it uses.

A working pad: VoiceDemo, the first demo on its page (https://littmd.vercel.app/#pad). It installs the components it uses.

A working slide to confirm: DeleteProjectDemo, the first demo on its page (https://littmd.vercel.app/#slide-confirm). It installs the components it uses.

A working slider: SpeedDemo, the first demo on its page (https://littmd.vercel.app/#slider). It installs the components it uses.

A working switch: SettingsListDemo, the first demo on its page (https://littmd.vercel.app/#switch). It installs the components it uses.

A working time scrubber: ReplayDemo, the first demo on its page (https://littmd.vercel.app/#time-scrubber). It installs the components it uses.

A working segmented control: ThemeDemo, the first demo on its page (https://littmd.vercel.app/#segmented). It installs the components it uses.

A working tabs: ProjectTabs, the first demo on its page (https://littmd.vercel.app/#tabs). It installs the components it uses.

A working tag: LabelsDemo, the first demo on its page (https://littmd.vercel.app/#tag). It installs the components it uses.

A working icons: KeylinesDemo, the first demo on its page (https://littmd.vercel.app/#icons). It installs the components it uses.

A working kbd: KeysDemo, the first demo on its page (https://littmd.vercel.app/#kbd). It installs the components it uses.

A working tooltip: Toolbar, the first demo on its page (https://littmd.vercel.app/#tooltip). It installs the components it uses.

A working hover card: PersonDemo, the first demo on its page (https://littmd.vercel.app/#hover-card). It installs the components it uses.

A working popover: ShareDemo, the first demo on its page (https://littmd.vercel.app/#popover). It installs the components it uses.

A working context menu: ProjectRowsDemo, the first demo on its page (https://littmd.vercel.app/#context-menu). It installs the components it uses.

A working menu: ProjectMenu, the first demo on its page (https://littmd.vercel.app/#menu). It installs the components it uses.

A working command menu: OpenDemo, the first demo on its page (https://littmd.vercel.app/#command-menu). It installs the components it uses.

A working dialog: PublishDemo, the first demo on its page (https://littmd.vercel.app/#dialog). It installs the components it uses.

A working toast: SavedDemo, the first demo on its page (https://littmd.vercel.app/#toast). It installs the components it uses.

A working breadcrumb: SettingsTrailDemo, the first demo on its page (https://littmd.vercel.app/#breadcrumb). It installs the components it uses.

A working glass header: DesktopDemo, the first demo on its page (https://littmd.vercel.app/#header). It installs the components it uses.

A working steps: SetupDemo, the first demo on its page (https://littmd.vercel.app/#steps). It installs the components it uses.

A working accordion: StudioQuestionsDemo, the first demo on its page (https://littmd.vercel.app/#accordion). It installs the components it uses.

A working avatar: InboxDemo, the first demo on its page (https://littmd.vercel.app/#avatar). It installs the components it uses.

A working callout: TipDemo, the first demo on its page (https://littmd.vercel.app/#callout). It installs the components it uses.

A working card: ClientCardsDemo, the first demo on its page (https://littmd.vercel.app/#card). It installs the components it uses.

A working progress: UploadDemo, the first demo on its page (https://littmd.vercel.app/#progress). It installs the components it uses.

A working resizable: SplitDemo, the first demo on its page (https://littmd.vercel.app/#resizable). It installs the components it uses.

A working scroll area: DeployLogDemo, the first demo on its page (https://littmd.vercel.app/#scroll-area). It installs the components it uses.

A working tree: FilesDemo, the first demo on its page (https://littmd.vercel.app/#tree). It installs the components it uses.

A working table: DeployHistoryDemo, the first demo on its page (https://littmd.vercel.app/#table). It installs the components it uses.

A working action bar: SelectDemo, the first demo on its page (https://littmd.vercel.app/#action-bar). It installs the components it uses.

A working bar list: ShortcutsDemo, the first demo on its page (https://littmd.vercel.app/#bar-list). It installs the components it uses.

A working breakdown: StorageDemo, the first demo on its page (https://littmd.vercel.app/#breakdown). It installs the components it uses.

A working cohort grid: WeeklyDemo, the first demo on its page (https://littmd.vercel.app/#cohort-grid). It installs the components it uses.

A working details: DeploymentDemo, the first demo on its page (https://littmd.vercel.app/#details). It installs the components it uses.

A working dot plot: ReplySpeedDemo, the first demo on its page (https://littmd.vercel.app/#dot-plot). It installs the components it uses.

A working funnel: StoreDemo, the first demo on its page (https://littmd.vercel.app/#funnel). It installs the components it uses.

A working gauge: CreditsDemo, the first demo on its page (https://littmd.vercel.app/#gauge). It installs the components it uses.

A working heatmap: UsageDemo, the first demo on its page (https://littmd.vercel.app/#heatmap). It installs the components it uses.

A working legend: ChartDemo, the first demo on its page (https://littmd.vercel.app/#legend). It installs the components it uses.

A working log view: BuildDemo, the first demo on its page (https://littmd.vercel.app/#log-view). It installs the components it uses.

A working sparkline: BesideAFigureDemo, the first demo on its page (https://littmd.vercel.app/#sparkline). It installs the components it uses.

A working spread: BuildTimesDemo, the first demo on its page (https://littmd.vercel.app/#spread). It installs the components it uses.

A working timeline: DeployDemo, the first demo on its page (https://littmd.vercel.app/#timeline). It installs the components it uses.

A working app shell: ShellDemo, the first demo on its page (https://littmd.vercel.app/#app-shell). It installs the components it uses.

A working chart: DeploysDemo, the first demo on its page (https://littmd.vercel.app/#chart). It installs the components it uses.

A working form: StartProjectDemo, the first demo on its page (https://littmd.vercel.app/#form). It installs the components it uses.

A working pagination: DeploysDemo, the first demo on its page (https://littmd.vercel.app/#pagination). It installs the components it uses.

A working rolling number: DeploysDemo, the first demo on its page (https://littmd.vercel.app/#rolling-number). It installs the components it uses.

A working stat: StudioStatsDemo, the first demo on its page (https://littmd.vercel.app/#stat). It installs the components it uses.

A working empty and loading states: EmptyDemo, the first demo on its page (https://littmd.vercel.app/#states). It installs the components it uses.

A working code block: FilesDemo, the first demo on its page (https://littmd.vercel.app/#code-block). It installs the components it uses.

A working composer: StudioDemo, the first demo on its page (https://littmd.vercel.app/#composer). It installs the components it uses.

A working message: ThreadDemo, the first demo on its page (https://littmd.vercel.app/#message). It installs the components it uses.

A working plan: MoveDemo, the first demo on its page (https://littmd.vercel.app/#plan). It installs the components it uses.

A working thinking: LiveDemo, the first demo on its page (https://littmd.vercel.app/#thinking). It installs the components it uses.

A working tool call: RunDemo, the first demo on its page (https://littmd.vercel.app/#tool-call). It installs the components it uses.