RefineUI

Design system for Pelagornis products. Foundation variables ship as @refineui/tokens. Components ship as @refineui/react. Docs: ui.pelagornis.com.

Docs: ui.pelagornis.com · AI context: llm.txt · Icons: refineui-system-icons

Install

npm install @refineui/react @refineui/tokens
yarn add @refineui/react @refineui/tokens
pnpm add @refineui/react @refineui/tokens
bun add @refineui/react @refineui/tokens

React 18+ and react-dom 18+ are required.

Stylesheet

Load token CSS, system icons, and component interaction styles once at the app root:

@import "@refineui/tokens/tailwind.css";
@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";
@import "@refineui/react/refineui.css";

Or in JS:

import "@refineui/react/refineui.css";

Usage

import { Button, Card, Input } from "@refineui/react";
import "@refineui/react/refineui.css";

export function Example() {
  return (
    <Card>
      <Input placeholder="Email" type="email" />
      <Button variant="primary" type="button">
        Continue
      </Button>
    </Card>
  );
}

Packages

Package	Role
@refineui/react	Accessible React components aligned with the Web Kit
@refineui/tokens	Color, typography, spacing, sizing, radius, elevation, motion, z-index
@refineui/utilities	Shared helpers and layout algorithms
@refineui/web-icons	System icon font (used by WebIcon)

Monorepo

packages/react       @refineui/react
packages/tokens      @refineui/tokens
packages/utilities   @refineui/utilities
docs/                Astro + Starlight docs site

Develop

bun install
bun run build          # utilities → tokens → react
bun run docs           # local docs dev server
bun run docs:build     # build packages + static docs

Documentation

Section	Topics
Getting started	Install, architecture, first example
Foundations	Design tokens, layout, visual language
Components	Full component catalog with live previews
Development	Installation, theming, motion
AI & Tools	llms.txt, Skill, MCP

Machine-readable indexes: llm.txt · llms.txt

License

MIT. See LICENSE.