@lynstack/native-recipe

Fast, type-safe style recipes for React Native, with variants, compound variants, slots, and theme tokens. A recipe returns the same frozen style for the same variants, so the style prop keeps its identity between renders.

Read the documentation

Installation

npm install @lynstack/native-recipe

Requires React Native 0.76 or newer (Expo SDK 52 or newer), which is a peer dependency, and TypeScript 5.4 or newer for its types. It ships as an ES module only.

Usage

import { createSlotStyleRecipe } from "@lynstack/native-recipe";

const button = createSlotStyleRecipe({
  slots: ["root", "label"],
  base: { root: { borderRadius: 8 }, label: { fontWeight: "600" } },
  variants: {
    tone: {
      primary: {
        root: { backgroundColor: "#2563eb" },
        label: { color: "#ffffff" },
      },
      ghost: { label: { color: "#2563eb" } },
    },
    size: { sm: { root: { height: 32 } }, md: { root: { height: 40 } } },
  },
  defaultVariants: { tone: "primary", size: "md" },
});

const styles = button({ size: "sm" });
styles.root; // => { borderRadius: 8, backgroundColor: "#2563eb", height: 32 }
styles.label; // => { fontWeight: "600", color: "#ffffff" }

button({ size: "sm" }) === styles; // => true

Pass each style to the style prop of its element. See the Quick start, and Theming with design tokens to build styles from a light and a dark theme with createThemedRecipes.

Agent skill

The package ships an agent skill that teaches coding agents to keep styles stable and to build them from theme tokens. Install it with the skills CLI:

npx skills add lynstack/recipe --skill native-recipe

See Agent skill for what it teaches and other ways to use it.

Changelog

See CHANGELOG.md.

License

MIT