Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
A full-page project showcase component that morphs between a list view and expanded detail view. Features smooth layout animations, hover-triggered preview cards, and support for both images and videos.
Key Features:
| Prop | Type | Default | Description |
|---|---|---|---|
items | ProjectTitleMorphItem[] | required | Array of project items |
defaultActiveId | string | Last item's ID | Initially active project |
listLabel | string | "MY PROJECTS" | Label above the project list |
previewDock | "top-left" | "top-right" | "top-left" | Position of the preview card in list view |
openOnClick | boolean | true | Whether clicking opens detail view |
className | string | undefined | Additional CSS classes |
| Property | Type | Description |
|---|---|---|
id | string | Unique identifier |
title | string | Project title |
sectionLabel | string | Label for the description section |
description | string[] | Array of paragraphs for the description |
media | ProjectPreviewMedia | Optional image or video for preview |
ctas | CTA[] | Optional call-to-action buttons |
type ProjectPreviewMedia =
| { type: "image"; src: string; alt?: string; fit?: "cover" | "contain" }
| { type: "video"; src: string; poster?: string; fit?: "cover" | "contain" }| Property | Type | Description |
|---|---|---|
label | string | Button text |
href | string | Optional link URL |
icon | "external" | "docs" | Optional icon type |
variant | "default" | "secondary" | "outline" | Button variant |
The component respects the user's prefers-reduced-motion setting. When enabled, animations are disabled for a more accessible experience.