Code Preview
A free React code preview component and product showcase for Next.js, with accessible tabs, copy feedback and choreographed line reveals.
Built for developers
Implementation, without the guesswork.
Three files are the whole integration: the page, the component it renders and the tokens that style it.
Get the starter kitapp/overview/page.tsx
TypeScript
import { Overview } from "@/ui/overview";
import { loadMetrics } from "@/lib/metrics";
export const revalidate = 60;
export default async function Page() {
const metrics = await loadMetrics({
range: "30d",
compare: "previous-period",
});
return <Overview metrics={metrics} />;
}Customise
Code
<ShowcaseCodePreview
title="Implementation, without the guesswork." snippets={snippets}
/>Code Preview is a free product showcase and React code preview component for Next.js, React and Tailwind. It presents two to six plain-text examples in an editor-like frame, with visible filenames and languages, manual keyboard tabs, highlighted lines and an explicit copy action.
The complete initial snippet is present in the server HTML as real pre and code text, while Motion progressively enhances later selections with either staggered line reveals or a restrained block crossfade. An invisible copy of the longest authored snippet reserves the frame height, rapid tab changes settle on the latest stable ID, and reduced motion makes every swap immediate with no translation or stagger.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/showcase-code-previewUsage
import { ShowcaseCodePreview } from "@/components/showcase-code-preview";
const snippets = [
{
id: "next",
label: "Next.js",
language: "TypeScript",
filename: "app/page.tsx",
code: `export default function Page() {
return <main>Built for the web.</main>;
}`,
highlightedLines: [2],
},
{
id: "styles",
label: "Tailwind",
language: "CSS",
filename: "app/globals.css",
code: `@import "tailwindcss";
:root {
--background: var(--color-neutral-950);
}`,
highlightedLines: [4],
},
];
export default function Page() {
return (
<ShowcaseCodePreview
title="Implementation details, included."
description="Let developers inspect the code behind the product."
snippets={snippets}
cta={{ label: "Read the guide", href: "/guide" }}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Built for developers" | Introductory label above the section heading. |
| title | string | required | Section heading rendered as an h2. |
| description | string | undefined | Optional supporting copy below the heading. |
| cta | { label: string; href: string } | undefined | Optional call to action rendered as a real anchor. |
| snippets | CodeSnippet[] | required | Two to six plain-text snippets. Each item supplies a stable id, label, language, filename, code string and optional one-based highlighted line numbers. |
| activeId | string | undefined | Active snippet ID in controlled mode. |
| defaultActiveId | string | first snippet ID | Initial active snippet ID in uncontrolled mode. |
| onActiveChange | (id: string) => void | undefined | Called after a valid user selection. |
| reveal | "lines" | "block" | "lines" | Selects staggered per-line choreography or a whole-panel crossfade. |
| lineStagger | number | 0.025 | Delay between visual code lines in seconds, clamped to 0 through 0.08. |
| panelDepth | number | 20 | Static decorative frame depth in CSS pixels, clamped to 0 through 40. |
| highlightOpacity | number | 0.12 | Highlighted-line strength, clamped to 0.06 through 0.24 and applied through a component CSS variable. |
| transitionDuration | number | 0.42 | Reveal duration in seconds, clamped to 0.18 through 0.8. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Code Preview exposes component tokens for the highlighted-line colour, layered edge and editor surface. The effect controls set choreography, depth and highlight strength without changing the authored code:
<ShowcaseCodePreview
title="Inspect every layer."
snippets={snippets}
reveal="block"
panelDepth={28}
highlightOpacity={0.18}
transitionDuration={0.5}
/>
/* scope these overrides to your section */
.product-code {
--showcase-code-highlight: var(--ring);
--showcase-code-highlight-opacity: 18%;
--showcase-code-edge: var(--primary);
--showcase-code-surface: var(--background);
}Frequently asked questions
- Is Code Preview free for commercial use?
- Yes. Code Preview is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is the React code preview component accessible?
- Yes. It uses a labelled h2 section and a manual tab pattern with roving tab index, arrow, Home, End, Enter and Space support. The active snippet is a real horizontally scrollable pre and code region, assistive technology receives one coherent unsplit code string, visual lines are hidden from the accessibility tree, copy feedback is announced politely, and every control has a visible focus state. Reduced motion swaps snippets immediately with every line fully visible.
- Can I customise the reveal and editor depth?
- Yes. Choose lines or block with the reveal prop, then tune lineStagger, transitionDuration, panelDepth and highlightOpacity within their documented bounds. Highlight colour, layered edges and the editor surface use Tier 3 CSS variables, while filenames, labels and code remain authored content rather than playground controls.