@lumston/ds-react

Lumston Design System — React component library built on top of MUI v7 and React 19.

Installation

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:

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).

Setup

1. Import global styles

In your app entry point, import the stylesheet:

import '@lumston/ds-react/styles.css';

2. Configure the library (optional)

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:

import { CssVarsProvider } from '@mui/material/styles';

export default function App() {
  return (
    <CssVarsProvider>
      {/* your app */}
    </CssVarsProvider>
  );
}

Usage

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