A collection of unstyled, accessible UI components for Ripple, powered by Zag.js state machines.

---

Features

• Headless — Zero styling opinions. Bring your own CSS, Tailwind, modules, or design system.
• Accessible — WAI-ARIA compliant with full keyboard navigation out of the box.
• State machines — Powered by Zag.js for predictable, framework-agnostic component logic.
• Composable — Fine-grained parts API — use only what you need, nest however you like.
• SSR-ready — Works with server-side rendering environments.

Installation

npm install ark-ripple

Quick Start

import { Accordion } from 'ark-ripple/accordion';

export component Demo() {
  <Accordion.Root collapsible>
    <Accordion.Item value="intro">
      <Accordion.ItemTrigger>{'What is Ark UI?'}</Accordion.ItemTrigger>
      <Accordion.ItemContent>
        {'A headless component library powered by state machines.'}
      </Accordion.ItemContent>
    </Accordion.Item>
  </Accordion.Root>
}

Anatomy

Every component follows a consistent parts-based API:

import { Dialog } from 'ark-ripple/dialog';

export component MyDialog() {
  <Dialog.Root>
    <Dialog.Trigger>{'Open'}</Dialog.Trigger>
    <Dialog.Backdrop />
    <Dialog.Positioner>
      <Dialog.Content>
        <Dialog.Title>{'Hello'}</Dialog.Title>
        <Dialog.Description>{'Welcome to Ark UI for Ripple.'}</Dialog.Description>
        <Dialog.CloseTrigger>{'Close'}</Dialog.CloseTrigger>
      </Dialog.Content>
    </Dialog.Positioner>
  </Dialog.Root>
}

Context API

Access component state from any descendant using the Context part:

import { Dialog } from 'ark-ripple/dialog';

export component DialogStatus() {
  <Dialog.Root>
    <Dialog.Trigger>{'Toggle'}</Dialog.Trigger>
    <Dialog.Context>
      component children({ context }) {
        <span>
          {'Dialog is '}
          {@context.open ? 'open' : 'closed'}
        </span>
      }
    </Dialog.Context>
  </Dialog.Root>
}

Documentation

Visit ark-ui.rip for full documentation, examples, and API reference.

Development

# Install dependencies
pnpm install

# Start Storybook
pnpm run dev

# Run tests
pnpm run test:ci

# Build
pnpm run build

# Lint
pnpm run lint:fix

License

MIT © Abraham A