ui
BYOK Lab UI
Cross-platform component library for React Native and React Native Web: DTCG design tokens, semantic theme, layout primitives, and app-shell components that render near-identically on iOS, Android, and the web.
232 value exports across five packages — 170 previewed live, 62 listed with the reason they cannot render standalone. 13 example screens.
Docs
Package reference, getting started and generated API pages for all five packages.
Gallery
Every value export, live: prop variants in light and dark, at both densities, with the JSX that produced them.
Screens
Whole-screen demos rendered from the same source the Expo app runs on iOS and Android.
Packages
Tokens
DTCG / W3C design tokens (color, space, radius, font, shadow) — the single source of truth the theme is derived from.
Explore docs →Theme
Semantic theme resolved from tokens: ThemeProvider, useTheme, makeTheme with comfortable/compact density. Apps never touch raw values.
Explore docs →Primitives
The only layer that touches React Native styling: Box, Stack/HStack/VStack, Text, Surface, Pressable, Icon, Divider, Spacer, ScrollArea with token-keyed style props.
Explore docs →Components
Design-system components built only from primitives + theme: Button, Input, Tabs, app shells (AppShell, Sidebar, TopBar, InspectorPanel), lists, trees, editor and canvas widgets.
Explore docs →Markdown
The Markdown an agent writes, rendered with the components: markdown-it parsing into a typed block tree, then React elements from @byoklab/ui-components. Kept out of the component package so a consumer of one Button does not also take a parser.
Explore docs →Icons
Icon name registry mapping the design-system icon vocabulary to lucide-react-native components (SVG-rendered on all platforms).
Explore docs →