Styling Guide - Nounjs

Choose Your Style

Nounjs Tailwind Default

Custom Tailwind-based component classes with noun- prefix

bunx @noundryfx/nounjs create my-app
# or
bunx @noundryfx/nounjs create my-app --tailwind

Example Classes

<button class="noun-btn-primary">Primary</button>
<button class="noun-btn-secondary">Secondary</button>
<div class="noun-card">
  <div class="noun-card-body">Content</div>
</div>
<span class="noun-badge-success">Active</span>
<input class="noun-input" />
<table class="noun-table noun-table-hover">

Basecoat UI

shadcn/ui-inspired component library

bunx @noundryfx/nounjs create my-app --basecoat

Example Classes

<button class="btn">Primary</button>
<button class="btn-secondary">Secondary</button>
<button class="btn-destructive">Destructive</button>
<button class="btn-outline">Outline</button>
<div class="card">
  <header>Title</header>
  <section>Content</section>
</div>
<span class="badge">Badge</span>
<input class="input" />

Class Reference

Component	Nounjs Tailwind	Basecoat UI
Primary Button	`noun-btn-primary`	`btn`
Secondary Button	`noun-btn-secondary`	`btn-secondary`
Outline Button	`noun-btn-outline`	`btn-outline`
Ghost Button	`noun-btn-ghost`	`btn-ghost`
Danger Button	`noun-btn-danger`	`btn-destructive`
Text Input	`noun-input`	`input`
Card	`noun-card`	`card`
Badge	`noun-badge-success`	`badge`
Table	`noun-table`	`table`
Spinner	`noun-spinner`	`spinner`

Setup & Configuration

Tailwind Config

tailwind.config.js

module.exports = {
  content: [
    './index.html',
    './app.js',
    './src/**/*.{js,noun,html}',
    './components/**/*.js'
  ],
  theme: {
    extend: {
      // Your customizations
    }
  },
  plugins: []
}

CSS Entry Point

src/styles/globals.css

@import "tailwindcss";

/* Your custom styles */
.custom-class {
  /* ... */
}

/* Component overrides */
.noun-btn-primary {
  /* ... */
}

Initialize Styling in Existing Project

# Initialize Tailwind CSS in an existing project
noun init-css

# With Basecoat
noun init-css --basecoat

This creates tailwind.config.js, src/styles/globals.css, and sets up the build process.

Both Built on Tailwind CSS v4

Both styling options are built on Tailwind CSS v4, giving you access to all utility classes, custom configurations, and the modern CSS-first approach.

Dark mode support Responsive utilities Custom themes CSS variables Automatic purging