ghost-ui-native

React Native UI components with NativeWind and light/dark theming.

Links

Website	ghost-ui.kashif-dev.site
GitHub	github.com/codewithkashi/ghost-ui-native
npm	ghost-ui-native

Install

npm install ghost-ui-native
npx ghost-ui-native init --yes

init --yes installs ghost-ui-native plus NativeWind runtime deps, and writes Metro / Babel / nativewind-env.d.ts for NativeWind + @/ aliases. Without --yes, it prints the suggested install commands.

On Expo, prefer npx expo install for native modules (react-native-reanimated, react-native-safe-area-context, react-native-svg, react-native-worklets). The CLI detects Expo and writes Expo-compatible Babel/Metro configs.

After Metro or Babel changes:

npx react-native start --reset-cache
# or: npx expo start --clear

Setup

Import ./global.css once at your app entry and wrap the root:

import './global.css';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { GhostUIProvider } from 'ghost-ui-native';

export default function App() {
  return (
    <SafeAreaProvider>
      <GhostUIProvider defaultTheme="system">
        <YourApp />
      </GhostUIProvider>
    </SafeAreaProvider>
  );
}

Required checklist (RN CLI + NativeWind)

Step	Action
1	Install NativeWind, Tailwind 3.4, and peers
2	global.css + tailwind.config.js (nativewind/preset)
3	Metro: withNativeWind(config, { input: './global.css' })
4	Babel: nativewind/babel
5	import './global.css' in the app entry
6	nativewind-env.d.ts with declare module '*.css' {} (TS 6+)
7	tsconfig paths "@/*": ["./*"] (IDE only)
8	Babel module-resolver "@": "./" (Metro needs this)
9	Restart Metro with --reset-cache

Full explanations: SETUP.md.

Ghost theme (default)

ghost-ui-native init writes a violet-forward theme into global.css — not the default shadcn zinc palette. Tokens include --primary: 262 83% 58%, tinted borders/accents, and --radius: 0.75rem. Components use rounder corners (rounded-xl / rounded-2xl), light shadows, and press feedback on primary actions.

To customize, edit CSS variables in global.css or replace the file after init. Re-run Metro with --reset-cache after token changes.

Troubleshooting

• TS: side-effect import of ./global.css — add declare module '*.css' {} in nativewind-env.d.ts (not nativewind.d.ts) and include that file in tsconfig.
• Metro: unable to resolve ./global.css — wrap Metro with withNativeWind and add the nativewind/babel preset.
• Metro: unable to resolve @/lib/utils — tsconfig paths are not enough; configure babel-plugin-module-resolver with "@": "./" and --reset-cache.

Usage

import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  Text,
  useGhostTheme,
} from 'ghost-ui-native';

function Example() {
  const { toggleTheme, resolvedTheme } = useGhostTheme();

  return (
    <Card className="m-4">
      <CardHeader>
        <CardTitle>Ghost UI</CardTitle>
      </CardHeader>
      <Text className="mb-3 text-muted-foreground">{resolvedTheme}</Text>
      <Button onPress={toggleTheme}>Toggle theme</Button>
    </Card>
  );
}

Use semantic classes: bg-background, text-foreground, bg-primary, text-primary-foreground, border-border.

Theme modes: system | light | dark.

Add components (source copy)

npx ghost-ui-native add button card dialog
npx ghost-ui-native add --all --yes

Command	Description
init	Configure the project
add	Copy components into the project
list	List components
search	Search components
view	View component metadata
diff	Diff local files vs registry
doctor	Check project setup

Flags: --yes --overwrite --dry-run --diff --all

Components

Text Button Badge Separator Card Skeleton Avatar Progress AspectRatio Input Textarea Label Checkbox Switch RadioGroup Slider Toggle Accordion Collapsible Tabs Dialog AlertDialog Select Sheet Alert Toast Empty Breadcrumb Pagination Popover Tooltip DropdownMenu Drawer InputOTP Table Carousel Spinner Bubble Marker Message MessageScroller Calendar GhostUIProvider

Links

• Documentation: https://ghost-ui.kashif-dev.site
• GitHub: https://github.com/codewithkashi/ghost-ui-native
• npm: https://www.npmjs.com/package/ghost-ui-native

License

MIT