@therealokoro/nuxt-ui

A shadcn-clean Nuxt UI v4 theme layer. Provides consistent neutral-toned component defaults, tighter icon sizing, subtle variants, and refined typography.

🚧 WIP - Work in Progress

Usage

pnpm add @nuxt/ui @therealokoro/nuxt-ui

Include the package in the extends array in nuxt.config

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ['@therealokoro/nuxt-ui'],
  modules: ['@nuxt/ui']
})

All component overrides, design tokens, and global styles are applied automatically. Your project can override anything via its own app/app.config.ts or app/assets/css/main.css.

What's included

Design tokens (app/assets/css/main.css)

• Font: Inter (sans) / JetBrains Mono (mono)
• Palette: Zinc neutrals with custom green primary (overridable)
• Text contrast: Tightened --ui-text-* ladder for light/dark
• Body: 14px / 1.625 leading with font smoothing
• Globals: Scrollbar, disabled state, link defaults, focus ring, transitions

Component overrides (app/app.config.ts)

Category	Details
Defaults	All components default to color: neutral. Button defaults to variant: outline.
Button	Neutral/outline uses ring-default. Icon sizes scaled down (md: size-3.5).
Card	variant: subtle default. Uniform p-4 padding. bg-default ring ring-muted.
Input/Select/Textarea	Softer ring-default borders. Icons reduced. subtle variant with ring-muted.
Badge	size: sm default. Icon sizes scaled down proportionally.
Modal	Tighter p-4 slots. shadow-md ring ring-muted.
DropdownMenu	Icons reduced across all sizes. items-center slot merge.
KBD	variant: ghost default — bare text with semantic color variants.
Tooltip	Compact: h-5 px-2 text-[11px], ring-muted, scale-in/out animation.
Table	Tighter px-3 py-2.5 cells. text-xs uppercase headers with tracking.
Table, InputTags, Avatar, Link	Softer colors, ring-muted borders, neutral avatar fallback.
28 components total	Icon sizes audited across every size variant (xs–xl). See app/app.config.ts.

Development

pnpm install
pnpm dev        # http://localhost:3000
pnpm build
pnpm typecheck

Publishing

# Remove "private": true from package.json, then:
npm publish

Consumers install it as a dependency and reference it in extends.