# Seminar — Online Course Template Next.js

> For creators teaching in cohorts: a free online course template Nextjs with a catalog, a lesson workspace, a learner studio and mentors. 7 routes.

- Price: free
- License: Free
- Version: 1.4.0
- Category: Education
- Editions: React, HTML
- Dark mode: Yes
- Stack: Next.js >=15 <17, React >=19 <20, Tailwind CSS >=4 <5
- Dependencies: `lucide-react`

## What's inside

- 7 pages
- 39 components
- 68 design tokens plus 68 dark overrides

## Pages

| Path | Sections |
| --- | --- |
| `/` | `site-header`, `hero`, `learning-trail`, `course-shelf`, `cohort-band`, `mentor-notes`, `cta`, `site-footer` |
| `/courses` | `site-header`, `course-index`, `cohort-band`, `site-footer` |
| `/course` | `site-header`, `course-overview`, `learning-trail`, `mentor-notes`, `cta`, `site-footer` |
| `/lesson` | `site-header`, `lesson-shell`, `learning-trail`, `site-footer` |
| `/studio` | `learner-studio` |
| `/mentors` | `site-header`, `mentor-roster`, `mentor-notes`, `cta`, `site-footer` |
| `/components` | `site-header`, `hero`, `learning-trail`, `course-shelf`, `cohort-band`, `mentor-notes`, `course-index`, `course-overview`, `lesson-shell`, `learner-studio`, `mentor-roster`, `cta`, `site-footer` |

## Components

| Name | What it renders |
| --- | --- |
| `site-header` | Sticky Fieldnote navigation, mode toggle, mobile disclosure and course action |
| `hero` | Hard 50/50 hero pairing a short imperative proposition with the first learning-trail artifact |
| `learning-trail` | The canonical Wire Diagram route with square milestones, a critique-ready fork, mentor handoff and repair loop |
| `course-shelf` | Three course choices with outcomes, schedules and explicit formats on an asymmetric shelf |
| `cohort-band` | Full-bleed October cohort schedule, capacity, studio cadence and refund terms |
| `mentor-notes` | Named critique notes placed beside the learner artifacts they improve |
| `course-index` | Course catalog opener with a working topic filter: pressed pills narrow the real course fixtures, and a topic with no match states it plainly |
| `course-overview` | Course detail opener with syllabus facts, deliverables and one primary enrollment action |
| `lesson-shell` | Lesson workspace with progress, transcript excerpt, exercise checklist and critique handoff |
| `learner-studio` | Enrolled-learner sample with a Wire trail, next action, local submission, critique, cohort timing, version history, permissions and recoverable states |
| `mentor-roster` | Mentor directory with practice areas, office hours and critique formats |
| `cta` | Closing course action with time, cost and refund risk answered beside it |
| `site-footer` | Fieldnote brand, route links, scope note and type colophon |
| `ui/badge` | The badge family — Eyebrow, the presentational Status label, and StatusBadge, which carries a verdict about a submission as ground, edge, glyph and word so the verdict is never colour alone |
| `ui/progress` | A segmented completion rail on the theme's gap-px divider grid: one cell per milestone or check, the count drawn in words beside it, and no continuous or indeterminate variant because nothing this studio measures is either |
| `ui/avatar` | The initials square that stands in for a mentor or a learner at 40 and 48 pixels, on either the primary or the secondary ground, hidden from screen readers because the name is always printed beside it |
| `ui/button` | Primary, secondary and ghost actions using the complete state ramp and visible focus, with pressed, disabled and pending states — pending keeps its label, moves to the info surface, sets aria-busy and refuses a second press |
| `ui/container` | Prose, default and wide content measures |
| `ui/dashboard-layout` | Responsive sidebar, rail and top-bar geometry for Seminar application routes |
| `ui/field` | The form family — Field (label, control, instruction and error line on caller-supplied ids), Input, Textarea, FileInput and Checkbox, with rest, invalid, read-only and disabled surfaces, plus the fieldClasses helper |
| `ui/logo` | The Fieldnote brand mark drawn as a folded page path |
| `ui/mode-toggle` | Accessible light and dark switch scoped to Seminar |
| `ui/section-heading` | Eyebrow, section title and one-sentence lede |
| `ui/type` | Token-backed 1.250 type vocabulary and optical tracking |
| `ui/wire-figure` | Semantic renderer for src/assets/learning-trail.wire.json with cards, fork rails, connectors, loop edge and generated text alternative |
| `ui/accordion-disclosure` | Native &lt;details&gt; disclosure for the syllabus rows and both nav panels, keeping Seminar's 45deg turn and height tween while adding the Escape close the element never had |
| `ui/dialog` | The studio's modal plate — tinted header band, one hairline, three measures — used for a submission's version history and the enrolment question |
| `ui/confirm-dialog` | The withdrawal question as an alertdialog: the consequence is the described-by sentence, Cancel takes focus, and the course code is typed into a gate before the irreversible half unlocks |
| `ui/dropdown-menu` | Row actions on a submission — resubmit, download, withdraw — as a roving menu of ghost rows, with a refusal that says why |
| `ui/tooltip` | A hint on the control it came out of, drawn on the tint behind the hovered-control edge so it reads as attached rather than floating |
| `ui/popover` | The anchored note a cohort date or a mentor's office hours opens into, dismissed by Escape, an outside press or Tab |
| `ui/toast` | Submission and critique receipts in five tones, each carrying ground, edge, glyph and the tone's word so no verdict is colour alone |
| `ui/tabs` | The learner studio's view switch — brief, submission, critique — where the chosen tab wears the same selection tokens a pressed button does |
| `ui/date-picker` | The studio-slot grid that replaced a list of dates: arrow keys, Home/End, PageUp/PageDown, and square day cells that combine selected, today and out-of-month |
| `ui/skeleton` | The waiting state for the submission history — four cycled line measures, no shimmer, and a status line that says the wait in words |
| `ui/sort-head` | A sortable column head as a mono index in a ghost control, with the sorted column's ground swapped so the working column is found without reading glyphs |
| `ui/pagination` | Page targets as square mono figures on a gap-px divider grid, with the live range sentence beside them |
| `ui/toggle-group` | The course catalog's topic filter as a single-select radio group: one tab stop, arrow keys, and the selection tokens the rest of the theme uses |
| `ui/search-input` | The catalog's search box on the field family's own control ramp, with a clear control that appears only when there is something to clear and a polite result count |
## Design tokens

| Token | Light | Dark override |
| --- | --- | --- |
| `--background` | `#a8c2b7` | `#101b17` |
| `--foreground` | `#14211d` | `#eaf4ef` |
| `--card` | `#eaf4ef` | `#17251f` |
| `--card-foreground` | `#14211d` | `#eaf4ef` |
| `--primary` | `#003b31` | `#5bd7b7` |
| `--primary-foreground` | `#f4fbf8` | `#092019` |
| `--primary-hover` | `#002a22` | `#75e8c8` |
| `--primary-active` | `#001a15` | `#9af2d9` |
| `--secondary` | `#cbdcd4` | `#20342c` |
| `--secondary-foreground` | `#20342d` | `#d5e8df` |
| `--muted` | `#b7ccc2` | `#15231d` |
| `--muted-foreground` | `#374f45` | `#9eb8ac` |
| `--accent` | `#8a3517` | `#ff9a6d` |
| `--accent-foreground` | `#fff7f1` | `#291006` |
| `--border` | `#8ea99d` | `#2f443b` |
| `--ring` | `#003b31` | `#5bd7b7` |
| `--field` | `#f4fbf8` | `#0d1713` |
| `--field-border` | `#8ca79b` | `#415a4e` |
| `--control-border` | `#758d82` | `#5a746b` |
| `--selection` | `#bcd2c8` | `#264036` |
| `--selection-foreground` | `#14211d` | `#d5e8df` |
| `--selection-border` | `#8aa397` | `#43594e` |
| `--link` | `#003b31` | `#5bd7b7` |
| `--link-hover` | `#002a22` | `#75e8c8` |
| `--positive` | `#1f6b4e` | `#75d9a9` |
| `--positive-soft` | `#d7ede3` | `#173227` |
| `--positive-border` | `#4c806a` | `#4f9773` |
| `--warning` | `#764900` | `#f0c16c` |
| `--warning-soft` | `#f4e4c4` | `#392b13` |
| `--warning-border` | `#936514` | `#9a7b3e` |
| `--critical` | `#8b283a` | `#ff9aaa` |
| `--critical-soft` | `#f5dfe2` | `#3c181f` |
| `--critical-border` | `#aa4b5c` | `#ad5967` |
| `--info` | `#155b73` | `#83c9de` |
| `--info-soft` | `#d5e8ed` | `#142e36` |
| `--info-border` | `#367b8d` | `#4b8ea2` |
| `--shadow-color` | `#18352c` | `#06110d` |
| `--scrim` | `rgb(20 33 29 / 0.55)` | `rgb(6 17 13 / 0.72)` |
| `--surface-tint` | `#bdd4c9` | `#1f392f` |
| `--trail-line` | `#5f7f72` | `#557567` |
| `--radius` | `0.75rem` | `0.75rem` |
| `--radius-inner` | `0.5rem` | `0.5rem` |
| `--weight-display` | `700` | `600` |
| `--text-caption` | `0.75rem` | `0.75rem` |
| `--leading-caption` | `1.4` | `1.4` |
| `--text-small` | `0.875rem` | `0.875rem` |
| `--leading-small` | `1.45` | `1.45` |
| `--text-body` | `1rem` | `1rem` |
| `--leading-body` | `1.55` | `1.55` |
| `--text-lead` | `1.125rem` | `1.125rem` |
| `--leading-lead` | `1.6` | `1.6` |
| `--text-d1` | `1.5rem` | `1.5rem` |
| `--leading-d1` | `1.25` | `1.25` |
| `--text-d2` | `1.875rem` | `1.875rem` |
| `--leading-d2` | `1.18` | `1.18` |
| `--text-d3` | `clamp(2rem, 1.858rem + 0.606vw, 2.344rem)` | `clamp(2rem, 1.858rem + 0.606vw, 2.344rem)` |
| `--leading-d3` | `1.12` | `1.12` |
| `--text-d4` | `clamp(2.5rem, 2.322rem + 0.758vw, 2.93rem)` | `clamp(2.5rem, 2.322rem + 0.758vw, 2.93rem)` |
| `--leading-d4` | `1.05` | `1.05` |
| `--tracking-d1` | `-0.01em` | `-0.01em` |
| `--tracking-d2` | `-0.01em` | `-0.01em` |
| `--tracking-d3` | `-0.02em` | `-0.02em` |
| `--tracking-d4` | `-0.025em` | `-0.025em` |
| `--tracking-label` | `0.08em` | `0.08em` |
| `--font-display` | `var(--font-seminar-display), ui-sans-serif, system-ui, sans-serif` | `var(--font-seminar-display), ui-sans-serif, system-ui, sans-serif` |
| `--font-text` | `var(--font-seminar-text), ui-sans-serif, system-ui, sans-serif` | `var(--font-seminar-text), ui-sans-serif, system-ui, sans-serif` |
| `--font-sans` | `var(--font-text)` | `var(--font-text)` |
| `--font-mono` | `var(--font-seminar-mono), ui-monospace, monospace` | `var(--font-seminar-mono), ui-monospace, monospace` |
## Use it

- Registry: `bunx shadcn add https://tailthemes.com/r/seminar.json`
- MCP: [https://tailthemes.com/api/mcp](https://tailthemes.com/api/mcp)
- Download: [https://tailthemes.com/api/download/seminar](https://tailthemes.com/api/download/seminar)

## Links

- Product page: [https://tailthemes.com/themes/seminar](https://tailthemes.com/themes/seminar)
- Live preview: [https://tailthemes.com/preview/seminar](https://tailthemes.com/preview/seminar)
- Docs: [https://tailthemes.com/docs/seminar](https://tailthemes.com/docs/seminar)
- Manifest JSON: [https://tailthemes.com/api/themes/seminar](https://tailthemes.com/api/themes/seminar)
- Registry item: [https://tailthemes.com/r/seminar.json](https://tailthemes.com/r/seminar.json)