Theming
src/lib/kit.tsx through useKit(). Change them once, everywhere.KitProvider
Optional. Without it, components follow the device's light / dark setting with the default indigo accent.
import { KitProvider } from "@/lib/kit"; <KitProvider scheme="system" // "light" | "dark" | "system" accent="#0ea5e9" // brand colour radius={16} // base corner radius (sm / md / lg / xl derive from it) colors={{ dark: { background: "#000000", card: "#0c0c0f" } }}> <Stack /></KitProvider>Tokens
| Prop | Type | Default |
|---|---|---|
| background / foreground Page colours. | string | #fff / #09090b |
| card / popover Raised surfaces: cards, inputs, sheets, toasts. | string | #fff |
| muted / mutedForeground Subtle fills and secondary text. | string | #f4f4f5 / #71717a |
| border / input Hairlines and field outlines. | string | #e4e4e7 / #d4d4d8 |
| primary / primaryForeground Default solid buttons. | string | #18181b / #fafafa |
| accent / accentForeground Brand colour: focus rings, selection, accent buttons. Monochrome by default — pass your own to KitProvider. | string | #18181b / #fff (dark: #fafafa / #09090b) |
| success / warning / danger Status colours. | string | green / amber / red |
Text is regular weight (400) throughout the kit. For bolder headings or labels, change fontWeight in the component's styles — the code is in your project, so it's yours to edit.
Use it in your own components
import { Text, View } from "react-native";import { alpha, useKit } from "@/lib/kit"; export function PlanCard({ title }: { title: string }) { const { colors, radius, text } = useKit(); return ( <View style={{ backgroundColor: alpha(colors.accent, 0.12), borderRadius: radius.lg, padding: 16 }} > <Text style={[text.lg, { color: colors.foreground }]}>{title}</Text> </View> );}Motion presets
motion.snappy (toggles, indicators), motion.bouncy (press feedback, pops) and motion.gentle (sheets, layout) are spring configs shared by the whole kit — spread them into Animated.spring to make your own components feel the same.
Animated.spring(scale, { toValue: 0.96, useNativeDriver: true, ...motion.bouncy }).start();Did you like the content?