@adecore/ui

React components for apps that behave like desktop software: menus with shortcuts, dialogs over dialogs, tooltips, fields, toasts and a settings dialog. Every number and date goes through formatters that follow the language and the region a person set, and one theme of tokens draws it all. Built on React 19, Base UI, Lucide and Tailwind 4.

Documentation with a live demo of every component

Install

bun add @adecore/ui

React 19, react-dom, i18next and react-i18next are peer dependencies; the app brings them.

Set up

Import the theme right after Tailwind and let Tailwind scan the library for the classes it uses. The @source path is relative to the CSS file.

@import "tailwindcss";
@import "@adecore/ui/theme.css";
@source "../node_modules/@adecore/ui/dist";

Wrap the app in UIProvider once, above the first component of the library. It adds the library's words to the app's i18next (English and Dutch ship with it), hands the formatters their format source and mounts the tooltip provider.

import i18next from 'i18next';
import { UIProvider } from '@adecore/ui';

createRoot(root).render(
    <UIProvider i18n={i18next} formatSource={formatSource}>
        <App />
    </UIProvider>
);

From there, every component is ready to use:

<Menu.Root>
    <IconButton icon={Ellipsis} label="More" render={<Menu.Trigger />} />
    <Menu.Popup align="end">
        <Menu.Item onClick={rename}>
            Rename <Kbd shortcut={KEY_SHORTCUTS.rename} />
        </Menu.Item>
        <Menu.Item onClick={remove}>Remove</Menu.Item>
    </Menu.Popup>
</Menu.Root>

Getting started covers the rest: the format source, a third language, the optional pieces and how to work on a local checkout.

Workspaces

Workspace lays out a toolbar, side regions and content in a standard or a roomy layout. SplitView nests resizable panels with document tabs, and TabStrip draws the tabs. A view stays mounted when it moves to another panel. The app keeps the documents' state, decides whether a tab may close and saves the layout. The workspace guide covers the controlled layout model, with demos.

Entry points

| Import | What it holds | |---|---| | @adecore/ui | The components, hooks and helpers | | @adecore/ui/settings | SettingsDialog and the parts of a pane | | @adecore/ui/format | Numbers, dates, durations and regions, and setFormatSource | | @adecore/ui/testing | Fakes for an app's tests, such as fakeFormatSource() | | @adecore/ui/testing/dedupe | A bun test preload for an app that links a checkout | | @adecore/ui/theme.css | The theme |

Nothing else is public. No module does work on import, so a bundler keeps only what an app uses.

Documentation

| Page | What it covers | |---|---| | Getting started | Install, the theme, UIProvider, the format source and a local checkout | | Principles | The rules every component follows, from the type scale to keyboard focus | | Theme | Every token in light and dark, and how to set an accent | | Components | A page per component with a live demo, grouped in the sidebar | | Formatting | Numbers, dates, durations and regions | | Testing | Fakes for an app's tests and the preload for a linked checkout |

License

FSL-1.1-MIT, see LICENSE.