Core

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

Core includes a range of styles, variables and code that form the foundation of how the Design System works, including colour, typography and spacing.

All of our Tokens are viewable here.