@peace_node/next v1.0.0

@peace_node/next

ClubStyle design system for Next.js projects. A comprehensive design system with Tailwind CSS tokens, typography, and semantic styling optimized for Next.js.

Installation

npm install @peace_node/next

Quick Setup

Run the interactive setup:

npx clubstyle-setup

This will:

• Install required dependencies (tailwindcss, autoprefixer, postcss)
• Create CSS file with all design tokens (detects app/ or src/ structure)
• Setup tailwind.config.js and postcss.config.js

Manual Setup

1. Install dependencies:

npm install --save-dev tailwindcss autoprefixer postcss

2. Create your Tailwind config:

// tailwind.config.js
const { createNextConfig } = require('@peace_node/next');

module.exports = createNextConfig();

3. Create your CSS file:

/* app/globals.css or src/styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

4. Import in your app:

// app/layout.tsx (App Router)
import './globals.css'

// or pages/_app.tsx (Pages Router)
import '../styles/globals.css'

Usage

Use all ClubStyle design tokens in your components:

export default function HomePage() {
  return (
    <div className="bg-background text-foreground">
      <h1 className="text-sans-4xl font-bold text-primary">
        Welcome to ClubStyle
      </h1>
      <p className="text-serif-lg text-muted-foreground">
        Beautiful typography and colors
      </p>
      <button className="bg-dodger-blue-500 text-white px-4 py-2 rounded">
        Get Started
      </button>
    </div>
  )
}

Features

• 🎨 OKLCH Color System: Dodger blue and hydrant red palettes
• 📝 Typography Tokens: Sans, serif, and mono with xs-9xl sizes
• 🌙 Dark Mode: Automatic CSS variable switching
• 🎯 Semantic Colors: Primary, secondary, muted, destructive, etc.
• 📱 Semantic HTML: Automatic styling for headings, paragraphs, lists
• ⚡ Next.js Optimized: Perfect integration with both App and Pages Router

App Router vs Pages Router

The setup automatically detects your Next.js structure:

• App Router: Creates app/globals.css
• Pages Router with src/: Creates src/styles/globals.css
• Pages Router: Creates styles/globals.css

License

MIT