What Is This?

The Dev Realm Neo UI is a production-ready neo-brutalist design system built for developers who are tired of soft, forgettable UIs. It ships as a monorepo with four focused packages — a pure CSS core and native component libraries for React, Vue 3, and Svelte — all sharing the same brutal visual language.

The system is built around a strict set of principles: heavy borders, hard-offset shadows with zero blur, flat bold colours, uppercase headings, and hover interactions that push and pull rather than fade. It's opinionated by design.

Key Highlights

• Framework-agnostic core — @thedevrealm/neo-css works in any project via CDN or npm; all other packages build on top of it
• Four packages, one language — React, Vue 3, and Svelte adapters expose identical component APIs so teams can mix frameworks freely
• Tailwind preset — drop-in preset that maps all neo-brutalist tokens into your Tailwind config
• Rich component set — buttons, cards, forms, alerts, tags, badges, stat cards, decorative strips, animated skeletons, and more
• 6-class animation library — fade-in-up, shimmer, float, gentle bounce, slow ping, and gradient-shift — all CSS, no JS
• Design tokens — colour palette, spacing, shadow depths, and border weights all exposed as CSS custom properties
• Monorepo with pnpm workspaces — clean publish pipeline; each package versioned independently on npm
• Portfolio-grade aesthetic — used across The Dev Realm brand's own products

Packages

Design Principles

Quick Start

1 · CSS only (any framework)

<!-- CDN -->
<link rel="stylesheet" href="https://unpkg.com/@thedevrealm/neo-css/dist/neo.css" />

<button class="neo-btn neo-btn-primary neo-btn-md">CLICK ME</button>
<div class="neo-card" style="padding:1.5rem">Card content</div>

2 · React

npm i @thedevrealm/neo-css @thedevrealm/neo-react

import '@thedevrealm/neo-css/dist/neo.css'
import { NeoButton, NeoCard, NeoAlert, NeoTag } from '@thedevrealm/neo-react'

export default function Demo() {
  return (
    <NeoCard variant="brand" style={{ padding: '1.5rem' }}>
      <NeoTag variant="accent" rotated>Hot</NeoTag>
      <h2>Neo Card</h2>
      <NeoButton variant="primary">Get Started</NeoButton>
      <NeoAlert variant="success" title="Done">Changes saved.</NeoAlert>
    </NeoCard>
  )
}

3 · Vue 3

npm i @thedevrealm/neo-css @thedevrealm/neo-vue

// main.ts
import '@thedevrealm/neo-css/dist/neo.css'
import { createApp } from 'vue'
import NeoVue from '@thedevrealm/neo-vue'
import App from './App.vue'

createApp(App).use(NeoVue).mount('#app')

<template>
  <NeoCard variant="brand">
    <NeoButton variant="primary">Click</NeoButton>
    <NeoAlert variant="warning" title="Heads up">Check your settings.</NeoAlert>
  </NeoCard>
</template>

4 · Svelte

npm i @thedevrealm/neo-css @thedevrealm/neo-svelte

<script>
  import '@thedevrealm/neo-css/dist/neo.css'
  import { NeoButton, NeoCard } from '@thedevrealm/neo-svelte'
</script>

<NeoCard variant="brand">
  <NeoButton variant="accent">Boost</NeoButton>
</NeoCard>

5 · Tailwind CSS preset

// tailwind.config.js
const neoPreset = require('@thedevrealm/neo-css/tailwind-preset')

module.exports = {
  presets: [neoPreset],
  content: ['./src/**/*.{html,js,ts,jsx,tsx,vue,svelte}'],
}

CSS Class Reference

Buttons

Cards

Tags & Badges

Forms

Alerts

Decorative

Animations

Monorepo Development

This repo uses pnpm workspaces.

# Install all deps
pnpm install

# Build all packages
pnpm build

# Build a single package
pnpm --filter @thedevrealm/neo-css build
pnpm --filter @thedevrealm/neo-react build

Publishing to npm

pnpm build

pnpm --filter @thedevrealm/neo-css    publish --access public
pnpm --filter @thedevrealm/neo-react  publish --access public
pnpm --filter @thedevrealm/neo-vue    publish --access public
pnpm --filter @thedevrealm/neo-svelte publish --access public

Project Structure

thedevrealm-ui/
├── packages/
│   ├── neo-css/          # Core CSS tokens, classes, animations
│   │   ├── src/
│   │   ├── dist/         # Built output (neo.css)
│   │   └── tailwind-preset.js
│   ├── neo-react/        # React component library (TypeScript)
│   ├── neo-vue/          # Vue 3 component library
│   └── neo-svelte/       # Svelte 4 component library
├── docs/                 # Design system documentation
├── assets/               # Repo assets (banner etc.)
├── package.json          # Monorepo root
└── pnpm-workspace.yaml

License

MIT — © The Dev Realm