Introduction

What you get

• Components as plain .tsx files in your repository. There is no runtime package, and you can edit anything.
• One set of design tokens. Components read the standard shadcn CSS variables, so they follow the theme you already have.
• One set of motion conventions, in a single file, with reduced motion handled in every component. See Motion.
• Documentation that describes behavior: keyboard, focus, touch, and what happens when things load, are empty, or fail.

Core and Pro

Lathe Core, the primitives and a few assemblies, is free and MIT licensed. Lathe Pro adds the larger components and every assembly for a one-time payment. Each page carries a Free or Pro badge, and Pro previews are live so you can try them first. See Pricing and Lathe Pro.

How it is organized

Components are grouped by what they are for: actions, inputs, feedback, navigation, overlays, data, media and gestures. Assemblies are larger compositions built from those components, and install the components they use.

Everything installs through the shadcn CLI from this site's registry. Shared pieces, such as the motion tokens, are registry items too, so the CLI adds them the first time a component needs them.

Reading a component page

Everything about a component is on its own page. Find one in the catalog, the rail beside every component page, or search with Ctrl K.

• The stage runs the same source that gets installed. Pause, replay or open it full screen, and switch between its examples underneath.
• Beside it: the install command, the example's code, a minimal usage snippet and a prompt for your agent.
• Below it: the API reference with every prop, type and default, then keyboard, accessibility and motion notes, customization and related components.

Conventions

These hold for every component, so learning one teaches you the rest.

• className always styles the root element and is merged last.
• Stateful components work controlled or uncontrolled: value, defaultValue and onValueChange, or open, defaultOpen and onOpenChange.
• Variants and sizes are string unions named variant and size, defined as a plain object at the top of the file.
• Native attributes and ref pass through to the underlying element.
• Every part carries a data-slot attribute for styling from a parent.