whatisgithub

What is n8n-design-system?

n8n-io/n8n-design-system — explained in plain English

Analysis updated 2026-07-17 · repo last pushed 2021-08-06

★ 14SCSSAudience · designerComplexity · 2/5DormantSetup · easy

In one sentence

A shared library of UI components and visual guidelines that keeps n8n's interface consistent across the whole product.

Mindmap

mindmap
  root((n8n-design-system))
    What it does
      Shared UI components
      Visual guidelines
      Consistent styling
    Tech stack
      SCSS
      Storybook
    Use cases
      Preview components
      Reuse buttons and forms
      Keep UI consistent
    Audience
      Designers
      Frontend developers
      Product managers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Browse a visual catalog of n8n's UI components in Storybook before using them.

USE CASE 2

Reuse pre-built buttons, forms, and dropdowns instead of building from scratch.

USE CASE 3

Update a shared style once and have it flow through the whole n8n interface.

USE CASE 4

Keep an internal team aligned on consistent colors, fonts, and spacing.

What is it built with?

SCSSStorybook

How does it compare?

n8n-io/n8n-design-systemdeezer/deezer.github.ion8n-io/element-theme-n8n
Stars14127
LanguageSCSSSCSSSCSS
Last pushed2021-08-062026-06-182021-07-21
MaintenanceDormantActiveDormant
Setup difficultyeasyeasyeasy
Complexity2/51/52/5
Audiencedesignerresearcherdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

Standard Storybook + SCSS build setup.

No license information is provided in the explanation.

Copy-paste prompts

Prompt 1
Help me browse and understand the components in this n8n design system via Storybook.
Prompt 2
Show me how to add a new component to this SCSS-based design system.
Prompt 3
Explain how style changes here propagate to n8n's main application.
Prompt 4
How do I run and build this design system locally to test my changes?

Frequently asked questions

What is n8n-design-system?

A shared library of UI components and visual guidelines that keeps n8n's interface consistent across the whole product.

What language is n8n-design-system written in?

Mainly SCSS. The stack also includes SCSS, Storybook.

Is n8n-design-system actively maintained?

Dormant — no commits in 2+ years (last push 2021-08-06).

What license does n8n-design-system use?

No license information is provided in the explanation.

How hard is n8n-design-system to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is n8n-design-system for?

Mainly designer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.

What are similar repos?