orynn

A strongly-typed React UI library — JSON-driven forms and a shadcn-aligned component set. Built by Rajveer Singh.

Showcase & docs → https://orynn-web.pages.dev

orynn gives you:

• Form controls (standalone or JSON-driven) — Input · Textarea · NumberField · Dropdown (combobox) · DatePicker · Checkbox / CheckboxGroup · Radio / RadioGroup · Field primitive — plus a <Fieldset> / <Form> that renders a whole form from a config object, with a pluggable validation resolver and a field registry.
• A shadcn-aligned component set — Button · Label · Card · Badge · Alert · Separator · Switch · Tabs · Dialog · Popover · Tooltip · DropdownMenu · Table · DataTable · Drawer · Avatar · Skeleton · Command (⌘K) · Breadcrumb · Stepper · Toggle / ToggleGroup · Rating · FileUpload · ContextMenu · Timeline · Kbd · Empty · HoverCard · ScrollArea · Stat · Collapsible · AspectRatio · Spinner · Result · Popconfirm · PinInput · TagsInput · Descriptions · Carousel · Marquee · Watermark · BackTop · Affix · Splitter · Mentions · TreeView · ColorPicker · Menubar · Transfer · Image · QRCode · Anchor · NavigationMenu · Cascader · Tour · TreeSelect · AlertDialog · Accordion · Slider · Progress · Toast (<Toaster /> + toast()) · Pagination. Semantic OKLCH tokens, one --orynn-radius knob, light/dark via a .dark class, and a className that always wins.
• Theming — <OrynnProvider theme="…"> with presets, density, and a custom primary / ring / font / radius / spacing. Zero styling runtime: it only sets --orynn-* CSS variables.

One runtime dependency (radix-ui, for the interactive primitives); react is the only required peer. ESM + CJS + one shipped stylesheet.

Status & licence

0.50.0, MIT (LICENSE) — published on npm as orynn. The showcase site at https://orynn-web.pages.dev documents every component and has an AI-redesign guide at /redesign.

Install

npm i orynn        # peer: react >= 18

import "orynn/styles.css";

Install prints a one-time hello (name, licence, version, the AI skill). It's print-only and stays quiet in CI; ORYNN_NO_BANNER=1 turns it off.

Quick start

import { OrynnProvider, Button, Card, CardHeader, CardTitle, CardContent, Input } from "orynn";
import "orynn/styles.css";

<OrynnProvider theme={{ preset: "teal", colorScheme: "dark" }}>
  <Card>
    <CardHeader><CardTitle>Sign in</CardTitle></CardHeader>
    <CardContent>
      <Input label="Email" type="email" floatingLabel />
      <Button>Continue</Button>
    </CardContent>
  </Card>
</OrynnProvider>

JSON-driven form:

import { Fieldset, type FieldsetConfig } from "orynn";

const config: FieldsetConfig = {
  legend: "Personal details",
  fields: [
    { name: "firstName", type: "input", label: "First name", validation: { required: true, minLength: 2 } },
    { name: "country", type: "dropdown", label: "Country", validation: { required: true },
      options: [{ label: "India", value: "IN" }, { label: "Indonesia", value: "ID" }] },
  ],
};

<Fieldset config={config} onChange={(values) => console.log(values)} />;

Docs

Full docs live at https://orynn-web.pages.dev. In this repo:

• Getting started · Theming · Controls
• Components: button · card · dialog · drawer · dropdown-menu · command · tabs · tooltip · popover · switch · toggle · badge · breadcrumb · alert · avatar · separator · skeleton · stepper · table · label · accordion · slider · progress · toast · pagination · rating · file-upload · context-menu · timeline · kbd · empty · hover-card · scroll-area · stat · collapsible · aspect-ratio · spinner · result · popconfirm · pin-input · tags-input · descriptions · carousel · marquee · watermark · back-top · affix · splitter · mentions · tree-view · color-picker · menubar · transfer · image · qr-code · anchor · navigation-menu · cascader · tour · tree-select · alert-dialog · data-table
• Fieldset · JSON configuration · Validation
• Layout · Extensibility · Accessibility
• Changelog · Architecture · Roadmap