Get Started as a Developer

Choose your framework:

Quick Start

Install the core libraries:

npm install @nysds/components @nysds/styles

Reference the files in your HTML:

<!-- Load the full NYS Design System CSS. Link should go in head. -->
<link rel="stylesheet" href="node_modules/@nysds/styles/dist/nysds-full.min.css" />
<!-- Load the NYS Design System JS library. Should go before the closing body tag -->
<script type="module" src="node_modules/@nysds/components/dist/nysds.js"></script>

Then use NYSDS components directly in your HTML:

<nys-alert
  heading="Application received"
  text="Your permit application has been submitted for review."
></nys-alert>

Important: Adjust paths based on your build tool. Many tools (Vite, Webpack) resolve node_modules automatically — use bare imports like import ‘@nysds/components’ and @import ‘@nysds/styles/full’.

Design System Features

Components — A library of accessible, reusable web components for forms, navigation, alerts, modals, and more. See the component reference and read about web component fundamentals.

Design Tokens — CSS custom properties for colors, spacing, typography, shadows, and more. Use them to style custom layouts and align with NYSDS. See the tokens reference.

Styles Framework — The @nysds/styles package provides typography classes, a CSS reset, layout utilities, and agency themes. See the styles framework guide.

Layout & Utilities — A grid system and utility classes for spacing, flex layouts, and responsive design. See the layout utilities reference.

Typography — Font styling and typography tokens. Fonts must be downloaded separately due to licensing. See fonts and typography.

Accessibility — All components are WCAG 2.2 compliant with keyboard navigation and screen reader support. See accessibility.

VSCode Autocomplete

Copy .vscode/ from node_modules/@nysds/components/dist/.vscode/ to your project root. Then add to .vscode/settings.json:

"html.customData": [".vscode/vscode.html-custom-data.json"],
"css.customData": [".vscode/vscode.css-custom-data.json"]

Essential Links

• NPM Packages: @nysds/components, @nysds/styles
• GitHub: ITS-HCD/nysds
• Component Reference: Browse all components
• Release Notes: Read the latest updates
• Report Issues: GitHub Issues
• ITS Teams: Troubleshooting channel (ITS staff only)