Developers #

Duet Design System is a collection of reusable components and tools that are divided into six packages. They can be used together or separately depending on your team’s needs.

Provided front-end packages include:

Duet Package

CLI

Each package can be installed using Node Package Manager. To do so, run the following command(s) in your terminal:

# COMMAND LINE INTERFACE:
npm install -g @duetds/cli

# DESIGN TOKENS, CSS FRAMEWORK, ICONS, FONTS:
# (For usage with any framework)
npm install @duetds/tokens
npm install @duetds/css
npm install @duetds/icons
npm install @duetds/fonts

# WEB COMPONENTS for HTML, Angular, Ember, Vue.js, and Vanilla JS:
npm install @duetds/components

# REACT COMPONENTS:
npm install @duetds/react

For further installation and integration guidelines, please see each package’s documentation linked above.

Supported frameworks #

We offer full support for the following frameworks and libraries:

Basic HTML: The easiest way to utilize Duet components. Follow the instructions on Components Usage page.
Angular: 7.2.1 - 13 with package @duetds/angular. From version 14 the support for @duetds/angular has been deprecated and prefer utilizing @duetds/components directly.
React: 16.7.0 and up using @duetds/react package. With older React versions you can utilize @duetds/components with some limitations.
Other Frameworks: You can either use @duetds/components package directly or load the components from our CDN. Please see Custom Elements Everywhere for more details about wider support in Frameworks like Preact, Svelte, Solid, Riot.js and similar.