Getting Started
Learn how to install and use @eds/ui in your project.
Installation
Install the package
yarn add @eds/uiImport styles
Import once in your app's root (shell/host app for MFE setups):
import "@eds/ui/styles";Use a component
import { Button } from "@eds/ui";
export function App() {
return <Button variant="primary">Get started</Button>;
}Theming
The default EDS look comes from the Token Export in @eds/ui/styles. Shell apps control color scheme and density with orthogonal attributes:
<html data-mode="dark" data-density="compact"></html>For partner / multi-tenant themes, use the seed-based engine:
import { createTheme, ThemeProvider } from "@eds/ui/theme";
const acme = createTheme({
name: "acme",
seeds: { colorPrimary: "#ff6600", radius: "pill" },
});
export function App() {
return (
<ThemeProvider theme={acme}>
<Button variant="primary">Branded</Button>
</ThemeProvider>
);
}See the theme README for seeds, override levels, and nesting.