@nickui/cli

Copy-paste Expo and React Native components and theme packs, for people who ship on-chain.

@nickui/cli copies source files into your app. You own the code: read it, change it, keep it. iOS, Android and web.

The package is @nickui/cli. npm i -g @nickui/cli gives you the nickui command.

Start

In an Expo app:

pnpm dlx @nickui/cli init --pack citrine

That adds the theme, ModeProvider, ThemeProvider, the colour hooks and a pack, installs the pack's fonts with expo install, and prints the root layout to paste.

import { useTheme } from '@/providers/theme-provider';

const { colors, type } = useTheme();
<Text style={[type.heroBalance, { color: colors.foreground }]}>$1,590.00</Text>;

Packs

A pack is a complete look: colour tokens for light and dark, fonts, and recipes that change component shape (pill or rounded buttons, hairline or filled cards, dimmed decimals, chart style). Swap the pack and everything re-skins.

| Pack | Look | | ---------- | ----------------------------------------------------------------------------------------------------- | | xorr | True black, 1px hairlines, Inter, tabular figures; green and red only for profit and loss | | citrine | Charcoal, filled rounded cards, lime for the one action that matters, quiet decimals | | volt | Near-black, electric lime and violet, lime balance card, keypad sheets, pill tab bar | | tide | Perps on black: mint longs, pink losses, leverage badges, a price tag on the last candle | | depth | Dense exchange terminal in light and dark: order book, buy/sell ticket, tight corners | | graphite | Charcoal portfolio: smooth multi-line charts, solid delta chips, extra-bold figures | | pixel | Light landing pages: lavender page, white cards, violet pixel art, lime pill buttons | | ember | Pure black and crimson neon: glowing glass art, a floating glass nav, mono body copy, red-lit buttons |

nickui pack list
nickui pack info citrine         # tokens, fonts, recipes, rules
nickui pack use xorr             # switch
nickui pack export citrine --css # shadcn / Tailwind CSS variables for a web app

Commands

| Command | Does | | ------------------------------------------- | ----------------------------------------------------- | | nickui init [--pack <name>] | Set up theming | | nickui add <items...> | Add items and everything they need | | nickui list | Every item | | nickui view <item> | Print an item's source | | nickui diff [items...] | Which installed files differ from the registry | | nickui pack list \| info \| use \| export | Packs | | nickui llms | llms.txt for AI coding agents: nick-ui and every pack |

Flags: --yes never prompts, --overwrite replaces files you changed, --cwd <dir> targets another folder.

What's inside

• Components: text, button, card, badge, amount, input, input-otp, keypad, switch, segmented, chip-group, checkbox, radio-group, progress, stepper, bottom-sheet, alert-dialog, toast, action-sheet, skeleton, spinner, success-check, avatar, list-row, qr-code, copy-field, pill-tab-bar, accordion and more.
• Charts: line, sparkline, bar (and stepped), category bars, donut, progress ring, candlestick.
• Blocks: a whole money app (balance card, send and receive sheets, Pay in 4 checkout, credit score and credit line, plans, activity, cards, claim a link, onboarding, Face ID sign-up) and landing pages (heroes, glass nav, bento grid, stats, pricing, FAQ, CTA banners, footers).
• Art: original 3D renders for the volt, citrine, pixel and ember packs.

Run nickui list to see everything in the version you have.

MIT · github.com/nickthelegend/nickui