@spatika/react
v2.3.0
Published
Spatika UI — React design system: semantic tokens, density, application shell, data tables, forms, and overlays
Maintainers
sreelalcReadme
@spatika/react
React primitives, composites and application patterns for Spatika UI — a calm, information-first design system for SaaS, finance, productivity and admin software. Semantic tokens, four themes, density control, an application shell, data tables, metrics, charts, a calendar and an editor.
Docs: spatika.sweyam.com · Machine index: llms.txt
Install
npm install @spatika/react @spatika/tokensPeer dependencies: react and react-dom (^18 or ^19).
Quick start
import "@spatika/tokens/styles.css";
import { AppShell, Button, NavItem, NavSection, Sidebar, TopBar } from "@spatika/react";
export function App() {
return (
<AppShell
sidebar={
<Sidebar>
<NavSection>
<NavItem label="Overview" active />
<NavItem label="Customers" meta="1,284" />
</NavSection>
</Sidebar>
}
topbar={<TopBar title="Overview" actions={<Button size="sm">New</Button>} />}
>
<Page />
</AppShell>
);
}Themes
Set a theme class on <html>: default Mukta, neelam, usha, or sandhya.
import { applyTheme, SpatikaThemeProvider } from "@spatika/react";
applyTheme("neelam");
// or wrap the app
<SpatikaThemeProvider defaultTheme="neelam">
<App />
</SpatikaThemeProvider>Button sizes include touch / icon-touch (≥44px) for mobile-first chrome.
What's included
- Primitives — Button, ButtonGroup, Accordion, Autocomplete, Grid, Menu, Dialog, Stepper, List, Fab, and more
- Composites — AppHeader, AppSidebar, Card, EntityCard, FloatingPageChrome, CoverHero, FilterSheet, MobileTabBar, CommandSearchField, NotificationBell, Timeline, EventCalendar, EventTimeline, AmountInput, SegmentedControl, Toaster, media cards, PIN/lock chrome, SiteNav, SiteFooter, SectionHeading, Tag
- Charts — install
@spatika/charts(also re-exported from@spatika/react). SVG plots covering the MUI X catalog, plusChartContainercomposition (mixed plots, zoom/pan, brush,syncId, shared tooltips, dual axes, toolbar export)
Utility classes
Prefer @spatika/tokens/styles.css. It includes Spatika's semantic tokens, component recipes,
and the utility classes used by the React package. No external CSS framework is required.
Docs
Human docs and live previews: spatika.sweyam.com
Run the documentation site from the monorepo root:
npm run devPackages on npm: spatika scope
License
MIT