Installation (as NPM Package)

Install the UI Kit in a consuming project:

npm install @namuna-nur/ui-kit
# or
yarn add @namuna-nur/ui-kit

Peer Dependencies

Ensure the host project already has:

{
  "react": "^19",
  "react-dom": "^19"
}

Importing Components

import { Button, Avatar, TabGroup } from '@namuna-nur/ui-kit'

export function Example() {
  return <Button variant="primary">Click me</Button>
}

On-Demand (Subpath) Imports

You can also import category entry points for potentially smaller bundles:

import { Button } from '@namuna-nur/ui-kit/atoms'
import { TabGroup } from '@namuna-nur/ui-kit/molecules'

You are all set! Happy coding!

Styles & Tailwind Setup

This kit relies on Tailwind utility classes. In the consumer project:

1. Install Tailwind & plugins (if not already):

npx tailwindcss init -p

2. Add the package to the content array so classes are not purged:

// tailwind.config.js
module.exports = {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@namuna-nur/ui-kit/**/*.{js,ts,jsx,tsx}'
  ],
  theme: { extend: {} },
  plugins: [require('tailwindcss-animate')]
}

3. IMPORTANT: include the UI kit Tailwind preset (colors/fonts/typography tokens).

If your Tailwind config is ESM/TS (recommended):

// tailwind.config.ts (or tailwind.config.mjs)
import uiKitPreset from '@namuna-nur/ui-kit/tailwind.preset'

export default {
  presets: [uiKitPreset],
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@namuna-nur/ui-kit/**/*.{js,ts,jsx,tsx}',
  ],
}

If your config is CommonJS, switch it to tailwind.config.mjs so you can import the preset. 4. Import the base stylesheet once (usually in your root layout):

import '@namuna-nur/ui-kit/style.css'

Fonts

The UI kit ships TT Hoves as an optional font bundle (kept separate so style.css stays small).

To enable it in a consuming app:

import '@namuna-nur/ui-kit/fonts.css'

If you already manage fonts in your app, you can skip this and keep your own font pipeline.

Tree-Shaking

The package is shipped as ES modules (module + exports map). Unused exports are tree-shakable provided your bundler (Vite, Webpack 5, Next.js, etc.) is configured for production. CSS side effect is declared via sideEffects to keep required styles.

SSR / Next.js

No browser-only code during module evaluation. Components that depend on window guard internally. If you meet a hydration warning, report it in the repository issues.

Design Tokens

Tokens can be imported directly:

import { colors, typography } from '@namuna-nur/ui-kit/tokens'

Versioning & Release Workflow

Recommended strategy: Conventional Commits + semantic versioning.

1. Commit changes using prefixes (feat:, fix:, chore:).
2. Run tests & build locally: npm test && npm run build.
3. Bump version (choose one):

npm version patch   # bug fix
npm version minor   # backward-compatible features
npm version major   # breaking changes

4. Push with tags:

git push origin HEAD --follow-tags

5. Publish (if you have access):

npm publish --access public

First-Time Publish Checklist

• [ ] You are logged in: npm whoami
• [ ] Package name is available (scoped private vs public expected)
• [ ] files includes only distributable artifacts (lib)
• [ ] No .env / secrets committed

Automated Release (CI idea)

Use a GitHub/GitLab pipeline:

1. Install deps
2. Run lint, tests
3. Build
4. If branch = main AND tag starts with v: run npm publish with NODE_AUTH_TOKEN.

FAQ

Why are React & ReactDOM peer dependencies?
To prevent duplicate React instances and keep bundle size minimal.

Can I tree-shake tokens?
Yes—import only what you need.

ESM only?
Yes. If you need CJS, use a transpilation step in your app bundler.

Copyright

This project is solely owned by (c) Namuna - NUR. All rights reserved.