# Docket — Law Firm Tailwind Template

> For litigation boutiques that win on results: a law firm tailwind template with the whole site, an intake form and a citation beside every claim. 7 routes.

- Price: $24, one-time
- License: Standard
- Version: 1.3.3
- Category: Local business
- 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
- 44 components
- 71 design tokens plus 71 dark overrides

## Pages

| Path | Sections |
| --- | --- |
| `/` | `site-header`, `hero`, `practice-index`, `assertions`, `record-strip`, `partner-statement`, `engagement-cta`, `site-footer` |
| `/practice` | `site-header`, `practice-brief`, `practice-doctrine`, `practice-standard`, `practice-matters`, `practice-questions`, `practice-team`, `engagement-cta`, `site-footer` |
| `/matters` | `site-header`, `record-index`, `record-summary`, `engagement-cta`, `site-footer` |
| `/matter` | `site-header`, `matter-caption`, `matter-docket`, `matter-argument`, `matter-outcome`, `engagement-cta`, `site-footer` |
| `/counsel` | `site-header`, `counsel-roster`, `counsel-profile`, `counsel-standard`, `engagement-cta`, `site-footer` |
| `/engagement` | `site-header`, `engagement-form`, `engagement-terms`, `engagement-hours`, `engagement-contact`, `site-footer` |
| `/components` | `site-header`, `hero`, `practice-index`, `assertions`, `record-strip`, `partner-statement`, `engagement-cta`, `practice-brief`, `practice-doctrine`, `practice-standard`, `practice-matters`, `practice-team`, `record-index`, `record-summary`, `matter-caption`, `matter-docket`, `matter-argument`, `matter-outcome`, `counsel-roster`, `counsel-profile`, `counsel-standard`, `engagement-form`, `engagement-terms`, `engagement-contact`, `site-footer` |

## Components

| Name | What it renders |
| --- | --- |
| `site-header` | Masthead on the board: wordmark, primary navigation with aria-current on the open route, mode toggle, and a compact menu that closes on Escape |
| `hero` | Editorial slab (A6): the H1 at --text-d4 over a 7/5 split carrying the deck, the first chair's ink plate as the byline, both actions and the firm's derived figures |
| `practice-index` | Four hairline-ruled practice rows with lead counsel and the count of matters filtered from the record |
| `assertions` | The authority margin at full size: three claims, each bound to the filing that proves it |
| `record-strip` | Three caption plates from the record, with the prior-results disclaimer |
| `partner-statement` | The ink band on home: one statement at display size, attributed against the derived verdict total |
| `engagement-cta` | One primary action with cost, timing and the privilege boundary answered beside it |
| `practice-brief` | The practice route's opener: forum tags beside a four-row ledger of verdicts, listed matters and lead counsel |
| `practice-doctrine` | The authority margin on the practice route: three positions with the matters that established them |
| `practice-standard` | The practice route's ink band and container break |
| `practice-matters` | The practice's own matters as a ruled list of caption, question, citation and disposition |
| `practice-questions` | Five questions a general counsel asks first, as disclosures ruled like docket entries, each carrying the figure its answer turns on |
| `practice-team` | Lawyers filtered from the roster by practice, with bar admissions in the citation register |
| `record-index` | The public record as a semantic table: matter, court, docket, practice and disposition, with column priority below lg |
| `record-summary` | Totals printed beside their own arithmetic, plus the matters that are deliberately not listed |
| `matter-caption` | A filing's caption block at full size: parties, court, docket and term |
| `matter-docket` | The docket sheet as a chronological mono list, keeping the clerk's own entry numbers |
| `matter-argument` | The authority margin on a single matter: what was argued and which docket entry carried it |
| `matter-outcome` | Disposition, elapsed time computed from the docket, and the full citation to copy |
| `counsel-roster` | The full roster ruled like a signature block: role, year called, practices and admissions |
| `counsel-profile` | One lawyer at depth, with personal figures printed against the firm's derived totals and the matters she led |
| `counsel-standard` | The counsel route's ink band and container break |
| `engagement-form` | The intake form: eight controls on native constraints, a numbered error summary, focus routed to it or to the single failing control, a disabled busy fieldset, and a receipt that replaces the panel |
| `engagement-terms` | Three fee bases as a full-bleed table of applicability, terms and who carries the risk |
| `engagement-hours` | Office hours beside the clerk's filing counter at the court each office files in, as machine-readable times, plus the after-hours line |
| `engagement-contact` | Two offices as addresses, the walk to the court each one files in, the transit line, and a directions link derived from the street |
| `site-footer` | Colophon on the deeper board band: wordmark, practice links, offices and the attorney-advertising notice |
| `ui/authority` | The signature: the authority margin list, the standalone authority stack, and the fixture-to-row mapper that enforces 'no filing, no row' |
| `ui/badge` | Eyebrow, disposition chip with a domain status, icon and word, and neutral fact tag |
| `ui/board` | The board as a material: a pressboard macro used as a luminance mask over --board-fibre, so the page ground has tooth in both modes from one asset |
| `ui/button` | Primary, secondary and quiet variants with hover, active, pressed, pending and disabled states |
| `ui/caption-block` | The head of a filing on a paper plate, in compact and full appearance variants |
| `ui/citation` | A citation line: caption above, docket and court in the mono register |
| `ui/container` | Three measures — prose, default and wide |
| `ui/field` | Field, Input, Textarea, Select and ReadOnlyValue: one supporting line at error, success or description precedence, and five states on a computed --field-border |
| `ui/ink-band` | The full-bleed inversion band: one statement, one attribution, no focusable element |
| `ui/logo` | The brand mark: a filed page with its corner turned |
| `ui/mode-toggle` | Light and dark flip, applied to the .tt-docket wrapper or the document root |
| `ui/portrait` | A lawyer's portrait as an ink plate — one 3:4 asset per person, darker than the board in light and lighter than it in dark, and never with type on it |
| `ui/section-heading` | Eyebrow, heading and lede as one stack, with ink or inverted surface policy |
| `ui/type` | The type ladder and shared display, mono, radius and focus class strings |
| `ui/accordion-disclosure` | One graph, two recipes: a ruled question row with a mono qualifier in the margin, and the masthead's shadowed menu plate |
| `ui/form` | The submit flow as one paper plate: native constraints, a busy fieldset that refuses a second send, and a named receipt focus lands on |
| `ui/form-error-summary` | The refused-answers panel: a counted heading, an ordered list numbered in Courier, and one link per field |
## Design tokens

| Token | Light | Dark override |
| --- | --- | --- |
| `--background` | `#e9d6be` | `#13100d` |
| `--foreground` | `#211c17` | `#eeeae7` |
| `--card` | `#faf8f5` | `#2b2723` |
| `--card-foreground` | `#211c17` | `#eeeae7` |
| `--primary` | `#761013` | `#f58076` |
| `--primary-foreground` | `#faf6f3` | `#140a09` |
| `--primary-hover` | `#5f0006` | `#fe9b91` |
| `--primary-active` | `#450003` | `#febab3` |
| `--secondary` | `#d6c1a7` | `#211d1a` |
| `--secondary-foreground` | `#251f1b` | `#e9e6e2` |
| `--muted` | `#f0ede9` | `#38332f` |
| `--muted-foreground` | `#5f5a54` | `#afaaa4` |
| `--accent` | `#ffebe8` | `#3e2725` |
| `--accent-foreground` | `#761013` | `#fea097` |
| `--border` | `#b1a9a0` | `#45403c` |
| `--ring` | `#16120e` | `#f6f3f0` |
| `--surface-sunken` | `#e8e3dd` | `#1c1916` |
| `--surface-overlay` | `#fefdfb` | `#3b3632` |
| `--surface-ink` | `#1e1814` | `#050302` |
| `--surface-ink-foreground` | `#efece9` | `#e2dfdb` |
| `--shadow-color` | `#201914` | `#030101` |
| `--board-fibre` | `#fff7ee` | `#968c81` |
| `--board-fibre-strength` | `0.28` | `0.14` |
| `--field` | `#ffffff` | `#0f0b09` |
| `--field-border` | `#6e6860` | `#867f79` |
| `--control-border` | `#4c4740` | `#aaa39d` |
| `--selection` | `#ecd9d6` | `#4b2b28` |
| `--selection-foreground` | `#211c17` | `#eeeae7` |
| `--selection-border` | `#7c504c` | `#b0726b` |
| `--link` | `#761013` | `#f58076` |
| `--link-hover` | `#560106` | `#fea198` |
| `--positive` | `#215e32` | `#79c58e` |
| `--positive-soft` | `#dbeede` | `#193220` |
| `--positive-border` | `#51825b` | `#538a63` |
| `--warning` | `#7b5100` | `#eaba6d` |
| `--warning-soft` | `#ffefd6` | `#3a2b12` |
| `--warning-border` | `#9d753b` | `#9e793d` |
| `--critical` | `#bc1e00` | `#fd8c7b` |
| `--critical-soft` | `#fee0d9` | `#47211b` |
| `--critical-border` | `#b63d29` | `#c45d4e` |
| `--info` | `#2a5885` | `#88b9ec` |
| `--info-soft` | `#daeafa` | `#1a2e42` |
| `--info-border` | `#577ea5` | `#5b84ae` |
| `--weight-display` | `500` | `400` |
| `--radius` | `0.25rem` | `0.25rem` |
| `--radius-inner` | `0.125rem` | `0.125rem` |
| `--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` | `2.25rem` | `2.25rem` |
| `--leading-d2` | `1.16` | `1.16` |
| `--text-d3` | `clamp(2.25rem, 1.784rem + 1.989vw, 3.375rem)` | `clamp(2.25rem, 1.784rem + 1.989vw, 3.375rem)` |
| `--leading-d3` | `1.08` | `1.08` |
| `--text-d4` | `clamp(2.75rem, 1.792rem + 4.088vw, 5.0625rem)` | `clamp(2.75rem, 1.792rem + 4.088vw, 5.0625rem)` |
| `--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.03em` | `-0.03em` |
| `--tracking-label` | `0.09em` | `0.09em` |
| `--font-display` | `var(--font-docket-display), ui-serif, Georgia, serif` | `var(--font-docket-display), ui-serif, Georgia, serif` |
| `--font-text` | `var(--font-docket-text), ui-sans-serif, system-ui, sans-serif` | `var(--font-docket-text), ui-sans-serif, system-ui, sans-serif` |
| `--font-sans` | `var(--font-text)` | `var(--font-text)` |
| `--font-mono` | `var(--font-docket-mono), ui-monospace, 'Courier New', monospace` | `var(--font-docket-mono), ui-monospace, 'Courier New', monospace` |
## Use it

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

## Links

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