React component library for SMWORKS applications. Built with TypeScript, inline design tokens, and dark/light theme support.
# yarn
yarn add @smworks-cz/ui-kit
# npm
npm install @smworks-cz/ui-kit
# pnpm
pnpm add @smworks-cz/ui-kityarn add react react-dom @phosphor-icons/react| Package | Version |
|---|---|
react |
>= 18 |
react-dom |
>= 18 |
@phosphor-icons/react |
>= 2.1.0 |
import { Button, Input, Modal } from '@smworks-cz/ui-kit';
function App() {
return (
<Button variant="primary" onClick={() => alert('Clicked!')}>
Click me
</Button>
);
}Set the data-theme attribute on <body> to switch between light and dark mode:
// Dark mode
document.body.setAttribute('data-theme', 'dark');
// Light mode
document.body.setAttribute('data-theme', 'light');Use the useTheme() hook to read the current theme in your components:
import { useTheme } from '@smworks-cz/ui-kit';
function MyComponent() {
const theme = useTheme(); // 'light' | 'dark'
return <div>{theme}</div>;
}Wrap your app in ToasterProvider and use the useToast() hook:
import { ToasterProvider, useToast, Button } from '@smworks-cz/ui-kit';
function App() {
return (
<ToasterProvider position="bottom-right">
<MyApp />
</ToasterProvider>
);
}
function MyApp() {
const { toast } = useToast();
return (
<Button onClick={() => toast({ variant: 'success', title: 'Saved!' })}>
Save
</Button>
);
}Button, Input, Select, DatePicker, Checkbox, Radio, Switch, Textarea, Slider, FileUpload, SegmentedControl
Table, Card, Accordion, Tabs, Tooltip, Popover, Skeleton, EmptyState, Stat, Avatar, Tag, Badge
Modal, Drawer, Breadcrumb, Pagination, Stepper, DropdownMenu, Link, Spotlight
Toast, Alert, Progress, ProgressCircle, Spinner
Divider, Stack, Container, DragList
useTheme, useToast
The library uses Zalando Sans and Zalando Sans Expanded fonts. Import them in your app entry point:
import '@smworks-cz/ui-kit/dist/fonts/fonts.css';All components use inline design tokens with automatic dark/light mode support:
- Primary color:
#FC4F00 - Glass effect:
backdrop-filter: blur(20-32px)on overlays - Animation:
180mswithcubic-bezier(0.16, 1, 0.3, 1) - Icons: @phosphor-icons/react
- Fonts: Zalando Sans (body), Zalando Sans Expanded (headings)
Full TypeScript support out of the box. Type definitions are included in the package.
import type { ButtonProps, InputProps, ModalProps } from '@smworks-cz/ui-kit';MIT - SMWORKS s.r.o.