Quickstart

1. Wrap your app once

import { Provider } from "@knitui/core";

export default function App() {
  return (
    <Provider defaultColorScheme="system">
      <YourApp />
    </Provider>
  );
}

Provider is not just a theme context. It sets up four things you would otherwise wire yourself:

2. Render something

import { Button, Card, Group, Text, TextInput } from "@knitui/components";

export function SignIn() {
  return (
    <Card padding="lg" gap="$md">
      <Text fontWeight="600">Sign in</Text>
      <TextInput label="Email" placeholder="you@example.com" />
      <Group>
        <Button variant="light">Cancel</Button>
        <Button>Continue</Button>
      </Group>
    </Card>
  );
}

That code renders unchanged on iOS, Android and the web.

3. Learn the three props that repeat everywhere

Almost every component in the kit answers to the same vocabulary, so learning it once covers the whole library:

• size — xxs … xxl, resolved through one controlMetrics table. A size="lg" Button, a size="lg" TextInput and a size="lg" Badge line up.
• variant — how the theme's colour ramp is applied: filled, light, outline, subtle, default, white, transparent, gradient. See Variants & colors.
• styles — per-slot styling, targeting a component's internal parts by name. See Slots & styles.

<Button
  size="lg"
  variant="light"
  styles={{ label: { textTransform: "uppercase" } }}
>
  Continue
</Button>

4. Style with tokens, not numbers

Every style prop takes a token: p="$md", gap="$sm", br="$lg", c="$color11". Tokens keep spacing and colour consistent and make theming work.

<Box p="$lg" gap="$md" br="$md" bg="$color2" borderColor="$borderColor" borderWidth={1}>
  <Text c="$color11">Inside a themed surface</Text>
</Box>

Raw numbers still work where you need them (p={13}), but a token is almost always the right answer. See Tokens.

5. Go deeper