npm package: @grindhub/shadcn-theme
Description: Shared shadcn/ui theme for POVlib projects
Latest version: 1.0.0

# @povlib/shadcn-theme

Shared shadcn/ui theme for POVlib projects.

## Installation

### Option 1: Install from Git (Recommended)

```bash
npm install git+https://github.com/your-org/flashback.git#packages/shadcn-theme
```

Or add to `package.json`:

```json
{
  "dependencies": {
    "@povlib/shadcn-theme": "git+https://github.com/your-org/flashback.git#packages/shadcn-theme"
  }
}
```

### Option 2: Install from npm (if published)

```bash
npm install @povlib/shadcn-theme
```

## Prerequisites

### Font Setup (Required)

Components use `font-poppins` class which requires Poppins font to be loaded.

**For Next.js:**

```tsx
// In your layout.tsx or _app.tsx
import { Poppins } from "next/font/google";

const poppins = Poppins({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700", "900"],
  variable: "--font-poppins",
});

export default function RootLayout({ children }) {
  return (
    <html>
      <body className={poppins.variable}>
        {children}
      </body>
    </html>
  );
}
```

**For other frameworks:**

Load Poppins from Google Fonts and set the CSS variable:

```html
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;900&display=swap" rel="stylesheet">
```

Then in your CSS:

```css
:root {
  --font-poppins: 'Poppins', sans-serif;
}
```

**Tailwind Config:**

Make sure your Tailwind config includes the font:

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        poppins: ['var(--font-poppins)', 'sans-serif'],
      },
    },
  },
}
```

## Usage

### 1. Import the theme in your CSS

In your `globals.css` or root layout CSS file:

```css
@import '@povlib/shadcn-theme/theme.css';
```

Or if using a relative path:

```css
@import '../node_modules/@povlib/shadcn-theme/theme.css';
```

### 2. Copy components.json

Copy the `components.json` file from the main flashback repo to your project root:

```json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/lib/components",
    "utils": "@/lib/lib/utils",
    "ui": "@/lib/components/ui",
    "lib": "@/lib/lib",
    "hooks": "@/lib/hooks"
  }
}
```

**Note:** Update the `aliases` paths to match your project structure if different.

### 3. Add components via shadcn CLI

Now you can add any shadcn/ui component and it will automatically use this theme:

```bash
npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add card
# etc.
```

## Theme Features

- **Light & Dark Mode**: Full support with CSS variables
- **Custom Colors**: oklch color space for better color accuracy
- **Custom Shadows**: Multiple shadow levels for depth
- **Sidebar Support**: Complete sidebar theming
- **Font Variables**: Sans, serif, and mono font stacks
- **Border Radius**: Consistent radius system

## Updating the Theme

When the theme is updated in the main repo:

1. Update the package version in `packages/shadcn-theme/package.json`
2. Pull the latest changes in your project
3. Reinstall: `npm install`

## Customization

The theme uses CSS variables, so you can override any value in your own CSS:

```css
:root {
  --primary: oklch(0.9 0.2 90); /* Override primary color */
}
```