Litt

Overview

litt.md is a design language for web and product UI published as a shadcn registry of React and Tailwind CSS v4 components. Its style is described as "technical precision, lit from above": an 8px grid, hairlines, Geist at 14px in three weights by role, warm stone neutrals, glass only on floating surfaces and quick motion with one expressive moment per view.

The registry holds 74 UI components, 12 screen-level blocks and 68 demo examples. Every token is prefixed with litt-, so installing a component does not change an existing app's theme. Each installed file names its release, and a changelog with migration steps covers updates. A Claude Code plugin packages the full design language.

Features

• Controls: Button, input, code input, number field, token input, file drop, select, combobox, slider, switch, color picker, slide-to-confirm and time scrubber.
• Overlays: Dialog, menu, command menu, popover, hover card, tooltip, context menu and toast on glass surfaces.
• Data components: Charts, sparklines, bar lists, breakdowns, funnels, heatmaps, cohort grids, gauges and rolling numbers.
• Agent UI: Composer, message, thinking, tool call and a full agent screen from conversation to deploy.
• Screen blocks: App shell, dashboard, activity, settings, sign-in, team, usage and deployment views.
• Reduced motion: Under prefers-reduced-motion every duration is zero, and CI checks each gallery page for movement.
• AI tooling: Works with the shadcn MCP server, with Markdown docs for every component.

Tech stack

• React, Tailwind CSS v4, Radix UI, Motion, Geist and Geist Mono, sugar-high

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @litt/component-name