---
title: "@n8n/design-system"
description: "![n8n.io - Workflow Automation](https://user-images.githubusercontent.com/65276001/173571060-9f2f6d7b-bac0-43b6-bdb2-001da9694058.png)"
type: skill
canonical_url: https://claudary.paisolsolutions.com/skills/readme-548
source: "Claudary"
difficulty: intermediate
author: "Claude Code Knowledge Pack"
date: 2026-07-10T11:36:42.116Z
license: CC-BY-4.0
attribution: "@n8n/design-system — Claudary (https://claudary.paisolsolutions.com/skills/readme-548)"
---

# @n8n/design-system
![n8n.io - Workflow Automation](https://user-images.githubusercontent.com/65276001/173571060-9f2f6d7b-bac0-43b6-bdb2-001da9694058.png)

## Overview

![n8n.io - Workflow Automation](https://user-images.githubusercontent.com/65276001/173571060-9f2f6d7b-bac0-43b6-bdb2-001da9694058.png)

# @n8n/design-system

A component system for [n8n](https://n8n.io) using Storybook to preview.

## Project setup

```
pnpm install
```

### Compiles and hot-reloads for development

```
pnpm storybook
```

### Build static pages

```
pnpm build:storybook
```

### Run your unit tests

```
pnpm test:unit
```

### Lints and fixes files

```
pnpm lint
```

### Build css files

```
pnpm build:theme
```

### Monitor theme files and build any changes

```
pnpm watch:theme
```

## License

You can find the license information [here](https://github.com/n8n-io/n8n/blob/master/README.md#license)

---

Source: [Claudary](https://claudary.paisolsolutions.com/skills/readme-548) · https://claudary.paisolsolutions.com