Skip to content
Pesto UI

Warm components for calm, capable products

Pesto UI is a warm-neutral design system: accessible, themeable components that look finished from the very first render.

Browse components

Every component is free and open source, MIT licensed.

Launch checklist

Product team

In progress
Progress2 of 4 done
Due Friday

Weekly visitors

Up 18%

12,480

Weekly visitors over the last twelve weeks, rising

Components

Real components, rendered right here.

Nothing below is a screenshot. These are the components themselves, so press, type and toggle your way through them.

Buttons

Button · Spinner

Badges

Badge · BadgeGroup · TrendPill

NewDraftLiveBeta
ReviewFailedArchived
Up 12.5%Down 3.1%
BetaShared workspaces

Inputs

Input · InputGroup · Field · Select

Type an address, then tab away to check it.

Cards and charts

Card · ChartContainer

Visits
This week, by day
Up 12%

15,570

Toggles

Switch · Tabs

One summary every Monday.

Accent themes

ColorSwatch · Slider · Checkbox

Export quality64%

Meters

ProgressCircle · UsageMeter · SegmentedBar

Storage

7.2 of 10 GB used

9/12seats
Traffic by source
  • Direct46
  • Search31
  • Referral23

Built in

The details are already done.

  • Contrast you can read

    Text tokens are tuned for AA contrast on the surfaces they sit on, in light and in dark.

  • Light and dark

    Surfaces, inks and accents all carry dark values, so one class on the root switches everything.

  • Accent themes

    Swap the lime for blue, orange, violet or green with a single class. The neutrals follow.

  • Motion with manners

    Springs and easings are tokens too, and they settle at once when reduced motion is on.

Free and coming soon

Every component is free. Full pages are coming soon.

Build anything with the open-source library. Finished dashboards, account screens and sidebar shells are on the way, all made from the same free components.

Browse the free components
What the free library includes, and what is coming soon
FeatureFreeComing soon
Every component in @pestoui/coreForms, overlays, navigation, tables, charts and metersIncluded
Design tokens, accent themes and dark modeIncluded
Keyboard support and screen-reader labelsIncluded
Full-page layoutsDashboards, analytics, finance, task tracking, team, workspace and landing pagesNot includedIncluded
Sidebar shellsRail and panel, floating card, action-led, plan-aware and team shells, with their account and workspace menusNot includedIncluded
TermsFree, MIT licenceTo be announced

Install

Install once. Import anywhere.

Add the package, import its stylesheet once at the root of your app, and every component is ready to use.

Read the docs

  1. 01Install the package

    npm install @pestoui/core

  2. 02Import the styles once, at your app root

    import "@pestoui/core/styles.css"

  3. 03Use any component

    import { Button } from "@pestoui/core"