Getting started

1. Initialize

npx stylesheet-ui init

Writes stylesheet-ui.json and copies the theme + utils into your project.

2. Wrap your app

app/_layout.tsx

import { ThemeProvider } from "@/theme";

export default function RootLayout() {
  return <ThemeProvider><Stack /></ThemeProvider>;
}

3. Add components

npx stylesheet-ui add button input card

4. Use them

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

<Button onPress={() => {}}>Hello world</Button>

The copied files are yours. Edit freely.

CLI commands

npx stylesheet-ui init             # set up the project
npx stylesheet-ui add <name…>      # add component(s)
npx stylesheet-ui update [name…]   # refresh installed components (alias: up)
npx stylesheet-ui list             # show every component (alias: ls)

Flags on add and update:

• -y, --yes — skip prompts; preserve locally-edited files
• -f, --force — overwrite even files with local edits
• -d, --dry-run — preview what would change
• --diff — unified diff vs. the registry version
• -v, --verbose — one line per file copied

Config file

stylesheet-ui.json, created by init:

{
  "aliases": {
    "components": "@/components/ui",
    "theme": "@/theme",
    "utils": "@/utils"
  },
  "paths": {
    "components": "src/components/ui",
    "theme": "src/theme",
    "utils": "src/utils"
  }
}

paths.* is where files land. aliases.* is what imports use.

Icons

Components like Button, ListItem, and SettingsRow accept any ReactNode for icon slots. We recommend lucide-react-native:

npx expo install lucide-react-native react-native-svg