# Gazette — Theme for React

> A print / newspaper theme preset: a warm-newsprint editorial panel with a serif masthead, a red section kicker, folio rules, a spanning headline with an italic deck, a small-caps byline, justified body columns with column rules and a drop-cap, and a genuine halftone-dot photo. The switcher cycles editions, swapping content and paper tone (cream / gray / sepia) with a soft page crossfade. ARIA tablist over a tabpanel; reduced motion swaps instantly.

- Page: https://crucibleui.com/components/themes/gazette
- Category: [themes](https://crucibleui.com/components/themes)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: motion
- npm dependencies: motion

## Install

```bash
npx shadcn@latest add @crucible/gazette
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/gazette`.

## Props (`GazetteProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `editions?` | `GazetteEdition[]` | `three built-in front pages` | Editions the switcher cycles through. |
| `edition?` | `number` | — | Controlled edition index. |
| `defaultEdition?` | `number` | `0` | Initial edition index when uncontrolled. |
| `onEditionChange?` | `(index: number) => void` | — | Fires with the next edition index on every switch. |
| `columns?` | `number` | `3` | Body column count. |
| `accent?` | `string` | `"#b3261e"` | Section-kicker / drop-cap / active-tab accent (the red). |
| `tones?` | `Partial<Record<GazetteTone, Partial<GazetteTonePalette>>>` | — | Per-tone palette overrides, deep-merged over the built-in tones. |
| `showSwitcher?` | `boolean` | `true` | Render the edition switcher chrome. |
| `duration?` | `number` | `0.5` | Seconds a page-swap crossfade takes. |
| `paused?` | `boolean` | `false` | Freeze all transitions to an instant static swap. |
| `label?` | `string` | `"Choose an edition"` | Accessible label for the switcher tablist. |

Also accepts: `Omit<React.ComponentPropsWithoutRef<"article">, "onChange">`.

## Usage example

```tsx
"use client";

import * as React from "react";

import { Gazette } from "@/components/crucible/gazette";

export default function GazetteDemo() {
  const [edition, setEdition] = React.useState(0);

  return (
    <div className="relative isolate flex h-full min-h-[360px] w-full items-center justify-center overflow-hidden rounded-xl bg-neutral-950 py-10">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(255,255,255,0.04),transparent_70%)]"
      />
      <div className="relative z-10 flex w-full flex-col items-center gap-4 px-6">
        <Gazette edition={edition} onEditionChange={setEdition} />
        <p className="text-center text-sm text-neutral-500">
          Change the edition — click a label, or focus it and use the arrow keys.
        </p>
      </div>
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through.