Skip to content
Neatship
Français
Live demo
Get Neatship

Design system

70 components, 466 icons and one set of tokens for light and dark mode. Every screen of the app is built from them, so your new screens match from the first line.

Get NeatshipRead the docs

In short

  • Every color, size and space is a token, so dark mode works everywhere.
  • Documented in Storybook, with an accessibility test on every story, run by CI.
  • A fork of an MIT-licensed design system that you can change freely.

70 components for dense app screens

Buttons, inputs, menus, dialogs, toasts, tags, avatars and more, on headless primitives that bring focus handling and keyboard support. They share one look: calm grays, one accent color, hairlines instead of boxes.

  • Icon-only buttons require a label for screen readers
  • Behavior is tested in the stories themselves, with play functions

466 icons, one per idea

446 hand-picked Tabler icons and 20 brand and product icons, behind one import. A dictionary gives each concept of the app its icon, so the same idea always wears the same picture.

  • Importing icons from anywhere else is a lint error
  • Settings
  • Members
  • Person
  • Roles
  • Billing
  • API key
  • Webhook
  • Integration
  • Notification
  • AI
  • Filter
  • Sort
  • Table view
  • Kanban view
  • Dashboard
  • Side panel
  • Task
  • Note

Light and dark, each designed on purpose

Colors, sizes, spacing, radius and shadows are tokens, turned into CSS variables. Every color has a light and a dark value chosen by hand, and one class on the page switches between them.

  • A lint rule refuses colors typed by hand
  • 13px text, a 4px grid and 8px corners across the app

Storybook, and one line for your brand

Storybook shows each component in each of its states, and an accessibility test runs on every story. This website wears one brand color, set by one line of code; in development, a palette lets you try the others first.

  • A toolbar switch shows every story in the light or the dark theme
  • CI runs every story in a real browser, accessibility check included
  • Each brand color on offer is checked for readable contrast
src/modules/brand-color/constants/BrandColorScale.ts
import { type BrandColorScale } from '@/brand-color/types/BrandColorScale'; // The brand color of the landing: one design system scale. Change this line// to rebrand the page; the scales on offer are in BrandColorSolidSteps.ts.export const BRAND_COLOR_SCALE: BrandColorScale = 'blue';
  • blue
  • cyan
  • turquoise
  • grass
  • tomato
  • red
  • bronze
  • gray

Questions

Can I change the components?

Yes. The design system started as a fork of an MIT-licensed open-source one and is yours now: change anything, and keep its LICENSE file.

Does this website use it too?

Yes. These pages are built from the same tokens and components, with larger type for reading.

How do I change the app's accent color?

Edit the accent steps of the tokens, regenerate the theme and review both themes in Storybook. The website's brand color is a one-line change.

Explore the other features

Start your next app from a clean base

Pay once and get the full source code, with every future update.

Get NeatshipTry the live demo