Core
Core includes a range of styles, variables and code that form the foundations of how the Design System works, including colour, typography and spacing.
import { ... } from '@ag.ds-next/react/core';
The Core
component should wrap your entire application, which will enable our CSS variables reset styles.
Theming
The Core
component accepts a theme
prop that enables overwriting of the default theme.
import { Core } from '../core';
export default function MyApp({ Component, pageProps }) { return ( <Core theme={theme}> <Component {...pageProps} /> </Core> );}
Routing / Linking
Our component library has been designed to work with any react routing library. For an example of configuring routing/links in AgDS for a Next.js application, please see our example site.
import { Core } from '../core';
export default function MyApp({ Component, pageProps }) { return ( <Core theme={theme} linkComponent={LinkComponent}> <Component {...pageProps} /> </Core> );}
Design tokens
Our design tokens are the foundation of our design system. They are the building blocks of our components and are used to create a consistent look and feel across all of our products.