npm package: @lumston/ds-react
Description: Lumston Design System - React component library
Author: Lumston
Latest version: 1.6.6

# @lumston/ds-react

Lumston Design System — React component library built on top of [MUI v7](https://mui.com/) and React 19.

## Installation

```bash
npm install @lumston/ds-react
# or
pnpm add @lumston/ds-react
# or
yarn add @lumston/ds-react
```

## Peer dependencies

The following packages must be installed in your project:

```bash
npm install react@^19 react-dom@^19 \
  @mui/material@^7 @mui/system@^7 \
  @emotion/react@^11 @emotion/styled@^11 \
  minimal-shared@^1
```

> Some components have additional optional peer dependencies (see [Optional peer dependencies](#optional-peer-dependencies)).

## Setup

### 1. Import global styles

In your app entry point, import the stylesheet:

```tsx
import '@lumston/ds-react/styles.css';
```

### 2. Configure the library (optional)

```tsx
import { configureLsds } from '@lumston/ds-react';

configureLsds({
  // configuration options
});
```

### 3. Wrap your app with the MUI theme

The library requires an MUI CSS vars theme. Use MUI's `CssVarsProvider` with your theme setup:

```tsx
import { CssVarsProvider } from '@mui/material/styles';

export default function App() {
  return (
    <CssVarsProvider>
      {/* your app */}
    </CssVarsProvider>
  );
}
```

## Usage

```tsx
import { LSButton, LSTextField, LSTag } from '@lumston/ds-react';

export default function MyPage() {
  return (
    <>
      <LSButton variant="contained" color="primary">
        Click me
      </LSButton>

      <LSTextField label="Name" />

      <LSTag color="primary" variant="soft">
        Active
      </LSTag>
    </>
  );
}
```

## Components

### Inputs
| Component | Import |
|---|---|
| `LSButton` | `import { LSButton } from '@lumston/ds-react'` |
| `LSIconButton` | `import { LSIconButton } from '@lumston/ds-react'` |
| `LSCheckbox` | `import { LSCheckbox } from '@lumston/ds-react'` |
| `LSRadioButton` | `import { LSRadioButton } from '@lumston/ds-react'` |
| `LSSwitch` | `import { LSSwitch } from '@lumston/ds-react'` |
| `LSSlider` | `import { LSSlider } from '@lumston/ds-react'` |
| `LSTextField` | `import { LSTextField } from '@lumston/ds-react'` |
| `LSNumberInput` | `import { LSNumberInput } from '@lumston/ds-react'` |
| `LSAutocomplete` | `import { LSAutocomplete } from '@lumston/ds-react'` |
| `LSPhoneInput` | `import { LSPhoneInput } from '@lumston/ds-react'` |
| `LSDatePicker` + variants | `import { LSDatePicker } from '@lumston/ds-react'` |

### Typography
| Component | Import |
|---|---|
| `LSText` | `import { LSText } from '@lumston/ds-react'` |
| `LSTextLink` | `import { LSTextLink } from '@lumston/ds-react'` |
| `LSTag` | `import { LSTag } from '@lumston/ds-react'` |
| `LSTextMaxLine` | `import { LSTextMaxLine } from '@lumston/ds-react'` |

### Data Display
| Component | Import |
|---|---|
| `LSAccordion` / `LSAccordionSummary` / `LSAccordionDetails` | `import { LSAccordion } from '@lumston/ds-react'` |
| `LSBadge` | `import { LSBadge } from '@lumston/ds-react'` |
| `LSChip` | `import { LSChip } from '@lumston/ds-react'` |
| `LSDataGrid` | `import { LSDataGrid } from '@lumston/ds-react'` |
| `LSTable` | `import { LSTable } from '@lumston/ds-react'` |
| `LSTimeline` | `import { LSTimeline } from '@lumston/ds-react'` |
| `LSTransferList` | `import { LSTransferList } from '@lumston/ds-react'` |
| `LSTreeView` | `import { LSTreeView } from '@lumston/ds-react'` |

### Feedback
| Component | Import |
|---|---|
| `LSAlert` | `import { LSAlert } from '@lumston/ds-react'` |
| `LSLoader` | `import { LSLoader } from '@lumston/ds-react'` |
| `LSProgressBar` | `import { LSProgressBar } from '@lumston/ds-react'` |
| `LSRating` | `import { LSRating } from '@lumston/ds-react'` |

### Overlay
| Component | Import |
|---|---|
| `LSDialog` | `import { LSDialog } from '@lumston/ds-react'` |
| `LSDrawer` | `import { LSDrawer } from '@lumston/ds-react'` |
| `LSMenu` / `LSMenuItem` | `import { LSMenu, LSMenuItem } from '@lumston/ds-react'` |
| `LSPopover` | `import { LSPopover } from '@lumston/ds-react'` |
| `LSTooltip` | `import { LSTooltip } from '@lumston/ds-react'` |

### Navigation
| Component | Import |
|---|---|
| `LSBreadcrumb` | `import { LSBreadcrumb } from '@lumston/ds-react'` |
| `LSPagination` | `import { LSPagination } from '@lumston/ds-react'` |
| `LSTabs` | `import { LSTabs } from '@lumston/ds-react'` |
| `LSStepper` | `import { LSStepper } from '@lumston/ds-react'` |

### Layout
| Component | Import |
|---|---|
| `LSAuthSplitLayout` | `import { LSAuthSplitLayout } from '@lumston/ds-react'` |
| `LSDashboardLayout` | `import { LSDashboardLayout } from '@lumston/ds-react'` |
| `LSHeaderSection` | `import { LSHeaderSection } from '@lumston/ds-react'` |
| `LSNavSectionVertical` / `LSNavSectionMini` | `import { LSNavSectionVertical } from '@lumston/ds-react'` |
| `LSScrollbar` | `import { LSScrollbar } from '@lumston/ds-react'` |
| `LSSimpleLayout` | `import { LSSimpleLayout } from '@lumston/ds-react'` |

### Media
| Component | Import |
|---|---|
| `LSAvatar` | `import { LSAvatar } from '@lumston/ds-react'` |
| `LSIconify` | `import { LSIconify } from '@lumston/ds-react'` |
| `LSFlagIcon` | `import { LSFlagIcon } from '@lumston/ds-react'` |
| `LSLogo` | `import { LSLogo } from '@lumston/ds-react'` |

### Other
| Component | Import |
|---|---|
| `LSColorPickerComponent` | `import { LSColorPickerComponent } from '@lumston/ds-react'` |
| `LSCopyToClipboard` | `import { LSCopyToClipboard } from '@lumston/ds-react'` |
| `LSSortableContainer` / `LSSortableItem` | `import { LSSortableContainer } from '@lumston/ds-react'` |
| `LSEditor` | `import { LSEditor } from '@lumston/ds-react'` |
| `LSForm` / `LSField` | `import { LSForm, LSField } from '@lumston/ds-react'` |

## Optional peer dependencies

Some components require additional packages. Install only what you need:

| Components | Required package |
|---|---|
| `LSIconify`, `LSFlagIcon` | `@iconify/react` |
| `LSSortableContainer`, `LSSortableItem` | `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/utilities` |
| `LSEditor` | `@tiptap/react` and related `@tiptap/*` packages |
| `LSForm`, `LSField` | `react-hook-form`, `@hookform/resolvers`, `zod` |
| `LSPhoneInput` | `react-phone-number-input` |
| `LSDatePicker` variants | `@mui/x-date-pickers`, `dayjs` |
| `LSDataGrid` | `@mui/x-data-grid` |
| `LSTreeView` | `@mui/x-tree-view` |
| `LSScrollbar` | `simplebar-react` |
| Snackbar / toasts | `sonner` |

## License

MIT