Jo Design System

A React UI component library with clean, accessible components for building modern interfaces.

Installation

npm install jo-design-system

Setup

Import the stylesheet once in your app's entry point:

import 'jo-design-system/dist/style.css'
// or: import 'jo-design-system/dist/jo-design-system.css'

Components

Button

import { Button } from 'jo-design-system'

<Button variant="primary" icon={<PlusIcon />}>New Item</Button>
<Button variant="secondary">Cancel</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button disabled>Disabled</Button>

Props: variant ('primary' | 'secondary'), size ('sm' | 'md' | 'lg'), icon, disabled, className

TextInput

import { TextInput } from 'jo-design-system'

<TextInput label="Email" placeholder="[email protected]" helperText="We'll never share your email." />
<TextInput label="Name" errorMessage="This field is required" />
<TextInput disabled placeholder="Disabled" />

Props: label, helperText, errorMessage, error, disabled, className, plus all native <input> props

Dropdown

import { Dropdown, MultiSelectDropdown } from 'jo-design-system'

const options = [
  { label: 'Option One', value: 'one' },
  { label: 'Option Two', value: 'two' },
  { label: 'Option Three', value: 'three' },
]

<Dropdown options={options} value={selected} onChange={setSelected} searchable />
<Dropdown variant="white" placeholder="Choose..." />
<MultiSelectDropdown options={options} value={selectedValues} onChange={setSelectedValues} />

Dropdown Props: options, value, onChange, placeholder, searchable, variant ('filled' | 'white'), disabled, error, className

MultiSelectDropdown Props: options, value (array), onChange, placeholder, variant, disabled, className

DataTable

import { DataTable, DataTableSection, DataRow } from 'jo-design-system'

<DataTable title="All Data">
  <DataTableSection title="Contact Info">
    <DataRow field="Name" value="Jane Doe" finalValue="Jane Doe" status="Verified" bold />
    <DataRow field="Email" value="[email protected]" status="Single Source" />
    <DataRow field="Phone" value="-" status="No Data" />
  </DataTableSection>
</DataTable>

DataTable Props: title, columns (array of header labels), className DataTableSection Props: title, defaultCollapsed DataRow Props: field, value, finalValue, status, statusBadge, bold, showChevron, onClick

Loading

import { Spinner, LoadingIndicator, Skeleton } from 'jo-design-system'

<Spinner />
<Spinner size="md" />
<Spinner size="lg" />

<LoadingIndicator text="Fetching data..." />

<Skeleton variant="text" width={180} />
<Skeleton variant="title" width={200} />
<Skeleton variant="avatar" width={40} height={40} />
<Skeleton variant="badge" width={80} />
<Skeleton variant="block" width="100%" height={120} />

Spinner Props: size ('sm' | 'md' | 'lg'), className LoadingIndicator Props: text, className Skeleton Props: variant ('text' | 'title' | 'badge' | 'avatar' | 'block'), width, height, className

Design Tokens (CSS Variables)

The library uses CSS custom properties that you can override:

:root {
  --jo-bg: #FFFFFF;
  --jo-bg2: #F5F5F5;
  --jo-bg3: #FAFBFA;
  --jo-fg: #1A1A1A;
  --jo-fg2: #575957;
  --jo-fg3: #949694;
  --jo-border: #E5E5E5;
  --jo-border2: #F0F0F0;
  --jo-accent: #38C51B;
  --jo-error: #C51B1B;
  --jo-font: 'Inter', -apple-system, sans-serif;
}

Dark theme is supported via [data-theme="dark"] on any parent element.

License

MIT