Layouts and Styles

TailorKit apps should build layout with primitives, not raw styles or class names. The host owns the design system; apps ask for intent through typed props and theme tokens.

Primitives

Add primitives to your host schema, then import the generated bindings from #tailorkit in app code.

import { defineSchema } from "tailorkit";
import { primitives } from "tailorkit/zod";

export const schema = defineSchema({
  components: {
    ...primitives(),
  },
});

Render those primitives in the host by adding the React primitive renderers to your TailorKit client. Custom components can sit beside them.

import { Button } from "@/components/button";
import { createTailorKitClient, primitives } from "tailorkit/react";
import { tailor } from "./tailor";

export const tailorClient = createTailorKitClient<typeof tailor>({
  baseUrl: "/api/tailorkit",
  components: {
    ...primitives,
    Button: ({ props, slots }) => (
      <Button variant={props.variant} onClick={props.onClick}>
        {slots.default}
      </Button>
    ),
  },
});

export default tailorClient;

import { Box, Flex } from "#tailorkit";

export function Screen() {
  return (
    <Box background="surface" padding="lg" radius="md">
      <Flex direction={{ base: "column", md: "row" }} gap="md" align="center">
        Content
      </Flex>
    </Box>
  );
}

The generated #tailorkit file exposes typed component props, so token names and breakpoint names come from the host schema.

Available Primitives

All primitive props are responsive unless noted by the generated type:

<Grid columns={{ base: 1, md: 2, lg: 3 }} gap="lg" />

Box

A block container with spacing, sizing, surface, overflow, and text props.

Flex

A flex container. Includes every Box prop plus direction, align, justify, gap, and wrap.

Grid

A grid container. Includes every Box prop plus columns and gap.

Inline

Inline text/content styling. Supports spacing, surface color, radius, and text props.

Theme Tokens

Theme tokens are named values configured on the host schema. Primitive props use token names, and the React renderer turns them into scoped CSS variables.

import { defineSchema, type TailorKitTheme } from "tailorkit";
import { primitives } from "tailorkit/zod";

const theme: TailorKitTheme = {
  tokens: {
    background: {
      surface: "var(--card)",
      muted: "var(--muted)",
    },
    borderColor: {
      default: "var(--border)",
    },
    textColor: {
      muted: "var(--muted-foreground)",
    },
  },
};

export const schema = defineSchema({
  components: {
    ...primitives(theme),
  },
  theme,
});

Breakpoints

Breakpoints control responsive primitive props. Defaults:

Background Colors

Used by the background prop. No defaults are provided; define the surface names apps are allowed to use.

Border Colors

Used by the borderColor prop. No defaults are provided; define the border color names apps are allowed to use.

Text Colors

Used by the textColor prop. No defaults are provided; define the text color names apps are allowed to use.

Spacing

Used by padding, margin, and gap. Defaults:

none, 2xs, xs, sm, md, lg, xl, 2xl, 3xl

Radius

Used by the radius prop. Defaults:

none, 2xs, xs, sm, md, lg, xl, 2xl, 3xl

Size

Used by width and height. Defaults:

0, fractions from 1/2 through 11/12, full, min, max, fit

Border Styles

Used by the border prop. Defaults:

solid, dashed, dotted, double

Overflow

Used by the overflow prop. Defaults:

visible, hidden, clip, scroll, auto

Overflow Wrap

Used by the overflowWrap prop. Defaults:

normal, breakWord, anywhere

Text Align

Used by the textAlign prop. Defaults:

left, right, start, end, center, justify

Text Overflow

Used by the textOverflow prop. Defaults:

clip, ellipsis

Text Transform

Used by the textTransform prop. Defaults:

capitalize, uppercase, lowercase, none

Prop Overview

Common Box props:

background, basis, border, borderColor, grow, height, margin, minHeight, minWidth, overflow, overflowWrap, padding, radius, shrink, textAlign, textColor, textOverflow, textTransform, width

Flex also supports:

align: "start" | "center" | "end" | "stretch", direction: "row" | "column", gap, justify: "start" | "center" | "end" | "between", wrap: "wrap" | "nowrap" | "wrap-reverse"

Grid also supports:

columns: 1 | 2 | 3 | 4 | 6 | 12, gap