BNA

BNA UI
26

bna-ui

PreviousNext

Use the BNA UI CLI to add components to your React Native and Expo projects.

init

Use the init command to initialize configuration and dependencies for a new React Native or Expo project.

The init command installs dependencies, adds utils, hooks, themes and sets up the component structure for your mobile project.

pnpm dlx bna-ui@latest init

Options

Usage: bna-ui init [options] [components...]
 
initialize your React Native/Expo project and install dependencies
 
Arguments:
  components         the components to add or a url to the component.
 
Options:
  -t, --template <template>      the template to use. (expo, expo-router, react-native, react-native-cli)
  -b, --base-color <base-color>  the base color to use. (neutral, gray, zinc, stone, slate)
  -y, --yes                      skip confirmation prompt. (default: true)
  -f, --force                    force overwrite of existing configuration. (default: false)
  -c, --cwd <cwd>                the working directory. defaults to the current directory.
  -s, --silent                   mute output. (default: false)
  --expo                         configure for Expo projects. (default: auto-detect)
  --rn-cli                       configure for React Native CLI projects.
  --nativewind                   use NativeWind for styling. (default: true)
  --no-nativewind                do not use NativeWind for styling.
  --typescript                   use TypeScript configuration. (default: auto-detect)
  --no-typescript                force JavaScript configuration.
  -h, --help                     display help for command

add

Use the add command to add components and dependencies to your React Native or Expo project.

pnpm dlx bna-ui@latest add [component]

Options

Usage: bna-ui add [options] [components...]
 
add a component to your React Native/Expo project
 
Arguments:
  components         the components to add or a url to the component.
 
Options:
  -y, --yes           skip confirmation prompt. (default: false)
  -o, --overwrite     overwrite existing files. (default: false)
  -c, --cwd <cwd>     the working directory. defaults to the current directory.
  -a, --all           add all available components (default: false)
  -p, --path <path>   the path to add the component to.
  -s, --silent        mute output. (default: false)
  --expo              configure for Expo projects. (default: auto-detect)
  --rn-cli            configure for React Native CLI projects.
  --nativewind        use NativeWind for styling. (default: true)
  --no-nativewind     do not use NativeWind for styling.
  --typescript        use TypeScript configuration. (default: auto-detect)
  --no-typescript     force JavaScript configuration.
  --ios               include iOS-specific implementations.
  --android           include Android-specific implementations.
  --web               include web-specific implementations for Expo.
  -h, --help          display help for command

Examples

Initialize a new Expo project

pnpm dlx bna-ui@latest init --template expo --typescript

Add a button component

pnpm dlx bna-ui@latest add button

Add multiple components

pnpm dlx bna-ui@latest add button input card

Add all components

pnpm dlx bna-ui@latest add --all

Add component with platform-specific implementations

pnpm dlx bna-ui@latest add button --ios --android

build

Use the build command to generate the registry JSON files for the mobile component registry.

pnpm dlx bna-ui@latest build

This command reads the registry.json file and generates the registry JSON files optimized for React Native and Expo projects.

Options

Usage: bna-ui build [options] [registry]
 
build components for a BNA UI registry
 
Arguments:
  registry             path to registry.json file (default: "./registry.json")
 
Options:
  -o, --output <path>  destination directory for json files (default: "./public/r")
  -c, --cwd <cwd>      the working directory. defaults to the current directory.
  --expo               build for Expo projects.
  --rn-cli             build for React Native CLI projects.
  --platforms <platforms>  specify target platforms (ios,android,web) (default: "ios,android,web")
  -h, --help           display help for command

To customize the output directory, use the --output option.

pnpm dlx bna-ui@latest build --output ./public/registry

Build for specific platforms

pnpm dlx bna-ui@latest build --platforms ios,android

update

Use the update command to update components in your project to the latest versions.

pnpm dlx bna-ui@latest update

Options

Usage: bna-ui update [options] [components...]
 
update components in your project
 
Arguments:
  components         the components to update or a url to the component.
 
Options:
  -y, --yes           skip confirmation prompt. (default: false)
  -c, --cwd <cwd>     the working directory. defaults to the current directory.
  -a, --all           update all components (default: false)
  -s, --silent        mute output. (default: false)
  --check             check for updates without installing. (default: false)
  -h, --help          display help for command

diff

Use the diff command to check for differences between your local components and the registry.

pnpm dlx bna-ui@latest diff [component]

Options

Usage: bna-ui diff [options] [component]
 
check for differences between local and registry components
 
Arguments:
  component           the component to check
 
Options:
  -c, --cwd <cwd>     the working directory. defaults to the current directory.
  -h, --help          display help for command

Configuration

The CLI automatically detects your project type (Expo or React Native CLI) and configures components accordingly. You can override this behavior using the --expo or --rn-cli flags.

Project Detection

  • Expo projects: Detected by the presence of expo in dependencies or app.json/app.config.js
  • React Native CLI projects: Detected by the presence of react-native without expo
  • TypeScript projects: Detected by the presence of tsconfig.json
AboutInstallation