Skip to main content
Version: Next

Superset Design System

A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.

The Superset Design System uses Atomic Design principles with adapted terminology:

Atomic DesignAtomsMoleculesOrganismsTemplatesPages / Screens
Superset DesignFoundationsComponentsPatternsTemplatesFeatures
Atoms = Foundations, Molecules = Components, Organisms = Patterns, Templates = Templates, Pages / Screens = Features

Component Library​

Interactive documentation for Superset's UI component library. 50 components documented across 2 categories.

Core Components​

43 components — Buttons, inputs, modals, selects, and other fundamental UI elements.

Layout Components​

7 components — Grid, Layout, Table, Flex, Space, and container components for page structure.

Usage​

All components are exported from @superset-ui/core/components:

import { Button, Modal, Select } from '@superset-ui/core/components';

Contributing​

This documentation is auto-generated from Storybook stories. To add or update component documentation:

  1. Create or update the component's .stories.tsx file
  2. Add a descriptive title and description in the story meta
  3. Export an interactive story with args for configurable props
  4. Run yarn generate:superset-components in the docs/ directory
Work in Progress

This component library is actively being documented. See the Components TODO page for a list of components awaiting documentation.

Auto-generated from Storybook stories in the Design System/Introduction story.