Skip to content
RefineUI

Getting started

Install RefineUI and learn the architecture — tokens, components, and AI-ready docs.

RefineUI is the unified design system for Pelagornis products. Foundation variables become @refineui/tokens. UI is @refineui/react. The Web Kit you design against is the React you ship.

Architecture

Section titled “Architecture”
  • Foundations — Visual language, design tokens, and layout
  • Components — Actions, Forms, Navigation, Feedback, Overlays, Data Display, Content, Layout
  • Development — Installation, theming, and motion in product code
  • AI & Tools — DESIGN.md, llms.txt, Skill, Doctor, MCP

Install

Section titled “Install”
npm install @refineui/react @refineui/tokens @refineui/web-icons

Stylesheet

Section titled “Stylesheet”

Load token CSS 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";

Example

Section titled “Example”
import { Button, Input, Card } from "@refineui/react";
import "@refineui/react/refineui.css";


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

Next

Section titled “Next”