newspapercn-ui
A One Piece Newspaper-Themed Component Library Built on shadcn/ui
Mysterious Library Emerges From the New World: shadcn/ui Variant Brings Newspaper Aesthetics to Modern Web
By the News Coo Editorial Board
Reports have confirmed the arrival of a powerful new force in the world of frontend development. Dubbed “newspapercn-ui,” this shadcn/ui variant brings the unmistakable aesthetic of the World Economic Journal to any React application. Developers across the Grand Line have begun integrating its cream parchment backgrounds, serif typography, and editorial design into their projects.
The library harnesses the OKLCH color space for precise color tokens — warm parchment in light mode, rich ink-dark browns in dark mode. Typography is anchored by Playfair Display for headlines, Libre Baskerville for body text, and Montserrat for UI elements. Sharp corners at 0.125rem radius complete the editorial aesthetic that sets it apart from every other component library on the sea.
At present, the registry contains ten custom components inspired by the One Piece universe — from the Masthead that crowns every gazette to the Poneglyph Code blocks that render source code as ancient stone tablets. In addition, thirteen base shadcn components have been enhanced with newspaper-specific CVA variants, including editorial buttons, section badges, article cards, and ornamental separators.
Installation requires only a single CLI command through the shadcn registry. Every component — theme, masthead, wanted poster, and beyond — can be added individually, ensuring developers take only what they need. Built on Next.js 15, React 19, and Tailwind CSS v4, the library represents the latest in modern web standards while maintaining the timeless charm of print journalism.
Official Bounties: Registry Components at a Glance
The World Government has placed the following bounties on these components. Install them at your own risk.
Most Wanted: Featured Components
Three specimens captured in the wild, each displaying a distinct variant of the Wanted Poster component.
WANTED
DEAD OR ALIVE
“The Herald”Masthead
฿90,000,000
WANTED
DEAD OR ALIVE
“Dead or Alive”Wanted Poster
฿85,000,000
WANTED
DEAD OR ALIVE
“The Ancient Text”Poneglyph Code
฿60,000,000
What Developers Are Saying
The following Den Den Mushi transmissions were intercepted by our correspondents in the field.
Big News Morgans
This is the biggest scoop in frontend development since CSS Grid! Every developer on the Grand Line needs this library. I've already dispatched News Coos to spread the word — cream parchment backgrounds, serif type, and editorial design for all!
Today
Ancient Installation Texts
These sacred commands have been deciphered from the Poneglyphs. Click “Decipher” to reveal the installation instructions.
# Step 1: Install the newspaper themenpx shadcn@latest add https://newspapercn-ui.vercel.app/r/newspaper-theme.json # Step 2: Add any component you neednpx shadcn@latest add https://newspapercn-ui.vercel.app/r/masthead.jsonnpx shadcn@latest add https://newspapercn-ui.vercel.app/r/wanted-poster.jsonnpx shadcn@latest add https://newspapercn-ui.vercel.app/r/bounty-table.json1import { Masthead } from "@/components/newspapercn/masthead";2import { WantedPoster } from "@/components/newspapercn/wanted-poster";3import { ColumnLayout } from "@/components/newspapercn/column-layout";4 5export default function MyGazette() {6 return (7 <>8 <Masthead9 title="My Gazette"10 tagline="News from the New World"11 variant="broadsheet"12 />13 <ColumnLayout columns={2} dropCap justified>14 <p>Your editorial content here...</p>15 </ColumnLayout>16 <WantedPoster17 name="Monkey D. Luffy"18 bounty={3_000_000_000}19 />20 </>21 );22}