aporia

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

Installation

npm install aporia

Usage

import { 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>
      <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}
      />
      <GradientRow
        label="Background"
        onChange={(gradient) => console.log(gradient)}
      />
    </ThemeProvider>
  )
}

Components

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