@nswds/app
v2.0.1
Published
Components, patterns and design tokens for building accessible NSW Government applications with Next.js.
Readme
NSW Application Design System
Components, patterns and design tokens for building accessible NSW Government applications with Next.js.
Documentation: https://app.designsystem.nsw.gov.au
Installation
npm install @nswds/appPeer dependencies
@nswds/app does not bundle React or Next.js — it expects your application to
provide them, so that only one copy of React is ever loaded:
| Package | Required version |
| ------------- | ---------------- |
| react | ^19.2.6 |
| react-dom | ^19.2.6 |
| next | ^16.2.6 |
| next-themes | ^0.4.6 |
npm 7 and later install missing peer dependencies automatically. If your project
is on an older version of React or Next.js, npm install will report an
ERESOLVE conflict — upgrade rather than using --legacy-peer-deps, since two
copies of React break hooks at runtime.
Everything else the components need is a regular dependency and is installed for you.
Usage
Import the stylesheet once, in your root layout. It ships pre-compiled, so you do not need Tailwind CSS configured in your own project:
// app/layout.tsx
import '@nswds/app/globals.css'Components are then imported from the package root:
import { Button } from '@nswds/app'
export default function Page() {
return <Button>Continue</Button>
}Theming
Light and dark themes are keyed on a data-theme attribute, so ThemeProvider
must be configured with attribute='data-theme' — the next-themes default of
class will not apply the design system's dark theme:
'use client'
import { ThemeProvider } from '@nswds/app'
export function Providers({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider
attribute='data-theme'
defaultTheme='system'
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
)
}Add suppressHydrationWarning to your <html> element, as next-themes sets
the attribute before React hydrates.
To read or change the theme, import useTheme from next-themes directly — it
is not re-exported here. This is why next-themes is a peer dependency: the
provider above and your useTheme call must resolve to the same copy, or the
hook reads a different React context and silently returns default values.
import { useTheme } from 'next-themes'