Skip to main content
Clever Ops

Instructor Panel

Educator bios that read like a good syllabus, plain-text credentials, an approachable register, and student-count tickers that prove the teaching miles without bragging.

Preview & code

Loading Instructor Panel preview

Installation

pnpm dlx shadcn@latest add @cleverui/instructor-panel

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

Usage

tsx
import { InstructorPanel } from '@/components/blocks/instructor-panel'
Exampletsx
import { InstructorPanel } from '@/components/blocks/instructor-panel'

export default function InstructorPanelDemo() {
  return (
    <div className="mx-auto w-full">
      <InstructorPanel
        heading="Meet your instructors"
        intro="Real practitioners who teach every cohort themselves, no guest-lecture theatre."
        instructors={[
          {
            name: 'Dr. Amira Hassan',
            role: 'Lead instructor, Data Foundations',
            credentials:
              'PhD, University of Melbourne, 12 years teaching analytics teams',
            bio: 'Amira spent a decade in hospital data teams before she started teaching. She cares most about the first week, when spreadsheets stop feeling scary and start feeling useful.',
            students: 4200,
          },
          {
            name: 'Marcus Chen',
            role: 'Instructor, Product Analytics Lab',
            credentials:
              'Former analytics lead at Northline Freight, 8 years in product orgs',
            bio: 'Marcus still ships weekly metrics reviews for a growth team. In class he pairs every framework with a messy real dataset so you leave with muscle memory, not slides.',
            students: 1860,
            studentsLabel: 'students taught',
          },
          {
            name: 'Priya Nair',
            role: 'Studio coach, ML Engineering',
            credentials:
              'MSc Computer Science, 9 years shipping models in production',
            bio: 'Priya coaches the capstone week. She has a soft spot for honest evaluation write-ups and a firm rule: if you cannot explain the trade-off, you have not shipped yet.',
            students: 940,
          },
          {
            name: 'Tomás Rivera',
            role: 'Teaching fellow, Experiment Design',
            credentials:
              'BSc Statistics, 6 years in experimentation platforms',
            bio: 'Tomás helps you size tests and write decision logs that stakeholders actually read. Expect warm feedback and zero tolerance for p-hacking theatre.',
            students: 1120,
          },
        ]}
      />
    </div>
  )
}

API reference

InstructorPanel accepts the following props.

PropTypeDefaultDescription
headingstring'Meet your instructors'
introstringone warm plain-language sentence under the heading
instructors*Instructor[]
studentsLabelstring'students taught'fallback label under the ticker when an instructor omits their own

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

Referenced types

Typestsx
export interface Instructor {
  name: string
  role: string
  /** plain-text line, e.g. 'PhD, University of Melbourne - 12 years teaching' */
  credentials?: string
  bio: string
  /** animates as a count-up ticker */
  students?: number
  studentsLabel?: string
}

Frequently asked questions

How do I install the Instructor Panel component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/instructor-panel`. 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 Instructor Panel require?

Instructor Panel uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Instructor Panel 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.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services