Installation

Krizaka UI is a handful of packages on npm under @krizaka/*. A web app needs three of them and Tailwind; a React Native app needs two. Every primitive has its own entry point (@krizaka/ui/card, @krizaka/ui/dialog…), so an app ships only what it imports.

A web app (Next.js, Vite)Copy Anchor Link

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

@import "tailwindcss";
@import "@krizaka/tailwind";        /* tokens + utilities + motion signature */
@import "@krizaka/ui/tailwind.css"; /* Tailwind generates the classes the primitives use */

import { Button } from "@krizaka/ui/button";

export default function Save() {
  return <Button variant="primary">Save</Button>;
}

Put ThemeScript from @krizaka/ui/theme in the <head> so the first paint already has the right theme (no flash), and wrap the app in ThemeProvider where a component needs to read or change it.

A React Native app (Expo)Copy Anchor Link

npx expo install react-native-svg
npm install @krizaka/ui @krizaka/tokens

import { ThemeProvider, Button } from "@krizaka/ui/native";

export default function App() {
  return (
    <ThemeProvider>
      <Button label="Save" variant="primary" />
    </ThemeProvider>
  );
}

A component that needs an Expo module (list, form, map, the camera and picker) has its own entry (@krizaka/ui/native/map): an app that does not use it never installs the module. The Mobile page lists what exists natively.

NextCopy Anchor Link

• Wear a product's identity: Theming a product.
• Find a component by the job it does: the catalogue.
• Start a whole page: the templates.