@perako/ui-web
v0.0.4
Published
React DOM Perako design-system primitives.
Readme
@perako/ui-web
Thin React DOM primitives that consume @perako/design-tokens through CSS variables.
Mirrors the component set of @perako/ui-native so the same design-system
primitives are available on both web and mobile.
Install
npm install @perako/ui-web @perako/design-tokens
# peer deps: react >=18, react-dom >=18Usage
Inject the token + component CSS once at the app root, then use the components. Dark mode
is driven by [data-theme="dark"] on a parent element (usually <html>).
import { PerakoStyleTag, Screen, Card, Button, Text } from "@perako/ui-web";
export default function App() {
return (
<>
<PerakoStyleTag /> {/* or: <style>{perakoUiWebCss}</style> */}
<Screen>
<Card elevated>
<Text variant="title">Welcome</Text>
<Button variant="primary">Continue</Button>
</Card>
</Screen>
</>
);
}The CSS is also available as a string (perakoUiWebCss) or factory (createUiWebCss()) if
you prefer to write it to a .css file or inline it in a framework-specific way.
Components
Badge, Button, Card, Divider, ErrorBoundary, ErrorFallback, Icon, IconButton,
Input, LoadingSkeleton, Logo, NetworkBanner, Screen, SegmentedTabs, Text, Toast.
Helpers: PerakoStyleTag, perakoUiWebCss, createUiWebCss, uiWebClassNames.
Icon renders any icon from the shared @perako/design-tokens registry as inline SVG
(themed via currentColor); Logo renders the Perako logo mark:
import { Icon, Logo, IconButton } from "@perako/ui-web";
<Icon name="search" size={20} />
<IconButton label="Back"><Icon name="arrow-left" /></IconButton>
<Logo mode="dark" size={64} />All visual values come from design tokens — these components carry no product logic
(no wallet/auth/network ownership). See plan.md → Governance Rules.
Scripts
npm run build # tsc -> dist
npm run typecheck
npm run test # build + smoke tests (export parity + token-backed CSS)