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:

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, Ember, Vue.js, and Vanilla JS:
# (can be used with Angular and React as well when you need e.g. SSR support)
npm install @duetds/components

# REACT COMPONENTS:
npm install @duetds/react

# ANGULAR COMPONENTS:
npm install @duetds/angular

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 - 10 using @duetds/angular package. With older Angular versions you can utilize @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.
• Vue.js: All versions utilizing @duetds/components package.
• Ember: All versions utilizing @duetds/components package via ember-cli-stencil.
• 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.

Example projects #

In addition to the templates that our Command Line Interface provides, we’ve also created a few example projects to GitHub:

• App built with @duetds/react, demonstrating form handling
• App built with @duetds/angular, demonstrating form handling

Guidelines #

Duet also provides additional development guidelines that you should read through before starting anything new:

Tutorials #

Follow these practical tutorials to get started developing experiences for LocalTapiola and Turva.

Contributing #

We gratefully accept contributions to Duet’s documentation and its packages. Please see contributing guidelines for further instructions.

Getting support #

If you experience any issues while getting started with any of Duet’s packages, please head over to the Support page for more guidelines and help.