@farm-junction/design-library

Farm Junction React design system — design tokens, components, Storybook docs, and a Tailwind 4 preset for consuming apps.

Stack

• React 19 + TypeScript 5
• Tailwind CSS 4 (@theme tokens)
• Storybook 8 (Vite)
• Vite library build (ESM + types + CSS)

Scripts

| Command | Description | |---------|-------------| | npm run dev | Start Storybook on port 6006 | | npm run build | Typecheck and build dist/ | | npm run build-storybook | Static Storybook build | | npm run lint | ESLint |

Development

npm install
npm run dev

Open http://localhost:6006 to browse components and token swatches.

Package exports

| Import path | Description | |-------------|-------------| | @farm-junction/design-library | React components, cn, tokens | | @farm-junction/design-library/styles.css | Compiled component styles | | @farm-junction/design-library/tailwind-preset | Tailwind 4 theme + base for app integration |

Usage in a Next.js app

1. Install

Or publish to your registry and install as usual.

npm install @farm-junction/design-library

2. Import compiled styles

In your root layout (e.g. app/layout.tsx):

import "@farm-junction/design-library/styles.css";

3. Extend Tailwind 4 in your app CSS

In app/globals.css (or your main CSS entry):

@import "tailwindcss";
@import "@farm-junction/design-library/tailwind-preset";

Adjust the @source path if your app lives in a monorepo or uses a different node_modules layout.

4. Use components

import { Button } from "@farm-junction/design-library";

export default function Page() {
  return <Button variant="primary">Get started</Button>;
}

Project structure

src/
├── tokens/          # @theme CSS + TS token mirror
├── styles/          # Tailwind entry (dev + build)
├── components/      # React components + stories
├── lib/utils.ts     # cn() helper
├── tailwind-preset.css
└── index.ts         # Public API

Adding a component

1. Create src/components/MyComponent/MyComponent.tsx
2. Add MyComponent.stories.tsx for Storybook
3. Export from src/components/index.ts and src/index.ts
4. Use Tailwind utilities that reference @theme tokens (e.g. bg-primary)