@sesamehr/react-design-system
v0.1.0
Published
Sesame HR React design system — components and design tokens
Readme
@sesamehr/react-design-system
React component library and design tokens for the Sesame HR design system.
Accessible, composable components built on Radix UI and styled with Tailwind CSS v4, shipped as an ESM + UMD bundle with full TypeScript types.
Installation
npm install @sesamehr/react-design-systemThis package has peer dependencies you must install alongside it:
npm install react react-dom tailwindcss| Peer | Supported range |
| ------------- | -------------------- |
| react | ^18.3.0 \|\| ^19.0.0 |
| react-dom | ^18.3.0 \|\| ^19.0.0 |
| tailwindcss | ^4.1.7 |
Usage
Import the stylesheet once at your app root, then use the components:
// main.tsx / App entry — import the compiled styles once
import '@sesamehr/react-design-system/style.css';import { Button, Avatar, Alert } from '@sesamehr/react-design-system';
export function Example() {
return (
<div>
<Avatar initials="SH" size="lg" />
<Button variant="default">Save</Button>
<Alert>Saved successfully.</Alert>
</div>
);
}Design tokens
The compiled stylesheet already includes the tokens. If you want the raw token
layers (e.g. to @reference them from your own Tailwind setup), they are
exported separately:
@import '@sesamehr/react-design-system/assets/styles/mainTheme.css';cn utility
The class-merging helper used internally is also exported:
import { cn } from '@sesamehr/react-design-system/lib/utils';Components
- Buttons — Button
- Forms — Input, InputNumber, InputGroup, Combobox, Checkbox, Switch, RadioButton, Toggle, Field
- Data — Table (sorting, selection, pinning, row drag & drop, pagination), TablePagination, Avatar cells
- Display — Avatar, AvatarGroup, Badge, PaymentCard
- Feedback — Alert, Dialog, Popover, Tooltip, StatusBadge, Bullet
- Navigation — Tabs, Accordion, Breadcrumb
- Layout — Resizable
- Transitions — Fade, Expand, Flip, Bounce, SlideX, SlideY
All components ship with TypeScript definitions and support ref forwarding.
Dark mode
Components react to the dark class on a parent element (typically <html>):
document.documentElement.classList.toggle('dark', isDark);License
MIT © Sesame HR