Product Demo Hero
A full project preview with task details, completion, search, and timeline views.
Make it yours.
Install the editable source and its dependencies into your React + Tailwind project.
Scroll horizontally for long lines
pnpm dlx shadcn@4.0.8 add http://localhost:3000/r/product-demo-hero.jsonUse it
Scroll horizontally for long lines
"use client";
import { ProductDemoHero } from "@/components/jez-ui/blocks/product-demo-hero";
export default function Example() {
return (
<>
<ProductDemoHero />
</>
);
}
Compose your own
These styled parts are included in the same install. Use children to build your layout; add className only when you want an override.
Scroll horizontally for long lines
"use client";
import {
ProductDemoHeroRoot,
ProductDemoHeroIntro,
ProductDemoHeroPreview,
ProductDemoHeroCaption,
} from "@/components/jez-ui/blocks/product-demo-hero";
export default function Example() {
return (
<ProductDemoHeroRoot>
<ProductDemoHeroIntro />
<ProductDemoHeroPreview />
<ProductDemoHeroCaption />
</ProductDemoHeroRoot>
);
}
Scroll horizontally for long lines
import { ProductDemoHero, ProductDemoHeroRoot, ProductDemoHeroContent, ProductDemoHeroTitle, ProductDemoHeroDescription, ProductDemoHeroIntro, ProductDemoHeroPreview, ProductDemoHeroCaption, ProductDemoHeroAction, ProductDemoHeroLead } from "@/components/jez-ui/blocks/product-demo-hero";Props & types
Scroll horizontally for long lines
export type ProductDemoHeroOptions = Pick<
HeroProps,
| "title"
| "description"
| "actionLabel"
| "copy"
| "preview"
| "className"
| "href"
> & {
children?: React.ReactNode;
};
export type ProductDemoHeroProps = Omit<
React.ComponentProps<"section">,
keyof ProductDemoHeroOptions
> &
ProductDemoHeroOptions;
ProductDemoHeroProps & { composition?: React.ReactNode }Source
View 5 source files
registry/blocks/product-demo-hero.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { ArrowRight } from "lucide-react";
import { type HeroProps } from "./hero-parts";
import { cn } from "../ui/utils";
import { Button } from "../ui/button";
import { ProjectPreview } from "./project-preview";
export const ProductDemoHeroCopy = {
footerNote:
"Try the project: switch views, open a task, or mark something done.",
};
export type ProductDemoHeroOptions = Pick<
HeroProps,
| "title"
| "description"
| "actionLabel"
| "copy"
| "preview"
| "className"
| "href"
> & {
children?: React.ReactNode;
};
export type ProductDemoHeroProps = Omit<
React.ComponentProps<"section">,
keyof ProductDemoHeroOptions
> &
ProductDemoHeroOptions;
function useProductDemoHeroModel({
title,
description,
actionLabel,
copy = {},
children,
preview,
className,
href = "#features",
...rootProps
}: ProductDemoHeroProps) {
return {
title,
description,
actionLabel,
copy,
children,
preview,
className,
href,
rootProps,
};
}
const ProductDemoHeroCompositionContext = React.createContext<ReturnType<
typeof useProductDemoHeroModel
> | null>(null);
function useProductDemoHeroComposition() {
const context = React.useContext(ProductDemoHeroCompositionContext);
if (!context)
throw new Error("ProductDemoHero parts must be inside ProductDemoHero.");
return context;
}
export function ProductDemoHero(
props: ProductDemoHeroProps & { composition?: React.ReactNode },
) {
const { composition, ...modelProps } = props;
const model = useProductDemoHeroModel(modelProps);
const { className, rootProps } = model;
return (
<ProductDemoHeroCompositionContext.Provider value={model}>
<section {...rootProps} className={cn("py-12 md:py-20", className)}>
{composition !== undefined ? (
composition
) : (
<>
<ProductDemoHeroIntro />
<ProductDemoHeroPreview />
<ProductDemoHeroCaption />
</>
)}
</section>
</ProductDemoHeroCompositionContext.Provider>
);
}
export function ProductDemoHeroRoot({
children,
...props
}: Omit<
React.ComponentProps<typeof ProductDemoHero>,
"children" | "composition"
> & { children?: React.ReactNode }) {
return <ProductDemoHero {...props} composition={children} />;
}
export function ProductDemoHeroContent({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="product-demo-hero-content"
className={cn(
"mb-10 grid gap-7 md:mb-14 md:grid-cols-[1.3fr_1fr] md:items-end md:gap-12",
className,
)}
{...props}
/>
);
}
export function ProductDemoHeroTitle({
className,
...props
}: React.ComponentProps<"h1">) {
return (
<h1
data-slot="product-demo-hero-title"
className={cn(
"max-w-2xl text-5xl leading-[1.04] tracking-[-.035em] md:text-7xl",
className,
)}
{...props}
/>
);
}
export function ProductDemoHeroDescription({
className,
...props
}: React.ComponentProps<"p">) {
return (
<p
data-slot="product-demo-hero-description"
className={cn(
"mt-4 text-center text-xs text-muted-foreground",
className,
)}
{...props}
/>
);
}
export function ProductDemoHeroIntro({
children,
...props
}: Partial<React.ComponentProps<typeof ProductDemoHeroContent>> & {
children?: React.ReactNode;
}) {
const { title } = useProductDemoHeroComposition();
return (
<ProductDemoHeroContent {...props}>
{children === undefined ? (
<>
<ProductDemoHeroTitle>
{title ?? (
<>
A clear view.
<br />
<span className="text-muted-foreground">
A shared finish line.
</span>
</>
)}
</ProductDemoHeroTitle>
<div className="max-w-sm md:justify-self-end">
<ProductDemoHeroLead />
<ProductDemoHeroAction />
</div>
</>
) : (
children
)}
</ProductDemoHeroContent>
);
}
export function ProductDemoHeroPreview({ children }: React.PropsWithChildren) {
const { children: modelChildren } = useProductDemoHeroComposition();
const { preview } = useProductDemoHeroComposition();
return children === undefined
? (modelChildren ?? preview ?? <ProjectPreview />)
: children;
}
export function ProductDemoHeroCaption({
children,
...props
}: Partial<React.ComponentProps<typeof ProductDemoHeroDescription>> & {
children?: React.ReactNode;
}) {
const { copy } = useProductDemoHeroComposition();
return (
<ProductDemoHeroDescription {...props}>
{children === undefined
? (copy.footerNote ??
"Try the project: switch views, open a task, or mark something done.")
: children}
</ProductDemoHeroDescription>
);
}
export function ProductDemoHeroAction({
children,
...props
}: Partial<React.ComponentProps<typeof Button>> & {
children?: React.ReactNode;
}) {
const { actionLabel, href } = useProductDemoHeroComposition();
return (
<Button asChild {...props} className={cn("mt-6", props.className)}>
{children === undefined ? (
<a href={href}>
{actionLabel ?? "Explore the workspace"} <ArrowRight size={16} />
</a>
) : (
children
)}
</Button>
);
}
export function ProductDemoHeroLead({
children,
...props
}: Partial<React.ComponentProps<"p">> & { children?: React.ReactNode }) {
const { description } = useProductDemoHeroComposition();
return (
<p
{...props}
className={cn(
"text-base leading-relaxed text-muted-foreground",
props.className,
)}
>
{children === undefined
? (description ??
"Projects, decisions, and the work in between. Bring your team into one workspace where everyone can see what happens next.")
: children}
</p>
);
}
registry/blocks/hero-parts.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { Slot } from "radix-ui";
import { ArrowUpRight } from "lucide-react";
import { cn } from "../ui/utils";
export type HeroCopy = Partial<
Record<
| "brand"
| "meta"
| "eyebrow"
| "tagline"
| "taglineEnd"
| "caption"
| "footerNote"
| "animationName"
| "playLabel"
| "pauseLabel"
| "artworkLabel",
string
>
>;
export type HeroProps = {
copy?: HeroCopy;
preview?: React.ReactNode;
artworkText?: string;
className?: string;
href?: string;
title?: React.ReactNode;
description?: React.ReactNode;
actionLabel?: React.ReactNode;
secondaryImageSrc?: string;
secondaryImageAlt?: string;
imageSrc?: string;
imageAlt?: string;
artwork?: {
color?: string;
speed?: number;
label?: string;
playLabel?: string;
pauseLabel?: string;
};
};
export function HeroLink({
href = "/blocks",
asChild,
children = "Explore the collection",
className,
...props
}: React.ComponentProps<"a"> & {
asChild?: boolean;
href?: string;
children?: React.ReactNode;
className?: string;
}) {
const Comp = asChild ? Slot.Root : "a";
return (
<Comp
{...props}
href={href}
className={cn(
"inline-flex items-center gap-3 rounded-full border border-current/30 px-5 py-3 text-sm transition-colors hover:bg-current/10",
className,
)}
>
{asChild ? (
children
) : (
<>
{children}
<ArrowUpRight size={16} />
</>
)}
</Comp>
);
}
registry/ui/utils.ts
Scroll horizontally for long lines
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
return twMerge(clsx(values));
}
registry/ui/button.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { Slot } from "radix-ui";
import { LoaderCircle } from "lucide-react";
import { cn } from "./utils";
export type ButtonProps = React.ComponentProps<"button"> & {
variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
size?: "sm" | "md" | "lg";
loading?: boolean;
asChild?: boolean;
};
export function Button({
variant = "primary",
size = "md",
loading,
asChild,
className,
children,
disabled,
...props
}: ButtonProps) {
const Comp = asChild ? Slot.Root : "button";
return (
<Comp
type={asChild ? undefined : "button"}
disabled={asChild ? undefined : disabled || loading}
aria-disabled={disabled || loading || undefined}
aria-busy={loading || undefined}
className={cn(
"relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-lg border border-transparent text-sm font-medium leading-none transition-[background-color,border-color,box-shadow,transform] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:scale-[.98] disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none [&_svg]:shrink-0",
{
"bg-primary text-primary-foreground shadow-[inset_0_1px_0_#ffffff26,0_1px_2px_#00000012] hover:bg-primary/90":
variant === "primary",
"border-border/60 bg-muted text-foreground hover:bg-muted/70":
variant === "secondary",
"border-border bg-background text-foreground shadow-sm hover:bg-muted/60":
variant === "outline",
"text-muted-foreground hover:bg-muted hover:text-foreground":
variant === "ghost",
"bg-danger text-danger-foreground hover:bg-danger/90":
variant === "danger",
},
{
"h-8 px-3 text-xs": size === "sm",
"h-10 px-4": size === "md",
"h-12 px-6": size === "lg",
},
className,
)}
{...props}
>
{asChild ? (
children
) : (
<>
<span
className={cn(
"inline-flex min-w-0 flex-1 items-center justify-center gap-2",
loading && "invisible",
)}
>
{children}
</span>
{loading && (
<LoaderCircle
aria-hidden="true"
className="absolute size-4 animate-spin motion-reduce:animate-none"
/>
)}
</>
)}
</Comp>
);
}
registry/blocks/project-preview.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import {
Check,
Circle,
CircleDashed,
LayoutList,
Rows3,
Search,
ArrowUpRight,
X,
} from "lucide-react";
import { cn } from "../ui/utils";
const initialTasks = [
{
id: "FRM-24",
title: "Map the first-run experience",
owner: "Alex",
initials: "AM",
date: "Sep 08",
status: "Done",
team: "Design",
note: "The first-run flow is ready for review. Account setup, workspace creation, and the empty project state are included.",
},
{
id: "FRM-25",
title: "Build the project switcher",
owner: "Sam",
initials: "SK",
date: "Sep 09",
status: "In progress",
team: "Engineering",
note: "Support recent projects, keyboard navigation, and searching by project name. Keep the current project visible in the trigger.",
},
{
id: "FRM-26",
title: "Review keyboard navigation",
owner: "Jo",
initials: "JL",
date: "Sep 10",
status: "In progress",
team: "Design",
note: "Check the complete journey without a mouse: create a project, add a task, assign an owner, and return to the project list.",
},
{
id: "FRM-27",
title: "Write the release notes",
owner: "Alex",
initials: "AM",
date: "Sep 11",
status: "Planned",
team: "Product",
note: "Cover the project switcher, new shortcuts, and improvements to the empty states. Include a short migration note for existing workspaces.",
},
{
id: "FRM-28",
title: "Ship the workspace update",
owner: "Sam",
initials: "SK",
date: "Sep 12",
status: "Planned",
team: "Engineering",
note: "Release after the keyboard review is complete. Check the sign-in journey and project creation after deployment.",
},
];
const views = [
{ name: "List", icon: LayoutList },
{ name: "Timeline", icon: Rows3 },
];
export function ProjectPreview({ className }: { className?: string }) {
const [tasks, setTasks] = React.useState(initialTasks);
const [view, setView] = React.useState("List");
const [query, setQuery] = React.useState("");
const [selected, setSelected] = React.useState<string | null>(null);
const [mine, setMine] = React.useState(false);
const active = tasks.find((t) => t.id === selected);
const filtered = tasks.filter(
(t) =>
(!mine || t.owner === "Alex") &&
`${t.title} ${t.id} ${t.owner}`
.toLowerCase()
.includes(query.toLowerCase()),
);
const complete = tasks.filter((t) => t.status === "Done").length;
return (
<div
className={cn(
"overflow-hidden rounded-xl border border-border bg-background text-foreground",
className,
)}
>
<div className="flex items-center justify-between gap-4 border-b border-border px-5 py-3 text-xs">
<span className="flex items-center gap-2 font-medium">
<span className="grid size-5 place-items-center rounded bg-primary text-primary-foreground">
F
</span>{" "}
Forma <span className="mx-2 text-border">/</span>
<span className="text-muted-foreground">Workspace</span>
</span>
<span className="text-muted-foreground">Interactive demo</span>
</div>
<div className="grid md:grid-cols-[170px_minmax(0,1fr)]">
<aside className="hidden border-r border-border bg-muted/35 p-3 md:block">
<div className="flex items-center gap-2 px-2 py-3 text-xs text-muted-foreground">
<Rows3 size={14} /> Projects
</div>
<div className="rounded-md bg-muted px-2 py-2 text-xs font-medium">
Workspace launch
</div>
<p className="mt-7 px-2 text-[11px] text-muted-foreground">
Project team
</p>
{[
["AM", "Alex Morgan"],
["SK", "Sam Kim"],
["JL", "Jo Lee"],
].map(([initials, name]) => (
<div
key={name}
className="mt-3 flex items-center gap-2 px-2 text-xs"
>
<span className="grid size-6 place-items-center rounded-full bg-muted text-[9px]">
{initials}
</span>
{name}
</div>
))}
<div className="mt-12 border-t border-border px-2 pt-4 text-[11px] leading-relaxed text-muted-foreground">
A sample project.
<br />
Changes stay in this preview.
</div>
</aside>
<div className="min-w-0">
<header className="flex flex-wrap items-start justify-between gap-4 px-5 pb-5 pt-7 md:px-7">
<div>
<h3 className="text-xl font-medium">Workspace launch</h3>
<p className="mt-1.5 text-xs text-muted-foreground">
The next release, from first sketch to shipped.
</p>
</div>
<span className="flex items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-1 text-[11px] font-medium text-primary">
<Circle size={7} fill="currentColor" />{" "}
{complete === tasks.length ? "Complete" : "In progress"}
</span>
</header>
<div className="mx-5 mb-6 flex items-center gap-3 md:mx-7">
<div className="h-1 flex-1 overflow-hidden rounded-full bg-muted">
<div
className="h-full bg-primary transition-[width] motion-reduce:transition-none"
style={{ width: `${(complete / tasks.length) * 100}%` }}
/>
</div>
<span
className="text-[11px] tabular-nums text-muted-foreground"
aria-live="polite"
>
{complete} of {tasks.length} complete
</span>
</div>
<div className="flex flex-wrap items-center justify-between gap-3 border-y border-border px-5 py-2 md:px-7">
<div className="flex items-center gap-1" aria-label="Project view">
{views.map(({ name, icon: Icon }) => (
<button
key={name}
type="button"
aria-pressed={view === name}
onClick={() => setView(name)}
className={cn(
"flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs",
view === name
? "bg-muted font-medium"
: "text-muted-foreground hover:text-foreground",
)}
>
<Icon size={13} />
{name}
</button>
))}
</div>
<button
type="button"
aria-pressed={mine}
onClick={() => setMine(!mine)}
className={cn(
"rounded-md px-2 py-1.5 text-xs",
mine
? "bg-primary/10 text-primary"
: "text-muted-foreground hover:bg-muted",
)}
>
Assigned to me
</button>
</div>
<label className="mx-5 my-3 flex items-center gap-2 text-muted-foreground md:mx-7">
<Search size={14} />
<input
aria-label="Search project tasks"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search tasks…"
className="min-w-0 flex-1 bg-transparent py-1 text-xs text-foreground"
/>
</label>
<div className="min-h-[255px]" aria-label={`${view} view`}>
{filtered.length === 0 ? (
<div className="px-7 py-12 text-center">
<p className="text-sm">No tasks match this view.</p>
<button
type="button"
onClick={() => {
setQuery("");
setMine(false);
}}
className="mt-2 text-xs text-primary underline"
>
Clear filters
</button>
</div>
) : (
filtered.map((task) => (
<div
key={task.id}
className="group flex flex-wrap items-center gap-3 border-t border-border/60 px-5 py-3 hover:bg-muted/40 md:px-7"
>
<button
type="button"
aria-label={`${task.status === "Done" ? "Reopen" : "Complete"} ${task.title}`}
onClick={() =>
setTasks(
tasks.map((t) =>
t.id === task.id
? {
...t,
status:
t.status === "Done" ? "Planned" : "Done",
}
: t,
),
)
}
className={cn(
"-m-1.5 shrink-0 rounded-full p-1.5",
task.status === "Done"
? "text-primary"
: "text-muted-foreground",
)}
>
{task.status === "Done" ? (
<Check size={16} />
) : task.status === "In progress" ? (
<CircleDashed size={16} />
) : (
<Circle size={16} />
)}
</button>
<button
type="button"
onClick={() => setSelected(task.id)}
className="min-w-0 flex-1 text-left"
>
<span className="mr-3 hidden text-[10px] tabular-nums text-muted-foreground lg:inline">
{task.id}
</span>
<span
className={cn(
"text-xs",
task.status === "Done" && "text-muted-foreground",
)}
>
{task.title}
</span>
</button>
{view === "Timeline" ? (
<div
className="order-last grid w-full grid-cols-5 gap-1 sm:order-none sm:w-36"
aria-label={`Due ${task.date}`}
>
{Array.from({ length: 5 }, (_, day) => (
<span
key={day}
className={cn(
"grid h-5 place-items-center rounded-sm text-[9px] text-foreground",
day <= tasks.indexOf(task) &&
day >= Math.max(0, tasks.indexOf(task) - 1)
? "bg-primary/40"
: "bg-muted",
)}
>
{8 + day}
</span>
))}
</div>
) : (
<span className="hidden text-[10px] text-muted-foreground sm:inline">
{task.date}
</span>
)}
<span
title={task.owner}
className="grid size-6 shrink-0 place-items-center rounded-full bg-muted text-[9px]"
>
{task.initials}
</span>
<button
type="button"
aria-label={`Open ${task.title}`}
onClick={() => setSelected(task.id)}
className="-m-1.5 rounded p-1.5 text-muted-foreground hover:text-primary"
>
<ArrowUpRight size={14} />
</button>
</div>
))
)}
</div>
{active && (
<section
aria-label="Task details"
className="border-t border-border bg-muted/30 px-5 py-5 md:px-7"
>
<div className="flex justify-between gap-4">
<div>
<p className="text-xs text-muted-foreground">
{active.id} · {active.team} · {active.owner}
</p>
<h4 className="mt-2 text-sm font-medium">{active.title}</h4>
</div>
<button
type="button"
aria-label="Close task details"
onClick={() => setSelected(null)}
className="self-start rounded p-1 hover:bg-muted"
>
<X size={16} />
</button>
</div>
<p className="mt-3 max-w-xl text-xs leading-relaxed text-muted-foreground">
{active.note}
</p>
</section>
)}
</div>
</div>
</div>
);
}
Dependencies
lucide-react@0.577.0 · radix-ui@1.6.7 · clsx@2.1.1 · tailwind-merge@3.5.0
Accessibility & behaviour
Provide meaningful labels and preserve keyboard focus styles. Check contrast when customising theme colours.
Read the accessibility and performance guide →