Project Showcase Grid

Installation

pnpm dlx shadcn@latest add @cleverui/project-showcase-grid

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { ProjectShowcaseGrid } from '@/components/blocks/project-showcase-grid'

Exampletsx

import { ProjectShowcaseGrid } from '@/components/blocks/project-showcase-grid'

export default function ProjectShowcaseGridDemo() {
  return (
    <div className="mx-auto w-full">
      <ProjectShowcaseGrid
        heading="Built by our students"
        intro="Every project here shipped in a final-week demo, nothing staged, nothing polished after."
        columns={3}
        projects={[
          {
            title: 'Shiftboard',
            brief: 'A rostering app her cafe still uses every Monday morning.',
            tools: ['React', 'Postgres', 'Twilio'],
            cohort: 'COHORT 2025-2',
            student: 'Maria Chen',
            href: '#shiftboard',
          },
          {
            title: 'Ledger Lite',
            brief: 'Invoice tracking for freelancers who hate spreadsheet chaos.',
            tools: ['Next.js', 'SQLite', 'Stripe'],
            cohort: 'COHORT 2025-2',
            student: 'Jordan Okonkwo',
            href: '#ledger-lite',
          },
          {
            title: 'Trail Notes',
            brief: 'Offline-first field journal for bushwalk leaders and scouts.',
            tools: ['React Native', 'IndexedDB'],
            cohort: 'COHORT 2025-1',
            student: 'Priya Nair',
          },
          {
            title: 'Queue Quiet',
            brief: 'Clinic wait-time board that updates from the reception desk.',
            tools: ['Vue', 'Supabase', 'WebSockets'],
            cohort: 'COHORT 2025-1',
            student: 'Alex Rivera',
            href: '#queue-quiet',
          },
          {
            title: 'Shelf Sense',
            brief: 'Inventory alerts for an independent bookshop with two stockrooms.',
            tools: ['Python', 'FastAPI', 'Postgres'],
            cohort: 'COHORT 2024-3',
            student: 'Samir Patel',
          },
          {
            title: 'Mentor Match',
            brief: 'Pairing board that matched 40 alumni mentors in one cohort week.',
            tools: ['React', 'Prisma', 'Resend'],
            cohort: 'COHORT 2024-3',
            student: 'Elena Brooks',
            href: '#mentor-match',
          },
        ]}
      />
    </div>
  )
}

API reference

ProjectShowcaseGrid accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Built by our students'`	–
`intro`	`string`	–	one celebratory plain sentence under the heading
`projects`*	`ShowcaseProject[]`	–	–
`columns`	`2 \| 3`	`3`	cards per row at lg; 2 at sm, 1 below

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface ShowcaseProject {
  title: string
  /** one plain line, e.g. 'A rostering app her cafe still uses' */
  brief: string
  /** short tool names, e.g. 'React', 'Postgres' */
  tools: string[]
  /** preformatted reference tag, e.g. 'COHORT 2025-2', never derived from Date */
  cohort: string
  student?: string
  href?: string
}

Related components

Admission Checklist

What you need to get in and what you can skip, admission requirements as an encouraging two-group checklist with real dl semantics. React and Tailwind block for course sites.

Alumni Story Cards

Graduate stories told as career arcs, from old job to new title, a short quote, cohort chip, and hired-in timeline. React and Tailwind alumni proof cards for course sites.

Cohort Countdown Strip

An enrolment-closing strip, seats left, a preformatted close date, and a compact rolling countdown pointing at one warm CTA. Encouraging urgency, not a fire alarm.

Course Card Grid

Friendly course cards with level chips, duration and next-cohort lines, outcome checklists, and one warm enrol CTA per card, the encouraging way a training site earns sign-ups.

Curriculum Outline

A module-by-module curriculum accordion, week markers, lesson counts, and honest 'what you'll build' notes behind real disclosure semantics. A syllabus students can trust.

Parents FAQ

The questions parents and skeptics actually ask, accreditation, refunds, job outcomes, answered plainly behind real disclosure semantics, with a talk-to-a-human fallback.

Frequently asked questions

How do I install the Project Showcase Grid component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/project-showcase-grid`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Project Showcase Grid require?

Project Showcase Grid uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Project Showcase Grid to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code