@bnplx/react
v0.2.0
Published
React component library for BNPL payment orchestration dashboards. 25 accessible, themeable components built with Tailwind CSS and Radix UI.
Readme
@bnplx/react
React component library for BNPL payment orchestration dashboards. 25 accessible, themeable components built with Tailwind CSS and Radix UI.
Install
npm install @bnplx/react @bnplx/tokensPeer dependencies (install what you use):
npm install react react-dom class-variance-authority clsx tailwind-mergeSetup
Import the CSS tokens in your app entry point:
import '@bnplx/tokens/css';Add the Tailwind preset to your tailwind.config.ts:
import bnplxPreset from '@bnplx/tokens/tailwind';
export default {
presets: [bnplxPreset],
content: [
'./src/**/*.{ts,tsx}',
'./node_modules/@bnplx/react/dist/**/*.js',
],
};Usage
import { Button, Card, CardContent, Badge } from '@bnplx/react';
function App() {
return (
<Card>
<CardContent>
<Badge variant="success">Active</Badge>
<Button variant="primary" onClick={() => {}}>
Approve
</Button>
</CardContent>
</Card>
);
}Components
Primitives: Button, Badge, Avatar, Input, Label, Textarea, Checkbox, Switch, Select, Separator
Layout: Card, Tabs, Dialog, FormGroup, Tooltip
Data Display: DataTable (Table), Pagination, Timeline, KPICard, StatusCardStrip, EmptyState, Skeleton
Actions: FilterPill, CopyButton, DropdownMenu, Toast
Theming
Override CSS variables to customize the theme:
:root {
--bnplx-primary: #635BFF;
--bnplx-primary-hover: #5147E5;
--bnplx-radius-sm: 6px;
}Dark mode is supported via data-theme="dark" on <html>.
License
MIT