# The Dev Realm — Neo-Brutalist UI Kit > This is the llms.txt file for @mariojgt/neo-css. > It follows the llms.txt convention (https://llmstxt.org) so that LLMs and AI tools > can understand this project and assist users effectively. ## Project - **Name**: @mariojgt/neo-css (The Dev Realm Neo UI Kit) - **Type**: CSS design system / component library (npm package) - **Style**: Neo-Brutalist — bold 3px borders, hard offset box-shadows, uppercase typography, dark surfaces - **License**: MIT - **GitHub**: https://github.com/mariojgt/thedevrealm-neo - **npm**: https://www.npmjs.com/package/@mariojgt/neo-css - **Showcase**: https://mariojgt.github.io/thedevrealm-neo/ - **Docs**: https://mariojgt.github.io/thedevrealm-neo/getting-started.html ## Packages The monorepo ships 4 packages: | Package | Description | |---|---| | @mariojgt/neo-css | Core CSS — tokens, components, animations. Zero JS dependency. | | @mariojgt/neo-react | React component wrappers | | @mariojgt/neo-vue | Vue 3 component wrappers | | @mariojgt/neo-svelte | Svelte component wrappers | ## Installation ### CDN (plain HTML — no build tool) ```html ``` ### npm ```bash npm install @mariojgt/neo-css ``` ### Import in JS (Vite / webpack / Next.js / Nuxt / Astro / SvelteKit) ```js import '@mariojgt/neo-css/dist/neo.css' ``` ### Next.js App Router ```js // app/layout.js import '@mariojgt/neo-css/dist/neo.css' export default function RootLayout({ children }) { return {children} } ``` ### Nuxt 3 ```js // nuxt.config.ts export default defineNuxtConfig({ css: ['@mariojgt/neo-css/dist/neo.css'] }) ``` ### Tailwind preset ```js // tailwind.config.js module.exports = { presets: [require('@mariojgt/neo-css/tailwind-preset')], } ``` ## Dist files - `dist/neo.css` — full bundle (tokens + base + all components + animations) - `dist/tokens.css` — CSS custom properties only - `dist/components.css` — all component classes (includes base helpers) - `dist/animations.css` — keyframe animations only ## Design Tokens (CSS Custom Properties) ```css :root { --neo-brand: #0d9668; /* primary green */ --neo-brand-light: #2bb885; --neo-brand-dark: #047857; --neo-surface: #0c1222; /* darkest surface */ --neo-surface-light: #131d33; --neo-surface-lighter:#1a2742; --neo-body-bg: #080d19; --neo-accent: #e6930a; /* orange */ --neo-accent-dark: #c27706; --neo-border-color: #3a506e; --neo-muted: #8594b0; --neo-subtle: #4b5c7a; --neo-white: #ffffff; --neo-black: #000000; --neo-border: 3px solid var(--neo-border-color); --neo-radius: 0.375rem; --neo-shadow: 5px 5px 0 #000; --neo-shadow-sm: 4px 4px 0 #000; --neo-shadow-lg: 6px 6px 0 #000; --neo-shadow-xl: 8px 8px 0 #000; --neo-font-sans: ui-sans-serif, system-ui, sans-serif; --neo-font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace; } ``` ## Components ### Buttons ```html ``` ### Cards ```html
Basic card — lifts on hover
Card with brand top bar
Stat / metric card
``` ### Badges & Tags ```html Live Beta Error Default Tag Accent tag ``` ### Alerts ```html
✓

Success

Message text here.
``` ### Forms ```html
``` ### Table ```html
NameScore
Alice9,800
``` ### Accordion ```html
Content.
``` ### Modal ```html

Title

Body content.
``` ### Tooltip (pure CSS) ```html ``` ### Skeleton Loader ```html
``` ### Avatar ```html
MJ
AB
A
B
+3
``` ### Keyboard Shortcut Badge ```html Press ⌘ K to open command palette. Esc to close. ``` ### Command Palette (⌘K) ```js // Open the built-in command palette neoCommandOpen() // Register custom commands neoCommandRegister([ { icon: '🏠', label: 'Go Home', action: () => location.href = '/' }, { icon: '⚡', label: 'New Game', badge: 'hot', action: startGame }, ]) // Keyboard shortcut ⌘K / Ctrl+K registered automatically ``` ### Toast ```js neoToast('Message here', 'success') // success | error | warning | info ``` ### Leaderboard ```html
#PlayerScore
🥇 playerone 142,830
``` ### Rarity Item Cards ```html
👑

Crown of Ages

Legendary

``` ### Text utilities ```html

Brand green

Accent orange

Muted grey

Subtle grey

Gradient heading

``` ### Background / texture utilities ```html
``` ## Gaming JS Helpers These functions are available when using the full `neo.js` from the showcase: ```js neoShake(element, intensity, duration) // camera shake toggleGlitch(element) // toggle glitch text effect neoAchievement(title, desc, icon) // achievement toast popup neoComboHit(element) // increment combo counter neoComboReset(element) // reset combo neoParticles(x, y, color, count) // particle burst at position neoFlash(color, duration) // screen flash neoTypewriter(element, text, speed) // typewriter animation startCharge(button) // charge button animation cancelCharge(button) // cancel charge ``` ## Theming ```js // Switch theme at runtime (persisted in sessionStorage) setNeoTheme('emerald') // default green setNeoTheme('violet') // purple setNeoTheme('crimson') // red ``` ## Source structure ``` packages/neo-css/ src/ tokens.css — CSS custom properties base.css — reset + text utilities + noise animations.css — keyframe animations components/ buttons.css cards.css tags.css forms.css table.css toggle.css alerts.css decorative.css kbd.css tooltip.css skeleton.css avatar.css accordion.css modal.css command-palette.css gaming.css — rarity cards, leaderboard dist/ neo.css — full bundle tokens.css components.css animations.css scripts/build.js — plain Node.js build script tailwind-preset.js — Tailwind CSS preset ``` ## Key conventions - All classes are prefixed with `neo-` to avoid collisions - Modifier pattern: `neo-btn neo-btn-{variant}` — base class + modifier - State pattern: add `open` class to activate modals/accordions - Tooltip: data attribute `data-tip="…"` on any element — pure CSS, no JS - Responsive: uses CSS Grid with `auto-fill` — no breakpoint utility classes needed - Animations: add class `neo-animate-{name}` or call JS helpers for JS-driven effects --- Last updated: 2026-04-22 Project: https://github.com/mariojgt/thedevrealm-neo