Agriculture Design System
Design System for the Export Service

Technical overview

Explaining technical decisions in the AgDS component library.


The AgDS component library has been built using React. React is a JavaScript library for building user interfaces and uses a component based model for defining user interface elements.

NPM packages

The delivery method for the AgDS component library is via a single NPM package. NPM is a package manager for JavaScript and the world’s largest software registry.

Every component in the AgDS component library has an individual entrypoint in the @ag.ds-next/react package. This keeps application bundles small and avoids end users downloading unnecessary dependencies.


All of the AgDS components are built using TypeScript, a typed superset of JavaScript that compiles to plain JavaScript.

You don’t need to be using TypeScript in order to use the AgDS component library, but it is highly recommended.


Emotion is library designed for writing CSS styles with JavaScript. We use CSS-in-JS as it allows us to easily define and scope the styles for a component alongside its definiton.


Next.js is a popular framework for building web applications with React.

Described as ‘the SDK for the web’, it handles the tooling and configuration needed for a React app, and provides additional structure, features, and optimisations for your application. It also has fantastic documentation and developer experience.

We use Next.js to build our documentation site, templates and internal test applications.

Unless you have strong technical reasons to use another framework, we highly recommend you clone our Next.js-based Starter Kit as the starting point for your next project.