Preview
Follows the site theme · scoped with ThemeProvider
Partner preview · Custom
Buttons, checks, and intent color
Seed changes rebuild semantic tokens and component chrome in place. The quick brown fox jumps over the lazy dog.
Primary
Hover
Active
Negative
Positive
Warning
Buttons
Checkboxes
Radios
Inputs
$USD
Selects
Apple
AppleBanana
Invalid
Surfaces
Primary fill
Negative light
Positive medium
createTheme snippet
import { createTheme, ThemeProvider } from '@eds/ui/theme';
const theme = createTheme({
name: 'partner',
seeds: {
colorPrimary: '#086ae3',
colorNegative: '#e91c24',
colorPositive: '#33a85c',
colorWarning: '#e78d02',
neutral: 'gray',
radius: 'rounded',
density: 'default',
elevation: 'raised',
motion: 'expressive',
fontFamily: '"Nexa Text", "Noto Sans", system-ui, sans-serif',
},
});
export function App() {
return (
<ThemeProvider theme={theme}>
{/* your UI */}
</ThemeProvider>
);
}