@sesamehr/react-design-system

React components and design tokens for the Sesame HR design system.

📖 Component documentation — this package's Storybook. The Vue source of truth has its own at vue-storybook.sesametime.com.

Install

npm install @sesamehr/react-design-system react react-dom tailwindcss

Usage

Import the stylesheet once at your app entry:

import '@sesamehr/react-design-system/style.css';

That stylesheet paints this package's components and nothing else. It carries no reset and no utility classes, so importing it cannot restyle the application around it — see What the stylesheet does not do.

Every component is exported with the Ox prefix:

import {
  OxAvatar,
  OxButton,
  OxFieldGroup,
  OxFieldLabel,
  OxFieldMessage,
  OxInputText,
} from '@sesamehr/react-design-system';
import { useState } from 'react';

export function Example() {
  const [email, setEmail] = useState('');

  return (
    <>
      <OxAvatar initials="SH" size="lg" dataTestid="user-avatar" />

      <OxFieldGroup variant="error">
        <OxFieldLabel htmlFor="email">Email</OxFieldLabel>
        <OxInputText
          id="email"
          field={email}
          onFieldChange={setEmail}
          placeholder="[email protected]"
        />
        <OxFieldMessage variant="error">Invalid email</OxFieldMessage>
      </OxFieldGroup>

      <OxButton variant="default">Save</OxButton>
    </>
  );
}

Design tokens

The stylesheet already contains the tokens. To @reference the raw token layers from your own Tailwind setup:

@import '@sesamehr/react-design-system/assets/styles/mainTheme.css';

What the stylesheet does not do

style.css contains this package's component rules and its tokens. It deliberately does not contain:

• Preflight, or any other global reset. The components assume one — they are written against box-sizing: border-box, button { font: inherit } and the rest — but installing it is the application's call, not a library's. If your app has Tailwind, you already have it. If it does not:

  import '@sesamehr/react-design-system/preflight.css';
  

• Utility classes. No .h-10, no .p-4, no .bg-brand. Every component carries its own ox-prefixed class and the declarations are compiled into it, so nothing here can collide with the identically-named utilities your own Tailwind build emits from your scale.

Component rules ship inside @layer components, which is where a Tailwind app already sorts them: after base, before utilities. So a utility you pass in wins — <Button className="w-full"> is full width — without needing !important.

Tokens are published under an --ox- prefix: override --ox-color-brand-500 to retheme, not --color-brand-500. Unprefixed, those are the names Tailwind itself uses, and declaring them at :root would change what every rounded-2xl in your application means.

License

MIT © Sesame HR