Commonly used React UI components, ready to customize with your own design system.
Use React 18 or 19. Install the package and Motion 12:
npm install @sencorp/react-ui "motion@^12.23.0"Follow the setup guide for each component you want to use:
| Component | Import path | Setup guide |
|---|---|---|
| Table | @sencorp/react-ui/table |
Table |
| Modal | @sencorp/react-ui/modal |
Modal |
| Sidebar | @sencorp/react-ui/sidebar |
Sidebar |
| Toast | @sencorp/react-ui/toast |
Toast |
Import the shared stylesheet once at your app root. It includes styles for all components and does not require Tailwind:
import "@sencorp/react-ui/styles.css";Or import only the component styles you need:
import "@sencorp/react-ui/table/styles.css";
import "@sencorp/react-ui/modal/styles.css";Sidebar and toast currently use inline styles and do not need a stylesheet.
For tables, wrap your table in TableThemeProvider.
For modals, register your components with ModalProvider at the app root and create a typed useModal wrapper.
For sidebars, register your components with SidebarProvider at the app root and create a typed useSidebar wrapper.
For toasts, mount ToastProvider once and call toast.show() with your content from any component or function.
Use Node.js 22.12 or newer. In this repository, run:
npm install
npm run devOpen the local URL printed in your terminal.
