Admission Checklist

Installation

pnpm dlx shadcn@latest add @cleverui/admission-checklist

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

Usage

tsx

import { AdmissionChecklist } from '@/components/blocks/admission-checklist'

Exampletsx

import { AdmissionChecklist } from '@/components/blocks/admission-checklist'

export default function AdmissionChecklistDemo() {
  return (
    <div className="mx-auto w-full">
      <AdmissionChecklist
        heading="What you need to get in"
        intro="The list is shorter than you think, most of our best students doubted they qualified."
        required={[
          {
            label: 'A laptop from the last 5 years',
            detail:
              'Any OS works, we set up your tools together in week one.',
          },
          {
            label: 'Comfort with basic spreadsheets',
            detail:
              'If you can sort a column and write a SUM formula, you are ready.',
          },
          {
            label: '10–12 hours a week for 8 weeks',
            detail:
              'Live sessions are optional; recordings land the same evening.',
          },
          {
            label: 'A project idea you care about',
            detail:
              'Rough is fine. We help you scope it into a portfolio piece.',
          },
        ]}
        notRequired={[
          {
            label: 'A computer science degree',
            detail:
              'Our last cohort included teachers, nurses, and warehouse supervisors.',
          },
          {
            label: 'Maths beyond high school',
            detail:
              'We teach the stats you need when you need them, no calculus gate.',
          },
          {
            label: 'Prior coding experience',
            detail:
              'You will write real SQL and Python. Day one assumes zero syntax.',
          },
          {
            label: 'A full-time job already in tech',
            detail:
              'Career changers are the majority, we design around that reality.',
          },
        ]}
        fallback={{
          note: 'Still not sure you qualify?',
          ctaLabel: 'Talk to admissions, a human replies within a day',
          href: '#admissions',
        }}
      />
    </div>
  )
}

API reference

AdmissionChecklist accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'What you need to get in'`	–
`intro`	`string`	–	one encouraging plain sentence
`required`*	`AdmissionChecklistItem[]`	–	–
`requiredLabel`	`string`	`"You'll need"`	–
`notRequired`*	`AdmissionChecklistItem[]`	–	–
`notRequiredLabel`	`string`	`"You won't need"`	–
`fallback`	`AdmissionChecklistFallback`	–	eligibility escape hatch under the lists

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

Referenced types

Typestsx

export interface AdmissionChecklistItem {
  label: string
  /** one plain why-line under the requirement */
  detail?: string
}

export interface AdmissionChecklistFallback {
  note: string
  ctaLabel?: string
  href?: string
}

Related components

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.

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.

Frequently asked questions

How do I install the Admission Checklist component?

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

Admission Checklist 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 Admission Checklist 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