@exsto/ds

The eDynamix design system: React components and design tokens.

Install

npm install @exsto/ds

React 19 is a peer dependency.

Use

import { Button, Card, CardContent } from '@exsto/ds';
import '@exsto/ds/styles.css';

export const Example = () => (
  <Card>
    <CardContent>
      <Button>Save</Button>
    </CardContent>
  </Card>
);

That is the whole setup. You do not need Tailwind. styles.css ships precompiled: it carries the design tokens plus every utility the components themselves use.

If you use Tailwind

styles.css is compiled output, so it only contains the utilities the components themselves use. To write bg-card or text-muted-foreground in your own markup, import the token layer as well and let your Tailwind build generate the whole vocabulary:

@import "@exsto/ds/styles.css";
@import "tailwindcss";
@import "@exsto/ds/theme.css";

The order matters, and styles.css has to come first. It is a compiled Tailwind build, so its utilities land in the same cascade layer as yours, and at equal specificity the later rule wins. Import it after your Tailwind entry and its unconditional .hidden beats your .md:table-cell: responsive columns vanish, widths collapse. Library CSS before app CSS, as with any CSS dependency.

Nothing else is needed. theme.css also points your build at the components' shipped code, so your build emits their classes too, each responsive variant after its own base. That is what keeps a design system class such as the sidebar's hidden md:block working when your own markup uses hidden as well: one build decides the order for both sides. Earlier releases needed a @source line in the app to get this, and that line can be removed.

theme.css is uncompiled on purpose. It carries the tokens, the .dark scope, the brand layer (Inter, text-2xs) and the @theme mapping Tailwind needs to turn them into utilities. Do not copy that block into your app, or it will drift from the design system.

Without it some token utilities still work, because our components happen to use them, but the coverage is incidental: roughly half of bg-* and nearly every border-* is absent.

Dark mode

Put dark on any ancestor. The tokens are re-scoped by class, not by media query, so a subtree can be dark inside a light page.

<div className="dark">
  <Button>Dark</Button>
</div>

Entry points

Status

Release candidates (0.0.1-rc.N). The API is not stable yet; treat minor versions as breaking until 0.1.0.

0.0.1-rc.5 removed the @exsto/ds/elements entry point (the <edx-*> web components) and with it Angular support. The design system is React only. Stay on 0.0.1-rc.4 if you depend on the elements.

Licence

Apache-2.0. See LICENSE.