# Code to UI

> A code editor types out a component token by token, then every token flies into place as the rendered profile card before looping back to code.

- Collection: Illustrations
- Tier: pro
- Docs: https://geturui.com/docs/code-to-ui
- Install: `npx shadcn@latest add @geturui-pro/code-to-ui`
- Dependencies: motion

## Usage

```tsx
import { CodeToUI } from "@/components/illustrations/code-to-ui";

export function DevtoolHero() {
  return <CodeToUI filename="profile-card.tsx" className="w-[480px]" />;
}
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| filename | `string` | "profile-card.tsx" | File name shown in the editor title bar. |
| speed | `number` | 1 | Speed multiplier for the whole loop (about nine seconds at 1). |
| title | `string` | — | Accessible description of the scene. |
| className | `string` | — | Classes for the SVG; set a width, height follows. |

## Accessibility

- Rendered as a single SVG with role="img" and an aria-label you can override with `title`.
- Under prefers-reduced-motion the scene renders its key frame as a still image: no loops, no timers.
- Colours come from the GetUrUI tokens, so the scene follows light and dark themes automatically.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.