# Introduction
URL: https://remocn.dev/docs/ui

Familiar shadcn components rebuilt for Remotion. You declare what state a component is in and when, and it renders that state as a pure function of the frame.

## What makes this different from regular shadcn

In a browser, a button enters its loading state because the user clicked. In a video, it enters that state because you authored `{ at: 35, state: "loading" }`. The component looks identical; the wiring is completely different.

This also means you get things that are impossible in a real UI: scrub backward through a form fill, play a button click at half speed, or loop a checkbox toggle indefinitely, all without any special setup.

## Two kinds of atom

Every primitive is one of two shapes. Knowing which tells you where the frame is read and how timing reaches the component.

**State atoms**

Pure visual functions of state and theme. They never read the frame; the state comes from a prop, `useCurrentState`, or a transition hook like `useButtonTransition`.

**Motion atoms**

Loop on `useCurrentFrame()` with no discrete states. No `Date`, no `Math.random`, no `requestAnimationFrame`, so they stay safe in the headless renderer.

## Install your first primitive

Remotion must already be set up. The shared remocn-ui core installs automatically as a registry dependency, so you only name the component you want.

## Installation

```bash
npx shadcn@latest add @remocn/button
```

## Components

The pieces a product demo is made of: a cursor that clicks, a menu that opens, a toast that lands. Each one copies into `components/remocn/` with its transition hook.

## Blocks

Complete, shippable scenes built from these primitives. Each block orchestrates the cursor, fields and feedback into one coherent story you can drop into a Sequence.