@origin-ui-kit/react
v0.2.0
Published
OriginUIKit React primitives and composites
Downloads
265
Readme
@origin-ui-kit/react
React primitives and composites for OriginUIKit — the same design language as the Angular package, with glass surfaces and shared tokens.
Install
npm install @origin-ui-kit/react @origin-ui-kit/tokensPeer dependencies: react and react-dom (^18 or ^19).
Quick start
import "@origin-ui-kit/tokens/styles.css";
import { AppHeader, AppSidebar, Button, Card } from "@origin-ui-kit/react";
export function App() {
return (
<>
<AppHeader title="Acme" />
<Button>Continue</Button>
</>
);
}Themes
Set a theme class on <html>: default light, dark, yaru-light, or yaru-dark.
import { applyTheme, OriginThemeProvider } from "@origin-ui-kit/react";
applyTheme("dark");
// or wrap the app
<OriginThemeProvider defaultTheme="dark">
<App />
</OriginThemeProvider>Button sizes include touch / icon-touch (≥44px) for mobile-first chrome.
What’s included
- Primitives — Button, Input, Select, Tabs, Table, Dialog, AlertDialog, Sheet, Popover, DropdownMenu, Command, Tooltip, and more
- Composites — AppHeader, AppSidebar, Card, CommandSearchField, NotificationBell, Timeline, AmountInput, SegmentedControl, Toaster, media cards, PIN/lock chrome
Tailwind tip
Prefer @origin-ui-kit/tokens/styles.css. If you compile Tailwind in your app and only import token partials, also scan kit sources:
@import "tailwindcss";
@source "../node_modules/@origin-ui-kit/react/src/**/*.{ts,tsx}";Docs
- Repo: originUIKit
- Twin package:
@origin-ui-kit/angular
Maintainer
Sreelal Chalil — sreelal.me
License
MIT