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

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.

View our Tokens.