@anshkaran7/expo-kit

shadcn-style CLI for Expo — add native UI blocks and components into your app as source you own.

No opaque UI dependency. Run a command, get TypeScript files in your repo, edit freely.

Quick start

From any Expo project:

npx @anshkaran7/expo-kit@latest init
npx @anshkaran7/expo-kit@latest add button
npx @anshkaran7/expo-kit@latest add liquidglass-tab

List everything in the registry:

npx @anshkaran7/expo-kit@latest add --list

How it works

| Command | What it does | | --- | --- | | init | Creates components.json (paths + aliases) and sets up @/* in tsconfig.json if needed | | add <name> | Copies registry files into your project and runs npx expo install for peer deps | | add --dry-run | Preview files without writing | | add --force | Overwrite existing files | | update | Refresh framework files after a package upgrade (keeps tabs.ts) | | update --force | Full overwrite including your tabs.ts | | doctor | Validate tabs config, routes, and peer deps | | add --list | Prints available components and templates |

Same mental model as npx shadcn@latest add button — copy-paste, not an import from node_modules.

Registry

| Name | Type | Description | | --- | --- | --- | | button | component | Pressable with solid / outline / ghost, sizes, loading | | liquidglass-tab | template | NativeTabs with dynamic icons/labels and App Store scroll-collapse |

Aliases for the tab template: liquid-glass-tab, native-tabs, liquidglass-tabs.

Button

npx @anshkaran7/expo-kit@latest add button

Writes src/components/ui/button.tsx (path configurable via components.json).

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

<Button onPress={onSave} loading={isSaving}>
  Save
</Button>

<Button variant="outline" size="lg">
  Cancel
</Button>

Liquid glass bottom tabs

npx @anshkaran7/expo-kit@latest add liquidglass-tab

Copies:

• src/app/_layout.tsx
• src/app/(tabs)/_layout.tsx + tab screens
• src/lib/tabs.ts — labels, icons, icon libraries, collapse behavior
• src/lib/tab-icons.ts — iconFont / icoMoon for any .ttf (Tabler, Hugeicons, …)
• src/components/TabScreen.tsx

Then installs peers (expo-router, gesture handler, screens, reanimated, etc.).

Next steps after add:

1. Edit src/lib/tabs.ts — labels, icon presets, colors, screen text
2. Run npx @anshkaran7/expo-kit@latest doctor
3. Real liquid glass needs a dev build on iOS 26+ with Xcode 26 — Expo Go usually shows a normal blur bar
4. Scroll a tab screen: the bar collapses into a glass circle (current tab) like the App Store; scroll up to expand
5. Run: npx expo run:ios

Preview or overwrite safely:

npx @anshkaran7/expo-kit@latest add liquidglass-tab --dry-run
npx @anshkaran7/expo-kit@latest add liquidglass-tab --force
npx @anshkaran7/expo-kit@latest update
npx @anshkaran7/expo-kit@latest doctor

Configuration

init creates components.json:

{
  "$schema": "https://expokit.dev/schema.json",
  "aliases": {
    "components": "@/components",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "paths": {
    "components": "src/components",
    "lib": "src/lib",
    "app": "src/app"
  }
}

Change paths if your app layout differs (e.g. app instead of src/app).

Requirements

• Node 18+
• Expo SDK 51+ (SDK 54+ recommended for native liquid-glass tabs)
• TypeScript or JavaScript
• expo-router for tab templates

Docs

• Site: expokit.dev/docs
• Installation: expokit.dev/docs/installation
• Liquid glass tabs: expokit.dev/docs/templates/native-tabs-liquid-glass

License

MIT