A NieR:Automata (YoRHa) inspired theme for shadcn/ui, Tailwind CSS v4, and Uniwind (React Native).
Dark mode ("the Bunker")
Live demo: https://wendylabsinc.github.io/wendy-theme/
Sand and ink. Hard offset shadows. Zero border radius. A grid-textured backdrop and menu buttons that fill with a dark bar when you hover them — straight out of the YoRHa interface.
Glory to mankind.
- Light mode — the "field unit" sand palette (
#d1cdb7/#454138) - Dark mode — the "Bunker" negative
- 100% stock shadcn/ui components: the entire look is CSS variables plus a
handful of
data-slotoverrides. No component forks.
npm install
npm run devOpen http://localhost:3000 — a sidebar-01 shell with a kitchen sink of
every shadcn/ui component, themed. Use the sun/moon toggle for the Bunker
variant.
wendy-theme is distributed as a shadcn registry item — one command, no packages.
# 1. Create an app (Next.js shown; Vite/Astro/etc. work too)
npx create-next-app@latest my-app --typescript --tailwind --app
cd my-app
# 2. Set up shadcn/ui
npx shadcn@latest init
# 3. Apply wendy-theme
npx shadcn@latest add https://wendylabsinc.github.io/wendy-theme/r/wendy.json
# 4. Add whatever components you need — they come out themed
npx shadcn@latest add button card dialog sidebarJust step 3 — the theme drops into any project on Tailwind v4 with
components.json. (The raw GitHub URL also works:
https://raw.githubusercontent.com/wendylabsinc/wendy-theme/main/public/r/wendy.json.)
Applying the theme gives you:
- all shadcn color tokens for
:rootand.dark --radius: 0rem(everything goes square)- the signature CSS: grid backdrop, button bar-fill hover, hard offset shadows on cards/popups, squared avatars/switches/checkboxes/sliders
- the
wendy-*utility classes
Copy the :root, .dark, and signature-effects blocks from
app/globals.css into your own globals.css. Everything
below the @theme inline block is the theme.
Works with React Native Reusables — the shadcn/ui port for React Native — styled by Uniwind or NativeWind:
-
Copy
themes/wendy-native.cssinto your project. -
In your
global.css:@import "tailwindcss"; @import "./wendy-native.css"; /* keep the @theme inline mapping that React Native Reusables generates */
The native build is token-only (colors + radius). The pseudo-element effects (grid texture, bar-fill hover) are web-only.
A ready-made native showcase lives in
examples/wendy-theme-native — an Expo app
built from the React Native Reusables minimal-uniwind template with the
wendy palette applied, demoing buttons, cards, inputs, switches, and more
with a light/dark toggle:
cd examples/wendy-theme-native
npm install
npm run ios # iOS Simulator (Xcode required; runs in Expo Go)
npm run android # Android emulator
npm run dev # scan the QR code with Expo Go on a physical phoneUniwind has no native modules, so no dev build is needed — stock Expo Go works.
| Class | Effect |
|---|---|
wendy-title |
Spaced uppercase with a hard drop shadow — h1 treatment |
wendy-heading |
Uppercase with the square YoRHa marker |
wendy-bars |
Hairline top/bottom rules — h2 treatment |
wendy-stripes |
Blockquote-style left stripes |
wendy-grid |
Grid texture for any panel |
Two extra CSS variables are available for your own components:
--wendy-grid (grid line color) and --wendy-shadow (hard shadow color).
- Theme source of truth:
app/globals.css - Distribution:
registry.json→npx shadcn build→public/r/wendy.json. Edit both when changing tokens. - Demo:
app/page.tsx+components/demos/
- Palette adapted from metakirby5/yorha (MIT)
- Built on shadcn/ui, Base UI, Tailwind CSS, and Next.js
- NieR:Automata is a trademark of Square Enix. This is a fan-made visual homage, not affiliated with or endorsed by Square Enix.