aporia

A collection of production-quality React components for building configurators - sliders, color pickers, gradient editors, toggles, and more.

Installation

npm install aporia

Usage

The usual setup is a Panel with one or more Category blocks, each containing rows (SliderRow, ColorRow, etc.). The package default export is Panel, so you can import it as the default or by name.

import { useState } from 'react'
import Panel, { Category, SliderRow, ColorRow, ToggleRow, GradientRow, ThemeProvider } from 'aporia'
import 'aporia/styles.css'

function App() {
  const [intensity, setIntensity] = useState(50)
  const [color, setColor] = useState('#E8470C')
  const [enabled, setEnabled] = useState(false)

  return (
    <ThemeProvider>
      <Panel>
        <Category title="Basics">
          <SliderRow
            label="Intensity"
            value={intensity}
            min={0}
            max={100}
            step={1}
            onChange={setIntensity}
          />
          <ColorRow label="Accent" value={color} onChange={setColor} />
          <ToggleRow label="Enabled" checked={enabled} onChange={setEnabled} />
        </Category>
        <Category title="Background">
          <GradientRow label="Gradient" onChange={(gradient) => console.log(gradient)} />
        </Category>
      </Panel>
    </ThemeProvider>
  )
}

You can also compose rows without Panel / Category if you only need individual controls.

Components

Panel

Rounded shell for a configurator: drop in Category sections and row components as children.

SliderRow

A polished slider with spring animations, keyboard support, and inline editing.

<SliderRow
  label="Volume"
  value={volume}
  min={0}
  max={100}
  step={1}
  onChange={setVolume}
  fmt={(n) => `${n}%`}  // Optional formatter
/>

ColorRow

Hex color picker with inline editing and native color picker fallback.

<ColorRow
  label="Color"
  value={color}
  onChange={setColor}
/>

ToggleRow

Accessible toggle switch with keyboard support.

<ToggleRow
  label="Dark Mode"
  checked={isDark}
  onChange={setIsDark}
/>

GradientRow

Multi-stop gradient editor with shuffle, invert, and auto-distribute controls.

<GradientRow
  label="Gradient"
  initialStops={[
    { color: '#000000', position: 0 },
    { color: '#ffffff', position: 100 },
  ]}
  angle={90}
  onChange={(cssGradient) => console.log(cssGradient)}
/>

GradientPicker

Lower-level gradient editor component with full control.

import { GradientPicker, stopsToGradient, parseGradient } from 'aporia'

<GradientPicker
  stops={stops}
  onChange={setStops}
/>

// Utilities
const css = stopsToGradient(stops, 90)  // Convert to CSS
const stops = parseGradient(css)         // Parse CSS gradient

Theming

Aporia includes built-in dark and light themes. Wrap your app with ThemeProvider:

import { ThemeProvider, useTheme } from 'aporia'

function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  )
}

// Access theme in components
function ThemeToggle() {
  const { theme, toggleTheme } = useTheme()
  return <button onClick={toggleTheme}>{theme}</button>
}

Keyboard shortcut: Shift+T toggles the theme.

Peer Dependencies

Aporia requires these peer dependencies:

react >= 18.0.0
react-dom >= 18.0.0
motion >= 12.0.0
@base-ui/react >= 1.0.0

Development

# Install dependencies
npm install

# Start dev server (demo app)
npm run dev

# Build library
npm run build

# Lint
npm run lint

License

MIT