Consuming a Design System
Install the library in a host app, apply the theme provider, tree-shake unused components, and stay up to date with version upgrades.
Install and Setup
Add the design system as a dependency. Some libraries need additional setup: provider, CSS import, font loading.
npm install @yourorg/design-system
// app/layout.tsx (or main.tsx)
import '@yourorg/design-system/dist/tokens.css';
import { DesignSystemProvider } from '@yourorg/design-system';
<DesignSystemProvider theme="light">
<App />
</DesignSystemProvider>Theme Provider
Most design systems offer a top-level provider for theme (light/dark), locale, and shared context. Wrap your app once.
<DesignSystemProvider
theme={isDarkMode ? darkTheme : lightTheme}
locale="en"
>
<App />
</DesignSystemProvider>