Assurtiv UI Design Kit

A React component library built with Vite 5.4.20, configured for npm-style distribution with ESM and UMD bundles.

Components

• Button – Primary, secondary, and outline variants
• Input – Text input with optional error state
• Label – Form label with optional required indicator

Installation

npm install assurtiv-ui-design-kit

Ensure React 18+ is installed in your project (peer dependency).

Usage

Important: Import the design styles in your app entry (e.g. main.tsx or App.tsx):

import 'assurtiv-ui-design-kit/style.css'

Then use the components:

import { LibButton, LibInput, LibLabel } from 'assurtiv-ui-design-kit'

function MyForm() {
  return (
    <form>
      <LibLabel htmlFor="email" required>Email</LibLabel>
      <LibInput id="email" type="email" placeholder="[email protected]" />
      <LibButton variant="primary" type="submit">Submit</LibButton>
    </form>
  )
}

Development

# Install dependencies
npm install

# Run dev server (demo page)
npm run dev

# Build library
npm run build

# Type check
npm run type-check

Tailwind CSS Preset

To use all Tailwind utilities with the design kit theme (colors, typography, etc.) in your app:

1. Install Tailwind (peer dependency): npm install tailwindcss postcss autoprefixer
2. Add the preset to your tailwind.config.js:

module.exports = {
  presets: [require('assurtiv-ui-design-kit/tailwind.preset')],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/assurtiv-ui-design-kit/**/*.{js,ts,jsx,tsx}',
  ],
}

Then use any Tailwind class (flex, p-4, bg-primary, text-muted-foreground, etc.) in your app.

Build Output

• dist/assurtiv-ui-design-kit.js – ESM bundle
• dist/assurtiv-ui-design-kit.umd.cjs – UMD bundle
• dist/style.css – Design system styles (Tailwind, theme variables, typography)
• dist/*.d.ts – TypeScript declarations

License

MIT