Getting Started

Achery UI is a React component library with a strong visual identity: square corners, stamp shadows, compressed type, and decorative glyphs drawn from alchemical and botanical illustration traditions.

Install

pnpm add achery-ui

Requires React 19+.

Import styles

Add the stylesheet once at your app entry point:

import 'achery-ui/style.css'

Wrap your app

Place AcheryProvider once at the top of your tree:

import { AcheryProvider } from 'achery-ui'

export default function App() {
  return (
    <AcheryProvider defaultTheme="light" defaultAccent="terracotta">
      <YourApp />
    </AcheryProvider>
  )
}

Use components

import { Button, Badge, Card, Heading } from 'achery-ui'

function RecipeCard({ recipe }) {
  return (
    <Card variant="stamp" marginalia="fern">
      <Heading level={2}>{recipe.name}</Heading>
      <Badge tone="saved">Published</Badge>
      <Button variant="accent" glyph="book">Open</Button>
    </Card>
  )
}

Entry points

The /tokens entry is zero-DOM, zero-React — safe from React Native or any non-browser context. The /native entry is a full component set built on React Native primitives, with no CSS dependency.