@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

Development

npm install
npm run dev

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

Package exports

Usage in a Next.js app

1. Install

Or publish to your registry and install as usual.

npm install @farm-junction/design-library

`

2. Extend Tailwind 4 in your app CSS

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

@import 'tailwindcss';
@source "../node_modules/@farm-junction/design-library/dist";
@import '@farm-junction/design-library/theme.css';

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

3. 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)