Project 30 - Page header with breadcrumbs and sharePro
Compact project page header with breadcrumb trail, title and tag row on the left and share buttons (copy link, X, LinkedIn, email) on the right, above a wide cover image.
About Project 30
Compact project page header with breadcrumb trail, title and tag row on the left and share buttons (copy link, X, LinkedIn, email) on the right, above a wide cover image.
Project 30 is a pro project block for React, built on shadcn/ui and Tailwind CSS. It ships as 109 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- breadcrumbs
- share
- header
- navigation
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/project-30Dependencies installed automatically: lucide-react.
Uses: breadcrumb, button, reveal, utils.
Usage
import Project30 from "@/components/blocks/project-30"
export default function Page() {
return <Project30 />
}