@quable/ui

A modern TypeScript React component library built on top of MUI v5 with a consistent look-and-feel and sensible defaults.

Features

• 🚀 TypeScript types included
• ⚛️ React 18 and 19 compatible
• 🎨 MUI v5 theming out-of-the-box
• 💅 Prebuilt CSS with SCSS-based styles in source
• 📦 ESM-first with CJS fallback for Node bundlers
• 🧪 Storybook and Jest test setup

Installation

🤝 We prefer pnpm but feel free to use npm, yarn, bun, or whatever package manager you like:

pnpm add @quable/ui

Additional peer dependencies

The library depends on several peer packages. Most are required by the library (install them in your host application). The Froala editor is optional and only needed if you use the RichTextEditor component.

Install required peers:

# UI & core
pnpm add @mui/material@^5 @emotion/react @emotion/styled @mui/icons-material@^5

# MUI extras
pnpm add @mui/x-data-grid-pro@^6 @mui/x-date-pickers-pro@^6

# Utilities & common extras
pnpm add moment react-arborist react-beautiful-dnd @types/react-beautiful-dnd react-dropzone react-i18next react-sortable-hoc react-toastify

Optional (only if you use RichTextEditor):

pnpm add froala-editor react-froala-wysiwyg

Usage

1. Import the theme provider and styles in your app entry:

import { ThemeContextProvider } from '@quable/ui/theme'

import '@quable/ui/theme/index.css'
import '@quable/ui/index.css'

2. Wrap your app with the ThemeContextProvider to get the exact theme:

import { ThemeContextProvider } from '@quable/ui/theme'
import { Button } from '@quable/ui'

import '@quable/ui/theme/index.css'
import '@quable/ui/index.css'

export function App() {
  return (
    <ThemeContextProvider>
      <Button color="primary">Click me!</Button>
    </ThemeContextProvider>
  )
}

3. Import and use components as named imports:

import { Button, TextField, Autocomplete } from '@quable/ui'

export function MyComponent() {
  return (
    <div>
      <TextField label="Name" />
      <Button>Submit</Button>
    </div>
  )
}

Available components (selection)

• Actions: Button
• Forms: Autocomplete, Checkbox, Chip, ChoiceList, ColorPicker, DateField, DateRangePicker, DropZone, InlineError, Label, ListItems, NumberField, PasswordField, Radio, RichTextEditor, Select, Switch, TextArea, TextField, TimeField, ToggleButtonGroup
• Table: TransferListInput

📖 Explore them all in our live Storybook documentation: https://quable-ui-storybook.web.app/

Special Component Documentation

Some components require additional setup or have specific considerations:

• RichTextEditor - Comprehensive guide for using the rich text editor, including SSR setup for Next.js

Peer dependencies

Ensure the following are installed in your host app:

Required:

• react >= 18.0.0 < 20.0.0
• react-dom >= 18.0.0 < 20.0.0
• @mui/material >= 5.18.0 < 8.0.0
• @emotion/react ^11.14.0
• @emotion/styled ^11.14.0
• @mui/icons-material ^5.18.0

Optional (depending on components used):

• @mui/x-data-grid-pro ^6.20.4
• @mui/x-date-pickers-pro ^6.20.2
• @types/react-beautiful-dnd ^13.1.8
• froala-editor ^4.6.2
• moment ^2.30.1
• react-arborist ^3.4.3
• react-beautiful-dnd ^13.1.1
• react-dropzone ^14.3.8
• react-froala-wysiwyg ^4.6.2
• react-i18next >= 11.0.0 < 16.0.0
• react-sortable-hoc ^2.0.0
• react-toastify ^11.0.5

Project scripts

# Install dependencies
pnpm install

# Storybook (component docs & playground)
pnpm storybook

# Run tests
pnpm test

# Build the library (dist/)
pnpm build

# Lint & format
pnpm lint
pnpm format

Packaging

• ESM entry: index.js
• CJS entry: index.cjs
• Types: index.d.ts
• Theme provider: @quable/ui/theme
• Styles: @quable/ui/theme/index.css and @quable/ui/index.css

License

MIT © Quable Team