ARLO UIKit
npm install @eml-payments/ui-kitsh
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:
`tsx
import '@eml-payments/ui-kit/style.css';
`
2. Wrap your app in the UIKitProvider (optional: pass your design tokens):
`tsx
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 {/ Your app code /} ;
}
`
3. Use components anywhere under the provider:
`tsx
import { Button, Input, Table } from "@eml-payments/ui-kit";
`
---
🛠️ Theming & Configuration
You can fully override the theme tokens using the config prop:
`ts
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
`tsx
import { Table } from '@eml-payments/ui-kit';
const columns = [
{ header: 'Name', accessorKey: 'name' },
{ header: 'Email', accessorKey: 'email' },
];
const data = [
{ name: 'Alice', email: 'alice@email.com' },
{ name: 'Bob', email: 'bob@email.com' },
];
;
``