Full-Bleed Workspace Band

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot 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/feature1.tsx instead.

Usage

The file also exports feature1Demo, 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 { Feature1, feature1Demo } from "@/components/blocks/feature/feature1";

export default function Page() {
  return <Feature1 {...feature1Demo} />;
}

Props

Types

type HeaderCta = { label: string; href: string };

type WorkspaceView = { label: string; description: string };

type WorkspaceCaption = { title: string; description: string };

Behavior notes

• The view switcher is real client-side state: clicking Design/Code/Live changes which option is active and swaps the description text shown in the floating panel.
• The full-bleed band uses a relative/left-1/2/-translate-x-1/2 trick to span the viewport width regardless of the section's own max-width container.
• The header CTA renders as a real Next.js Link via the button's render prop, but has no destination behavior beyond navigating to whatever href you supply.
• The three icons in the switcher are a fixed, hardcoded set indexed by position, not a per-item icon prop, since a "use client" component can't accept a component reference from a server parent.