React device mockup and code block components
Browser and iPhone frames, an animated terminal and a code block with tabs, line highlights and built-in syntax highlighting — for product screenshots and docs.
4 components · free and MIT licensed · install any of them with the shadcn CLI
velora.dev
Your product here
Browser Mockup
Browser window frame for product screenshots.
counter.tsxtsx
import { useState } from "react"; // A counter that remembers its last valueexport function Counter({ start = 0 }: { start?: number }) { const [count, setCount] = useState(start); const label = `Clicked ${count} times`; return ( <button type="button" onClick={() => setCount(count + 1)}> {label} </button> );}Code Block
Code panel with tabs, line numbers, highlighted lines and a copy button.
Your app here
iPhone Mockup
iPhone frame with dynamic island — pure CSS.
bash
$ npx shadcn@latest add velora/marquee
✔ Checking registry…
✔ Installing dependencies…
✔ Created components/velora/marquee.tsx
Terminal
A terminal window that types its lines in view.