This is a React design system library with many utilities and zero dependencies. It was built with the aim to be simple, lightweight, and beautiful. The components below are the real library, composed into the kinds of screens applications actually need.
Accessible controls, composable layout primitives, atmospheric surfaces, and no runtime styling dependency.
Primitives stay useful on their own, but they are designed to become more than the sum of their parts. This workspace combines surfaces, navigation, identity, progress, inputs, and actions without application-specific CSS.
Inputs and actions share spacing, focus, typography, and interaction behavior, so small forms feel coherent without a layer of application-specific CSS.
Materials add character without changing component structure. They adapt to both themes and can be reserved for navigation, focal cards, and application chrome.
The compact interface combines an application header, content hierarchy, status, actions, and the real keyboard-navigable TabBar.
The same hierarchy becomes a persistent master-detail workspace. NavigationSplitView owns the responsive geometry while the sidebar, toolbar, content, and context panel remain ordinary composable surfaces.
Explore the responsive shell and its API on the NavigationSplitView documentation.
This library can be installed through npm:
npm install --save aidos-ui
Add the Providers component somewhere near your application root:
import { Providers, darkTheme, lightTheme } from "aidos-ui";
<Providers themes={{ light: lightTheme, dark: darkTheme }}>
<App />
</Providers>;
If the application is running in Next.js, add JSServerStyles to the document <Head /> so JSS also works during server rendering:
import { JSServerStyles } from "aidos-ui";
<Head>
<JSServerStyles />
</Head>;
Then start with a component or copy one of the compositions above. The library is intentionally opinionated, but every primitive is designed to extend cleanly.