@muskanmeet/invoicing-design-system

v0.1.2

Published

a month ago

Invoicing UI design system — tokens, Tailwind preset and shadcn-based React components.

0High
0Medium
0Low

@yourteam/invoicing-ui

Design system powering the Invoicing app — design tokens, a Tailwind preset, and shadcn-based React components on top of Radix primitives.

Install

npm install @yourteam/invoicing-ui
# peer deps
npm install react react-dom tailwindcss tailwindcss-animate

Usage

1. Import the CSS once

In your app entry (e.g. app/layout.tsx, pages/_app.tsx, main.tsx):

import "@yourteam/invoicing-ui/styles.css";

styles.css includes @tailwind base/components/utilities plus the token CSS variables. If you already manage your own Tailwind entry, import just the tokens instead:

@import "@yourteam/invoicing-ui/tokens.css";

2. Extend the Tailwind preset

// tailwind.config.ts
import type { Config } from "tailwindcss";
import preset from "@yourteam/invoicing-ui/tailwind-preset";

export default {
  presets: [preset],
  content: [
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    // include the package so its class names survive purging
    "./node_modules/@yourteam/invoicing-ui/dist/**/*.{js,mjs,cjs}",
  ],
} satisfies Config;

3. Use components

import { Button, Card, CardContent, tokens } from "@yourteam/invoicing-ui";

export function Example() {
  return (
    <Card>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  );
}

Dark mode

Toggle the .dark class on <html> (or any ancestor) — all tokens swap to their dark equivalents automatically.

What ships

| Entry | What it is | | ------------------------------------------- | ----------------------------------- | | @yourteam/invoicing-ui | All components, hooks, tokens, cn | | @yourteam/invoicing-ui/tailwind-preset | Tailwind preset (theme + plugins) | | @yourteam/invoicing-ui/styles.css | Tailwind entry + token CSS vars | | @yourteam/invoicing-ui/tokens.css | Just the token CSS vars |

Development

npm install
npm run build       # bundle ESM + CJS + d.ts to dist/
npm run dev         # watch mode
npm run typecheck

The build uses tsup. Output goes to dist/ with react, react-dom, tailwindcss, and tailwindcss-animate left external.

Releasing

This package follows Semantic Versioning and Keep a Changelog.

Make your changes on a branch.
Add an entry under ## [Unreleased] in CHANGELOG.md.
Bump the version:
- npm version patch — bug fixes only
- npm version minor — additive, backward-compatible changes
- npm version major — breaking changes (renamed exports, removed components, changed token names, etc.)
Move the Unreleased block under a new ## [x.y.z] - YYYY-MM-DD heading.
Publish:
```
npm publish
```
prepublishOnly runs clean + build automatically.
Push the tag created by npm version so the release is traceable:
```
git push --follow-tags
```

What counts as breaking

Removing or renaming an exported component, hook, or token.
Changing a component's required props or default behavior.
Renaming a CSS variable or Tailwind token (--ds-*, color names, etc.).
Changing the Tailwind preset in a way that alters existing class output.

Anything else (new components, new props with defaults, new tokens, internal refactors) is minor or patch.