shadszn/ui

Detail Page

A two-column detail view with hero image, content area, metadata sidebar, and action buttons.

Preview

Hero Image

Auth Flow Template

Complete login, signup, and password reset pages.

Status
Active
Author shadszn

Installation

npx shadcn@latest add @shadszn/detail-page

Files Installed

  • detail-page/page.tsx -- Complete detail view layout

Key Features

  • Back navigation link
  • Hero image area with 21:9 aspect ratio
  • Two-column layout: 2/3 content and 1/3 sidebar
  • Metadata card with status badge, date, author, and version
  • Action buttons: Install, View Source, Report Issue
  • Feature list with overview section
  • Uses Card, Button, Badge, and Separator components

Customization

// Replace static content with your data
<h1 className="text-2xl font-semibold text-[var(--text-primary)]">
  {item.title}
</h1>
<p className="text-sm text-[var(--text-secondary)] mt-2">
  {item.description}
</p>

// Customize metadata sidebar
<Badge variant={item.status}>{item.statusLabel}</Badge>
<span>{item.publishedDate}</span>
<span>{item.author}</span>