CYBR//UI：以 shadcn 安裝的賽博龐克粗獷主義動畫 React 元件庫

I just shipped CYBR//UI, an open-source library of animated React components with one design language: Cyberpunk Brutalism. That means hard edges, offset shadows, mechanical motion, scanlines, HUD corners and hazard tape.

The problem

If you want a React site that feels like a terminal, a game HUD or a classified file, your options aren't great:

Neutral kits like shadcn/ui are excellent, but you have to restyle every component.
Animated copy-paste libraries have the motion but usually a glassy, soft look.
Cyberpunk and brutalist resources are mostly moodboards and vector packs, not components.

So I treated the design system as the product, and the components as the way to deliver it.

What's in it

38 components in 7 sets:

Buttons: Hard-Offset, Glitch, HUD Bracket, Terminal, Hazard
Text & Motion: Decrypt Text, Typewriter Terminal, Glitch Heading, Telemetry Counter
Layout & Cards: Bento Grid, Spec Card, Access/ID Card, Classified Card and more
Tooltip & Marquee: HUD Tooltip, Classified FAQ Accordion, Ticker Marquee, Warning Tape
Backgrounds: Blueprint Grid, Perspective Grid, CRT Overlay, Data Rain, Exposed Wiring
Navigation & Loaders: Terminal Navbar, Status Bar, Monolith Footer, Boot Sequence Loader
Interactive: Command Palette (⌘K), Pixelated Image Trail, Data-Readout Carousel

There are also three colour themes (the default orange, plus Acid Terminal and Ice Neon). You switch with a data-theme attribute on <html> or on any element.

How you install it

CYBR//UI is a shadcn registry, so the CLI copies the source straight into your project. There's no package to depend on, and you own the code from then on.

Map the namespace in components.json:

"registries": { "@cybr": "https://cybr-ui.com/r/{name}.json" }

Then add a component:

npx shadcn@latest add @cybr/hard-offset-button

Or add everything:

npx shadcn@latest add @cybr/all

Finally, import the tokens and effects after Tailwind in globals.css. The README has the full steps.

How it's built

Next.js App Router + Tailwind CSS v4. Colours, borders, shadow offsets and motion timings are all CSS variables, so a theme is one small file.
Plain CSS animation. There's no animation library to install.
Base UI for the accessible primitives behind tooltips, accordions and the command palette.
Reduced motion is respected. Every animated component has a static fallback under prefers-reduced-motion.
The docs site uses the library. cybr-ui.com is built from its own components, so it doubles as the showcase.
CI on every pull request: lint, type checks, the registry build, Playwright visual snapshots, and reduced-motion and keyboard checks.

Who it's for

Front-end and creative developers building portfolios, landing pages and product sites
Indie hackers and devtool, AI, security or gaming startups that want a technical, edgy brand
Music, nightlife and fashion brands: techno labels, club nights, streetwear
Anyone using AI coding tools, which can pull components through the registry too

You'll need to be comfortable with React, the Next.js App Router and Tailwind. It isn't a no-code tool.

Try it

Docs and live previews: https://cybr-ui.com
Source (MIT): https://github.com/JLTDigital/cybr-ui

Feedback, issues and component requests are very welcome. What would you build with it?