Skip to Content

detail-layout

ui

Shared detail page layout for articles, events, and listings across the Mukoko ecosystem. Includes hero image, back navigation, metadata row, prose content area, and optional aside column.

Use cases

  • News article pages
  • Event detail pages
  • Marketplace listing pages
  • Blog post pages
  • Any content detail view

Features

  • Back navigation with customizable label
  • Hero image with gradient overlay
  • Serif title with subtitle
  • Metadata row for dates, authors, categories
  • Action buttons area (share, bookmark)
  • Prose content area with readable line length
  • Optional aside column (sticky on desktop)
  • Responsive — aside drops below on mobile

Preview

Interactive preview with light/dark mode toggle. Switch to Code tab to view the full source.

← Back to events

Event Title

A brief description of the event.

CategoryMarch 14, 2026
Content goes here with readable line length...

Installation

npx shadcn@latest add https://registry.mukoko.com/api/v1/ui/detail-layout

Dependencies

lucide-reactseparator

API

Fetch this component's metadata and source code from the registry API.

GET/api/v1/ui/detail-layout

Source

components/mukoko/detail-layout.tsx