@aplo/ui

Aplo Design System — React component library built with Base UI, Tailwind CSS v4, and TypeScript.

Installation

npm install @aplo/ui

Setup

1. Import styles

In your app entry file (e.g. main.tsx):

import '@aplo/ui/styles'

Or in your CSS:

@import '@aplo/ui/styles';

2. Wrap your app with AploProvider

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import '@aplo/ui/styles'
import { AploProvider } from '@aplo/ui'
import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <AploProvider>
      <App />
    </AploProvider>
  </StrictMode>
)

AploProvider sets up theme (light/dark) and motion preferences. All @aplo/ui components must be rendered inside it.

Usage

import { Button, Input, Switch } from '@aplo/ui'

export function MyForm() {
  return (
    <form>
      <Input label="Email" placeholder="[email protected]" />
      <Button>Submit</Button>
    </form>
  )
}

Providers

If you need individual providers (e.g. for custom nesting):

import { ThemeProvider, MotionProvider } from '@aplo/ui'

useTheme

import { useTheme } from '@aplo/ui'

const { theme, setTheme } = useTheme()
// theme: 'light' | 'dark'
// setTheme('light') | setTheme('dark')

useMotion

import { useMotion } from '@aplo/ui'

const { motionEnabled, setMotionEnabled } = useMotion()

Tailwind CSS

If you're using Tailwind CSS v4 in your project and want to use Aplo's theme variables (colors, spacing, etc.) in your own styles, import the theme directly instead of the prebuilt CSS:

@import "tailwindcss";
@import "@aplo/ui/styles";
@source "./node_modules/@aplo/ui/dist";