@jobnest/ui

Jobnest's shared React component package. It wraps Base UI primitives with the project's Tailwind v4 theme, interaction states, and accessibility defaults used by the Jobnest app.

The README is intentionally stable: it covers package purpose, style integration, and development workflow. The current component surface is best explored in Storybook and the source exports, since those change alongside the app.

Usage

Consume the package through the workspace package name:

import { ... } from "@jobnest/ui";

React and React DOM are peer dependencies. Base UI, class variance helpers, and class name utilities are package dependencies.

Styles

Components rely on the Jobnest CSS theme tokens and Tailwind utility classes. Use one of the two supported style integration paths.

Tailwind app pipeline

Use this when the consuming app already runs Tailwind v4. This is the path used by apps/jobnest.

@import "./variants.css";
@import "tailwindcss";
@import "@jobnest/ui/theme.css";
@source "../../../../packages/ui/src/**/*.{ts,tsx}";

@custom-variant dark (&:where(.dark, .dark *));

In this setup:

• @jobnest/ui/theme.css provides the theme tokens, utility helpers, and global base styles.
• @source makes Tailwind scan the UI package source so component utility classes are generated by the consuming app.
• The app owns any app-specific tokens and layout utilities.

Compiled stylesheet

Use this when the consuming app should load the UI package's generated CSS directly.

@import "@jobnest/ui/styles.css";

@jobnest/ui/styles.css points at the package build output. Run the package build before relying on this export locally.

Component Docs

Storybook is the source of truth for component examples, supported states, and visual review.

pnpm --filter @jobnest/ui storybook

For the exact public API, check src/index.ts and the component source. Keeping that API out of this README avoids stale documentation when components evolve.

Development

pnpm --filter @jobnest/ui storybook
pnpm --filter @jobnest/ui build-storybook
pnpm --filter @jobnest/ui typecheck
pnpm --filter @jobnest/ui lint
pnpm --filter @jobnest/ui format
pnpm --filter @jobnest/ui build

Storybook stories live in src/stories and cover the exported components and their primary states.