experimental design system with react

Usage no npm install needed!

<script type="module">
  import advclbDesignSystemReact from 'https://cdn.skypack.dev/@advclb/design-system-react';


AdventureClub Design System (React)

Experimental front-end design system with React.

Features (TODO)

  • Fully customizable via SaSS
  • Large collection of components for different solutions
  • Powerful and flexible API
  • Animation made easy
  • Few dependencies (only classnames and lodash)

Technology usage

  • TypeScript
  • SaSS
  • webpack

Repository structure

  • index.ts: uncompiled single entry of library, consumed by webpack/rollup projects
  • reset.scss: style reset
  • variables.scss: SaSS variables
  • mixins.scss: SaSS mixins
  • components: UI components
  • dist: compiled JS & CSS of library, consumed by other types of projects
  • demo: demo application

Development Guide

Recommended editor set-up

Visual Studio Code


  • EditorConfig editorconfig.editorconfig
  • GitLens eamodio.gitlens
  • Prettier esbenp.prettier-vscode
  • stylelint shinnn.stylelint
  • tslint ms-vscode.vscode-typescript-tslint-plugin

Start demo with hot-load

npm install
npm start # or npm run demo:start

Build library

npm run build

Build demo application

npm run demo:build


GNU Affero General Public License version 3 or higher.