Getting started
Four steps from registry access to your first GDS component.
Authenticate to JFrog
Put the registry lines in ~/.npmrc. They read $NPM_TOKEN from your environment — they do not store the token themselves.
@granicus:registry=https://granicus.jfrog.io/artifactory/api/npm/npm-granicus-local/
//granicus.jfrog.io/artifactory/api/npm/npm-granicus-local/:_authToken=${NPM_TOKEN}
//granicus.jfrog.io/artifactory/api/npm/npm-virtual/:_authToken=${NPM_TOKEN}Ask your team for an npm identity token for npm-granicus-local, then set it in your shell (current terminal session). Add the same line to ~/.zshrc or ~/.bashrc if you want it to persist:
export NPM_TOKEN="<token-from-your-team>"Install
Install peer dependencies first (React, MUI, Emotion, Roboto), then add GDS. Date Picker also needs the X pickers package and dayjs.
# Peer dependencies
yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled \
@fontsource/roboto react react-dom
# Required for GdsDatePicker:
yarn add @mui/x-date-pickers dayjs
# GDS
yarn add @granicus/gds-corePeer dependencies
Installed once per app so React, Emotion, and MUI stay shared. Prefer GDS wrappers (GdsFormControl, etc.) over importing @mui/material/* directly.
| Package | Version | Why |
|---|---|---|
react | ^18.2.0 | Runtime |
react-dom | ^18.2.0 | Runtime |
@mui/material | ^7.3.11 | Underlying component library |
@mui/icons-material | ^7.3.11 | Icon set used by GdsIcon |
@mui/x-date-pickers | ^8.0.0 | Date picker primitives (GdsDatePicker) |
dayjs | ^1.11.0 | Default date adapter for pickers |
@emotion/react | ^11.14.0 | MUI styling engine |
@emotion/styled | ^11.14.0 | MUI styling engine |
@fontsource/roboto | ^5.2.5 | Roboto font (GDS typography) |
Wire up the theme
Wrap the app in GDSThemeProvider, load Roboto, and include CssBaseline.
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
import { CssBaseline } from "@granicus/gds-core/CssBaseline";
import { GDSThemeProvider } from "@granicus/gds-core/GDSThemeProvider";
export function AppProviders({ children }: { children: React.ReactNode }) {
return (
<GDSThemeProvider mode="light">
<CssBaseline />
{children}
</GDSThemeProvider>
);
}When using GdsDatePicker, also wrap with GdsLocalizationProvider:
import { GdsLocalizationProvider } from "@granicus/gds-core/GdsLocalizationProvider";
<GDSThemeProvider mode="light">
<GdsLocalizationProvider>
<CssBaseline />
{children}
</GdsLocalizationProvider>
</GDSThemeProvider>Use a component
Import from path entries like @granicus/gds-core/GdsButton — never the package root.
import { GdsButton } from "@granicus/gds-core/GdsButton";
import { GdsStack } from "@granicus/gds-core/GdsStack";
export default function Page() {
return (
<GdsStack direction="row" spacing={2}>
<GdsButton variant="contained" color="primary">
Save
</GdsButton>
<GdsButton variant="outlined">Cancel</GdsButton>
</GdsStack>
);
}Next