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:
Design TokensDuet Package
CSS FrameworkDuet Package
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.
7.2.1 - 13using
@duetds/angularpackage. With older Angular versions you can utilize
16.7.0and up using
@duetds/reactpackage. With older React versions you can utilize
@duetds/componentswith some limitations.
- Vue.js: All versions utilizing
- Ember: All versions utilizing
@duetds/componentspackage via ember-cli-stencil.
- Other Frameworks: You can either use
@duetds/componentspackage 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
Duet also provides additional development guidelines that you should read through before starting anything new:
Content Delivery NetworkGuidelines
Follow these practical tutorials to get started developing experiences for LocalTapiola and Turva.
Using CLI ToolsTutorials
Creating Custom PatternsTutorials
Server Side RenderingTutorials
Usage With MarkdownTutorials
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.