@lazar-ui/kit
v0.12.0
Published
A component library for building admin panels, dashboards, and internal tools.
Readme
@lazar-ui/kit
A component library for building admin panels, dashboards, and internal tools. Focuses on practical UI patterns commonly needed in B2B applications: data-heavy layouts, modals, menus, forms, and navigation.
Features
30 production-ready components — from buttons and tables to compound menus and slot-based dialogs. Every component is designed for the admin panel context: Actionable tables, pagination, filterable selects, and more.
5 component patterns to cover different composition needs:
- Simple — Button, Badge, Card, Table, Pagination, Typography, etc.
- Compound — Accordion, Menu, Popover, Tabs
- Slot-based — Dialog, Drawer, EmptyState (Title / Content / Actions)
- Input-variations — Input (Email, Password, Phone, Number via Object.assign)
- Context-based — LazarUiProvider, Breadcrumbs, Tabs
Tree-shakeable by default. Each component is a separate subpath export. Import exactly what you need, nothing more:
import { Button } from '@lazar-ui/kit/button';Only @lazar-ui/kit/button ends up in your bundle — not the entire library.
Isolated CSS. Styles are injected per-component at build time. No global CSS, no style conflicts, no unused rules.
Light and dark themes via data-theme and CSS custom properties.
Wrap your app in LazarUiProvider and toggle with a single attribute.
Custom color palettes. Two palettes included (monochrome, indigo).
Replace them with your own: copy a palette file, override the --lui-palette-*
variables, and import it instead.
Localization ready. Interface ships with en and ru locales.
Add any language through ILocaleMessages module augmentation
— no forks, no patches, just type-safe extension.
Accessible by default. Built on react-aria and react-stately.
Keyboard navigation, screen reader support, focus management
— all handled at the component level.
Fully typed. TypeScript strict mode. Every component exports IProps.
Every import is typed. No undocumented props, no surprise any.
Typed SCSS Modules. All styles are typed via typed-scss-modules.
Import styles with full type safety — class name typos are caught at build time.
Vite-powered build. ES output with automatic declaration generation (dts)
and CSS injection. No bundler lock-in — works with any Vite/Next/Rspack setup.
📖 Storybook docs — browse all components live
Installation
npm install @lazar-ui/kitPeer dependencies
| Package | Version |
| --------------- | -------- |
| react | ^19.2.0 |
| react-dom | ^19.2.0 |
| react-aria | ^3.44.0 |
| react-stately | ^3.42.0 |
| clsx | ^2.1.1 |
| lodash | ^4.17.21 |
Quick start
import { LazarUiProvider } from '@lazar-ui/kit/lazar-ui-provider';
import '@lazar-ui/kit/css/palettes/monochrome.css';
import '@lazar-ui/kit/css/semantic.css';
import '@lazar-ui/kit/css/reset.css';
import '@lazar-ui/kit/css/base.css';
function App() {
return (
<LazarUiProvider theme="light" locale="en">
<YourApp />
</LazarUiProvider>
);
}CSS files
| File | Purpose | Required |
|------|---------|----------|
| palettes/*.css | Color palette (brand, gray, red, etc.) with light/dark/contrast variants. Choose one: purple, indigo, or monochrome. | Yes |
| semantic.css | Semantic tokens: --lui-color-*, --lui-space-*, --lui-radius-*, --lui-font-*, --lui-shadow-*, --lui-color-scrollbar-* | Yes |
| reset.css | CSS reset — removes default browser styles (margins, paddings, form element styles). | Optional |
| base.css | Global styles: body background/color/font, font-smoothing, thin scrollbars. | Recommended |
Then use any component:
import { Button } from '@lazar-ui/kit/button';
import { Table } from '@lazar-ui/kit/table';
function UsersPage() {
return <Button onClick={() => console.log('clicked')}>Add User</Button>;
}Fonts
The kit uses Inter by default via --lui-font-family-body. The font is not bundled — you choose how to load it.
Option A: Google Fonts CDN (add to <head>)
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet" />Option B: npm (@fontsource/inter)
npm install @fontsource/interimport '@fontsource/inter';Custom font — override the token:
:root {
--lui-font-family-body: "Roboto", system-ui, sans-serif;
}Component list
| Component | Pattern | Description | | -------------- | ------------- | ----------------------------- | | Accordion | Compound | Collapsible sections | | Alert | Simple | Inline notifications | | Avatar | Simple | User avatar with fallback | | Badge | Simple | Status / count indicator | | Breadcrumbs | Context-based | Navigation trail | | Button | Simple | Action trigger | | Card | Simple | Content container | | Checkbox | Simple | Binary input | | LazarUiProvider | Context-based | Theme + locale provider | | Dialog | Slot-based | Modal dialog | | Drawer | Slot-based | Side panel | | EmptyState | Slot-based | Empty / no-data state | | ErrorBoundary | Simple | React error boundary | | Flex | Simple | Flexbox layout helper | | FormField | Simple | Field wrapper (label + error) | | Icon | Simple | Lucide icon wrapper | | Input | Input-variations | Text input variants (Email, Password, Phone, Number) | | Menu | Compound | Dropdown menu | | Pagination | Simple | Page navigation | | Popover | Compound | Floating panel | | Select | Simple | Dropdown selector | | Separator | Simple | Visual divider | | Skeleton | Simple | Loading placeholder | | Spinner | Simple | Loading indicator | | Switch | Simple | Toggle control | | Table | Simple | Data table | | Tabs | Compound | Tabbed navigation | | Textarea | Simple | Multi-line input | | Tooltip | Simple | Hover hint | | Typography | Simple | Typography variant compositor |
Theming
Wrap your app with LazarUiProvider and pass a theme prop:
<LazarUiProvider theme="dark" locale="en">
<YourApp />
</LazarUiProvider>Available themes: light, dark.
To create a custom palette, copy one of the bundled palettes
from node_modules/@lazar-ui/kit/css/palettes/, adjust the
--lui-palette-* variables, and import your file before semantic.css.
Localization
Pass a locale to LazarUiProvider. Built-in: en, ru.
<LazarUiProvider locale="ru">
<YourApp />
</LazarUiProvider>Add a new language by augmenting ILocaleMessages:
declare module '@lazar-ui/kit/lazar-ui-provider' {
interface ILocaleMessages {
myCustomSection: {
greeting: string;
};
}
}Then pass your locale object:
<LazarUiProvider locale={{ myCustomSection: { greeting: 'Hello' } }}>
<YourApp />
</LazarUiProvider>Contacts
Telegram: @vasiliylazarev
Email: [email protected]