@dimaan/ui

Shared React UI component library for Diman company projects.

Built with React 19, TypeScript, Tailwind CSS v4, and a CSS-first design token system. Distributed as dual ESM/CJS with full type definitions, intended for Vite-based dashboard apps.

Documentation

• USAGE.md — full consumer guide: install, Tailwind setup, framework-specific examples (Next.js / Vite / Remix), theming, and pitfalls.
• CONTRIBUTING.md — local development, adding components, testing conventions, commit/PR workflow, and the release process.

Install

pnpm add @dimaan/ui
# peer deps required in your app:
pnpm add react react-dom tailwindcss

Set up Tailwind v4

This library ships a Tailwind v4 preset as a CSS file. Add three lines to your app's main stylesheet:

/* app.css (or globals.css) */
@import "tailwindcss";
@import "@dimaan/ui/preset.css";
@source "../node_modules/@dimaan/ui/dist";

What each line does:

• @import "tailwindcss" — Tailwind itself.
• @import "@dimaan/ui/preset.css" — design tokens (colors, radii, fonts) become Tailwind utilities (bg-primary, text-foreground, …).
• @source "../node_modules/@dimaan/ui/dist" — tells Tailwind to scan our compiled output so utility classes used inside library components are generated. Adjust the relative path so it resolves to node_modules/@dimaan/ui/dist from your CSS file's location.

Note: Tailwind v4 is CSS-first — there is no tailwind.config.js. If your app still has one, you can delete it.

Usage

import { cn } from "@dimaan/ui";

export function Example() {
  return <div className={cn("rounded-md bg-primary p-4")} />;
}

Components will be added to this barrel as the library grows.

Theming

All design tokens are CSS variables. Override any of them in your app's CSS to re-skin the library:

:root {
  --color-primary: oklch(0.55 0.2 250);
  --radius: 0.75rem;
}

Tokens are defined in src/styles/preset.css.

Development

pnpm install
pnpm dev          # Vite playground at http://localhost:5173
pnpm test         # Vitest
pnpm typecheck    # tsc --noEmit
pnpm lint         # Biome
pnpm build        # tsup → dist/

Repository layout

src/
  index.ts              # public barrel
  lib/utils.ts          # cn() helper
  styles/preset.css     # Tailwind v4 design tokens
playground/             # Vite dev sandbox (not published)
test/setup.ts           # vitest + @testing-library/jest-dom
.changeset/             # version & changelog management
.github/workflows/      # CI + release automation

Adding a component

1. Create src/components/<name>/<name>.tsx and src/components/<name>/index.ts.
2. Re-export from src/index.ts.
3. Add a test next to it (<name>.test.tsx).

Releasing

This package uses Changesets for versioning. Releases are fully automated:

1. Open a PR with your code changes.
2. The auto-changeset workflow adds a patch changeset using your PR title — no manual step needed.
3. Need a minor or major bump instead? Run pnpm changeset locally and commit the file before opening the PR.
4. Need to skip a release entirely (docs, internal CI)? Add the skip-changeset label on the PR.
5. After merge, the release workflow opens a "chore: version packages" PR that bumps the version and updates CHANGELOG.md. Merging that PR publishes @dimaan/ui to npm and pushes a git tag.

See CONTRIBUTING.md for full details.

License

Proprietary — internal use only.