Satori

Minimalistic UI that Just Flows.

What is Satori?

Satori means “enlightenment, clarity, flow.” This open source UI library was born from two decades of real-world engineering and UX experience. Each component is built to be minimal, smooth, and joyfully easy to use. Satori UI is for developers who want more than just pretty pixels—it’s about seamless flow, developer happiness, and real-world results.

Every component here started life in production, not in a design mockup. My goal: a UI kit that *feels* as good to use as it does to look at. More components, docs, and tools are coming soon. Welcome to the next step in your UI journey.

Satori Color Palette

Pearl Cloud

#f8fafc → #e5e7eb

Calm, fresh start; like morning clouds, subtle polish.

A gentle, pearly white gradient reminiscent of morning clouds—soft, polished, and calming. Moves away from flat white, offering depth and tranquility.

Awakening Gray

#d1d5db

Poised, balanced; the transition between rest and awakening.

An 'in-between' gray for borders and secondary elements. Supports flow and transition without demanding attention.

Skyline Blue

#60a5fa

Subtle energy, hope; the first light of blue sky.

A subtle, early-morning blue used for highlights and accents. Energizing yet understated, inspiring gentle motivation.

Carbon Black

#374151

Focus, authority, readability; like pencil lead on paper.

A deep, graphite-inspired black for text. Provides strong contrast and ensures the user's attention is always on what matters.

Design Philosophy

Clarity & Focus

No clutter. No unwanted distractions. Every element on the screen serves a clear purpose, helping you focus on what matters most.

Smooth Flow

A UI that works with you and for you. Every interaction feels natural and fluid, minimizing friction and maximizing momentum.

Simplicity

Turning complex tasks into simple interactions. Thoughtful design choices ensure even advanced features feel intuitive.

Toggle Dark Mode

Satori UI in Action

Satori, in Zen Buddhism, means a moment of sudden enlightenment or understanding. This UI library is built on that principle: to provide clear, intuitive, and thoughtfully crafted components that feel like a natural extension of your creative process. It's the culmination of nearly two decades of experience, distilled into a modern, accessible, and high-performance suite for developers and designers who value both form and function.

Heading Options

Heading

Color

Bold

Font Family

Font Size

Paragraph Options

Paragraph

Color

Font Size

Components

SatoriCollapsiblePanel

Spacing

Open Panel

SatoriCollapsiblePanel

A clean, minimalistic Collapsible Panel component.

<SatoriCollapsiblePanel 
  title={"Spacing"} 
  icon={<Space size={20} />}
  defaultOpen 
>
  Opened Panel
</SatoriCollapsiblePanel>

SatoriButton

A clean, minimalistic button component.

<SatoriButton 
  label="Click Me" 
  variant="light" 
/>

SatoriCheckBox

Remember Me

SatoriCheckBox

A clean, minimalistic checkbox component.

<SatoriCheckBox 
  label="Agree" 
  checked={isChecked}
  onChange={() => ...}
/>

SatoriTextBox

A clean, minimalistic textbox component.

<SatoriTextBox 
  label="First Name" 
  value={firstName}
  onChange={val => ...}
/>

SatoriMultiLineBox

A clean, minimalistic MultiLineBox component.

<SatoriMultiLineBox 
  label="Feedback" 
  rows={3}
  value={feedback}
  onChange={val => ...}
/>

SatoriDropDownList

A clean, minimalistic DropDownList component.

<SatoriDropDownList
  options={TEXT_DECORATIONS}
  value={textDecoration}
  layout={"vertical"}
  isFontFamily={false}
  onChange={val => ...} 
/>

SatoriDimensionsBox

A clean, minimalistic Dimensions Input Box component.

<SatoriDimensionsBox
  label={"Font Size"}
  value={fontSize.value}
  unit={fontSize.unit}
  onValueChange={val => ...}
  onUnitChange={unitVal => ...}
/>

SatoriColorPicker

Color

SatoriColorPicker

A clean, minimalistic ColorPicker component.

<SatoriColorPicker
  label={"Color"}
  value={cpDemoVal}
  onChange={val => ...} 
/>

SatoriSwitch

A clean, minimalistic Switch component.

<SatoriSwitch
  checked={isDarkMode}
  onChange={() => ...} 
/>