Interactive Code Snippet Showcase

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/feature/feature98.tsx instead.

Usage

The file also exports feature98Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Feature98, feature98Demo } from "@/components/blocks/feature/feature98";

export default function Page() {
  return <Feature98 {...feature98Demo} />;
}

Props

Types

type CodeToken = {
  text: string;
  kind?: "keyword" | "string" | "comment" | "function" | "plain";
};

type CodeFeatureItem = {
  title: string;
  description: string;
  filename: string;
  lines: CodeToken[][];
};

Behavior notes

• Real client-side state: clicking a feature in the sidebar sets it as the active item via useState, which swaps the filename tab and the rendered code lines on the right.
• "use client" component, so its demo props live in the sibling feature98.demo.tsx file per this repo's client/demo-file-split rule, not in feature98.tsx itself.
• Syntax coloring is manual: each code line is an array of tokens with an optional `kind`, mapped to a fixed table of semantic Tailwind classes (text-primary for keywords, text-chart-3 for strings, text-chart-2 for function names, muted italic for comments). There is no real syntax-highlighting library involved.
• The window chrome (three dots, filename tab) is purely decorative styling, not a functional editor.
• The sidebar becomes a horizontally scrolling tab strip on small screens and a vertical list on large screens; item descriptions are hidden on small screens to keep the tab strip compact.
• The first feature is selected by default on mount.