Cohort Countdown Strip

Installation

pnpm dlx shadcn@latest add @cleverui/cohort-countdown-strip

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

Usage

tsx

import { CohortCountdownStrip } from '@/components/blocks/cohort-countdown-strip'

Exampletsx

import { CohortCountdownStrip } from '@/components/blocks/cohort-countdown-strip'

export default function CohortCountdownStripDemo() {
  return (
    <div className="mx-auto w-full max-w-6xl px-4 py-10 sm:px-6 sm:py-14">
      <CohortCountdownStrip
        heading="Enrolment closes soon"
        cohortLabel="October cohort"
        closesAt="2026-07-26T17:00:00.000Z"
        closesAtLabel="Closes Fri 26 Jul, 5pm"
        now="2026-07-13T12:00:00.000Z"
        seatsLeft={12}
        ctaLabel="Save your seat"
        ctaHref="#enrol"
      />
    </div>
  )
}

API reference

CohortCountdownStrip accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Enrolment closes soon'`	–
`cohortLabel`*	`string`	–	which intake, e.g. 'October cohort'
`closesAt`*	`Date \| string`	–	countdown target datetime (ISO string ok)
`closesAtLabel`*	`string`	–	PREFORMATTED visible close date, e.g. 'Closes Fri 26 Jul, 5pm', the only date text ever rendered server-side
`now`	`Date \| string`	–	reference time for deterministic SSR/demos; live clients omit and resolve post-mount
`seatsLeft`	`number`	–	renders a rounded-full 'N seats left' chip when provided
`ctaLabel`	`string`	`'Save your seat'`	–
`ctaHref`	`string`	`'#'`	–

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

Related components

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.

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.

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 Cohort Countdown Strip component?

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

Cohort Countdown Strip 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 Cohort Countdown Strip 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