Agriculture Design System
Beta
Design System for the Export Service

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.

View in StorybookView in Github
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.