Getting Started
Install the Grand Line Gazette theme and start building with newspaper-styled components.
Installation
newspapercn-ui works with any existing shadcn/ui project. Install the theme first, then add individual components.
1. Install the theme
npx shadcn@latest add https://newspapercn-ui.vercel.app/r/newspaper-theme.json
2. Add font imports
Add these imports to your root layout file:
import "@fontsource-variable/playfair-display"; import "@fontsource/libre-baskerville"; import "@fontsource/libre-baskerville/700.css"; import "@fontsource/libre-baskerville/400-italic.css"; import "@fontsource-variable/montserrat";
3. Add components
npx shadcn@latest add https://newspapercn-ui.vercel.app/r/wanted-poster.json
Theme: Grand Line Gazette
Primary (Navy)
Secondary (Sepia)
Accent (Red)
Muted
Fonts: Playfair Display (headings), Libre Baskerville (body), Montserrat (UI)
Radius: 0.125rem (sharp editorial corners)
Colors: OKLCH color space with warm cream, dark ink, navy, sepia, and red accent tokens