@syedrehaman/uikit

A lightweight React UI kit powered by Tailwind CSS. Currently includes a flexible Text component for consistent typography.

Installation

Install the package and its peer dependencies:

npm install @syedrehaman/uikit react react-dom

(You also need Tailwind configured in your host app. See below.)

Tailwind Setup (Host Project)

If you haven't already set up Tailwind CSS in the consuming project:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js minimal example:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@syedrehaman/uikit/dist/**/*.{js,ts}'
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          400: '#6366f1',
          600: '#4f46e5'
        }
      }
    }
  },
  plugins: []
}

In your global CSS (e.g. src/index.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

Usage

import { Text } from '@syedrehaman/uikit';

export function Example() {
  return (
    <div className="space-y-2">
      <Text size="xl" weight="semibold">Heading XL</Text>
      <Text size="lg" color="muted">Muted large body text</Text>
      <Text as="p" size="sm" color="primary" weight="medium">Primary small</Text>
      <Text as="p" truncate className="w-40">This is a long line that will truncate</Text>
    </div>
  );
}

Text Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | as | React.ElementType | 'span' | Underlying element tag/component | | size | 'xs'|'sm'|'base'|'md'|'lg'|'xl'|'2xl'|'3xl' | 'base' | Font sizing presets | | weight | 'light'|'normal'|'medium'|'semibold'|'bold' | 'normal' | Font weight | | color | 'default'|'muted'|'primary'|'danger'|'success'|'warning' | 'default' | Color style | | nowrap | boolean | false | Prevent wrapping | | truncate | boolean | false | Apply single-line truncation | | className | string | – | Additional utility classes |

Development

Local build:

npm run build

Story / playground via Vite:

npm run dev

Publishing (Maintainers)

1. Ensure you are logged in: npm login
2. Bump version in package.json (respect semver)
3. Run: npm run release

The script builds and publishes with --access public.

License

MIT © Syed Rehaman