@eml-payments/ui-kit

A fully-typed, design token-driven React UI Kit for modern web apps, powered by TailwindCSS, HeadlessUI, and Tanstack Table.
Built for fast integration, deep customization, and a great developer experience.

✨ Features

• Full TypeScript support — all types exported
• Design token based theming (via context provider)
• Easy theme override (colors, radius, fonts, etc)
• Composable, accessible components (Button, Input, Table, etc)
• Powered by TailwindCSS, HeadlessUI, Tanstack Table
• Ready-to-use Storybook with live playground
• Clean API, tree-shakable, zero CSS conflicts

🚀 Installation

npm install @eml-payments/ui-kit

Note:
You must also have react and react-dom (v18+), and TailwindCSS set up in your app.

🎨 Usage

1. Import the CSS for styles and tokens:

import '@eml-payments/ui-kit/style.css';

2. Wrap your app in the UIKitProvider (optional: pass your design tokens):

import React from 'react';
import { UIKitProvider } from '@eml-payments/ui-kit';

const theme = {
	colors: {
		primary: { light: "#0A5FFF", dark: "#7c80f8" },
		success: { light: "#12D176", dark: "#16c784" },
		error: '#d7263d',
		// ...override any design token here
	},
	radius: '10px',
	fontFamily: 'Inter, sans-serif',
};

export default function App() {
	return <UIKitProvider config={theme}>{/* Your app code */}</UIKitProvider>;
}

3. Use components anywhere under the provider:

import { Button, Input, Table } from "@eml-payments/ui-kit";

<Button variant="primary">Primary Button</Button>
<Input label="Email" placeholder="[email protected]" />

🛠️ Theming & Configuration

You can fully override the theme tokens using the config prop:

type UIKitConfig = {
	colors?: {
		primary?: string | { light: string; dark: string };
		secondary?: string | { light: string; dark: string };
		accent?: string | { light: string; dark: string };
		success?: string | { light: string; dark: string };
		warning?: string | { light: string; dark: string };
		error?: string | { light: string; dark: string };
		[key: string]: string | undefined;
	};
	radius?: string; // e.g. "8px"
	fontFamily?: string;
	// ...extend as needed
};

Any value not set falls back to a sensible default.

📚 Documentation & Storybook

• Interactive Docs & Playground:
  run locally: npm run storybook

📦 Components

• Button — variants: primary, secondary, ghost, destructive, loading
• Input — label, error state
• Table — full Tanstack Table v8 support, any data shape

(…and more coming soon!)

🧩 Example: Table

import { Table } from '@eml-payments/ui-kit';

const columns = [
	{ header: 'Name', accessorKey: 'name' },
	{ header: 'Email', accessorKey: 'email' },
];
const data = [
	{ name: 'Alice', email: '[email protected]' },
	{ name: 'Bob', email: '[email protected]' },
];

<Table columns={columns} data={data} />;

📝 License

MIT © EML Payments