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.
illustrationsvgcodeeditormorphdeveloperheroloop
Installation
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
$npx shadcn@latest add @geturui-pro/code-to-ui
Usage
usage.tsx
1import { CodeToUI } from "@/components/illustrations/code-to-ui";
2
3export function DevtoolHero() {
4 return <CodeToUI filename="profile-card.tsx" className="w-[480px]" />;
5}
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.