# expokit

Adopt this skill: https://proskills.md/skills/other/expokit-expokit-skills-expokit

Page: https://proskills.md/skills/other/expokit-expokit-skills-expokit
This document is the public skill bundle for that page. It contains SKILL.md and every helper file the catalog carries. No login is required.

## File: skills/expokit/SKILL.md
size: 2591
sha: 9f9429e72891a30f046f5dd8c4ed16e4a3874f8d
upstream: https://github.com/expokit/expokit/blob/main/skills/expokit/SKILL.md

````text
---
name: expokit
description: Add and use ExpoKit UI components (buttons, inputs, sheets, dialogs, toasts, pickers, charts, 3D and Liquid Glass) in an Expo or React Native app. Use when the user asks for a UI component, screen or chart in an Expo app, mentions ExpoKit or expo-kit, or wants animated native-feeling UI.
---

# ExpoKit

ExpoKit works like shadcn/ui for Expo: the CLI copies component **source** into the app. There is no `expokit`
package to import from, and you should never re-implement a component that ExpoKit has.

## Workflow

1. **Find the item.** If the `expokit` MCP server is connected, call `search_items` (or `list_items`), then `view_item`
   for props, the import line and examples. Without it, run `npx @expokit/cli@latest add --list`, or read
   https://expokit.in/llms.txt.
2. **Add it** from the app's root folder (where `package.json` is):
   ```bash
   npx @expokit/cli@latest add <name> [<name>...]
   ```
   The first run also does `init`: it writes `components.json`, adds the `@/*` path alias to `tsconfig.json`, copies
   files to `src/components/ui/` (or `components/ui/` without `src/`), copies the shared theme `lib/kit.tsx`, and runs
   `npx expo install` for packages like `react-native-svg` and `expo-haptics`.
3. **Open the copied file** to confirm the export name and props, then import it with the alias:
   ```tsx
   import { BottomSheet } from '@/components/ui/bottom-sheet';
   ```
4. **Use only props that exist.** Follow the examples from `view_item` or the docs page
   `https://expokit.in/docs/components/<name>`.

## Theming

Components read colours, radius and light / dark from `useKit()`. To re-skin all of them, wrap the app once:

```tsx
import { KitProvider } from '@/lib/kit';

<KitProvider accent="#6366f1" radius={14}>{children}</KitProvider>
```

`scheme="light" | "dark" | "system"` forces a mode. In your own UI next to ExpoKit components, use
`const { colors, radius } = useKit()` instead of hard-coded colours so everything matches.

## Pro items

Items marked PRO need an ExpoKit Pro plan. If `add` says "not logged in", ask the user to run
`npx @expokit/cli@latest login` themselves (token from https://expokit.in/account). Never ask
for the token in chat, and don't write a look-alike of a Pro component instead.

## Don'ts

- Don't `npm install expokit` or import from `expo-kit` — the code lives in the app.
- Don't overwrite files the user edited: `add` keeps changed shared files unless you pass `--force` (ask first).
- Don't add Reanimated, Skia or Gesture Handler just for ExpoKit — it doesn't need them.
````

## File: README.md
upstream: https://github.com/expokit/expokit/blob/main/README.md

````text
<p align="center">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://expokit.in/logo-mark-light.svg">
    <img src="https://expokit.in/logo-mark.svg" alt="ExpoKit" height="72">
  </picture>
</p>

<h1 align="center">ExpoKit</h1>

<p align="center">
  Beautifully animated UI components, charts and templates for Expo and React Native.
  <br>
  <a href="https://expokit.in">Website</a> ·
  <a href="https://expokit.in/docs">Docs</a> ·
  <a href="https://www.npmjs.com/package/@expokit/cli">CLI on npm</a> ·
  <a href="https://www.npmjs.com/package/expo-charts">expo-charts on npm</a>
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@expokit/cli"><img src="https://img.shields.io/npm/v/@expokit/cli?label=%40expokit%2Fcli" alt="@expokit/cli on npm"></a>
  <a href="https://www.npmjs.com/package/expo-charts"><img src="https://img.shields.io/npm/v/expo-charts?label=expo-charts" alt="expo-charts on npm"></a>
  <a href="https://github.com/Anshkaran7/expokit/actions/workflows/ci.yml"><img src="https://github.com/Anshkaran7/expokit/actions/workflows/ci.yml/badge.svg" alt="CI"></a>
  <a href="https://scorecard.dev/viewer/?uri=github.com/Anshkaran7/expokit"><img src="https://api.scorecard.dev/projects/github.com/Anshkaran7/expokit/badge" alt="OpenSSF Scorecard"></a>
  <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="MIT license"></a>
</p>

<p align="center">
  <a href="https://expokit.in/showcase"><img src="https://expokit.in/readme/charts.gif" alt="ExpoKit charts on iPhone: scrubbing an area chart and a bar chart, dragging a gauge, tapping through a donut" width="720"></a>
</p>

<p align="center">
  <a href="https://expokit.in/docs/components"><img src="https://expokit.in/readme/screens.jpg" alt="ExpoKit on iPhone in dark and light mode: payment card, flip card, dashboard block and checkout block" width="720"></a>
  <br>
  <sub>Payment card and flip card are free; the dashboard and checkout screens are <a href="https://expokit.in/pricing">Pro</a> blocks.</sub>
</p>

## Quick start

In your Expo app's folder:

```bash
npx @expokit/cli@latest init
npx @expokit/cli@latest add button otp-input
```

**[Browse every component with live previews →](https://expokit.in/docs/components)** ·
**[Try them on your phone in Expo Go →](https://expokit.in/docs/run-on-your-phone)**

## What is ExpoKit?

ExpoKit works like shadcn/ui for mobile: instead of installing a UI library, the CLI copies each component's source
into your app. You get readable, typed files you own and can change however you like.

- **Built for touch** — springs, drag gestures, squash and stretch, haptics-ready feedback
- **Runs everywhere** — iOS, Android, web and Expo Go, with plain React Native `Animated` and `react-native-svg`
- **One theme** — light and dark built in; one `KitProvider` re-skins every component
- **Accessible** — roles, states and labels for VoiceOver and TalkBack, 44pt touch targets
- **AI-ready** — an MCP server and a Claude Code plugin let your editor find and add components for you

## What's in this repo

| Folder | What |
| --- | --- |
| `registry/` | The free components, charts and templates — each with its source, props (`item.json`) and demos |
| `packages/cli` | `@expokit/cli`, the CLI that adds components to your app |
| `packages/charts` | `expo-charts`, animated and interactive charts |
| `skills/`, `.claude-plugin/` | The ExpoKit skill and Claude Code plugin |

[ExpoKit Pro](https://expokit.in/pricing) adds 3D and Liquid Glass components, full-screen blocks and more
charts. Pro source is not in this repository.

## Docs

Installation, live previews, props, theming and AI setup for every component:
**[expokit.in/docs](https://expokit.in/docs)**

## Feedback

This repository is a read-only mirror of ExpoKit, so pull requests are closed automatically. Found a bug or want a
component? [Open an issue](https://github.com/Anshkaran7/expokit/issues/new/choose).

## Security

- **No runtime dependencies** — neither `@expokit/cli` nor `expo-charts` installs anything else (`expo-charts` only
  has peer dependencies), and neither runs install scripts.
- **Source in the open** — every published version is built from the code in this repository.
- **Checked continuously** — CI, [CodeQL](.github/workflows/codeql.yml) and
  [OpenSSF Scorecard](https://scorecard.dev/viewer/?uri=github.com/Anshkaran7/expokit) run on every change.

Found a vulnerability? Please report it privately — see [SECURITY.md](SECURITY.md).

## Community

- X: [@expo_kit](https://x.com/expo_kit)
- Instagram: [@expokit.in](https://www.instagram.com/expokit.in/)
- Email: [work@karandev.in](mailto:work@karandev.in)

## Sponsors

ExpoKit is built by one developer. [Become a sponsor →](https://expokit.in/pricing#sponsor) — Pro forever, priority on your component requests, and your name here.

## License

[MIT](LICENSE) © Karan (anshkaran7) — covers everything in this repository. ExpoKit Pro items are not part of it:
they are sold separately under the terms at https://expokit.in/terms. The ExpoKit name and logo are not
licensed for use as your own branding.
````