# BNA UI > BNA UI is a collection of accessible, customisable components for React Native > and Expo, distributed as source code rather than as a package. It is not a web > library: components render through `react-native`, so there is no DOM, no > Tailwind and no Radix. `npx bna-ui add ` copies a component and its > dependency closure into your project, where you own and edit it. Built with > TypeScript, Expo SDK 57 and React Native 0.86, with an iOS/Android/web theme > system, 18 chart components, and Convex, Supabase and Firebase starters for > backend and auth. ## About - [About](https://ui.ahmedbna.com/docs/about): BNA UI's philosophy, origin, and the open source projects and community it's built on. - [Introduction](https://ui.ahmedbna.com/docs): BNA UI is a set of beautifully-designed, accessible React Native components. Built for Expo and React Native. Open Source. Open Code. - [CLI](https://ui.ahmedbna.com/docs/cli): Use the BNA UI CLI to add components to your React Native and Expo projects. - [Theming](https://ui.ahmedbna.com/docs/theming): BNA UI theming system for your React Native UI components using TypeScript constants and color utilities. - [AI & LLMs](https://ui.ahmedbna.com/docs/llms): Every page and every component is available as Markdown and as structured JSON, so an AI assistant can read this library without scraping it. - [MCP Server](https://ui.ahmedbna.com/docs/mcp): Let Claude Code, Cursor, VS Code and other assistants browse the registry and read component source directly, instead of guessing or scraping. - [Rules for agents](https://ui.ahmedbna.com/docs/agents): Drop-in AGENTS.md, Cursor rules and CLAUDE.md snippets that teach a coding assistant this is React Native, not the web. - [Claude Skill](https://ui.ahmedbna.com/docs/skills): A packaged skill that teaches Claude this library's components, conventions and endpoints — loaded only when a conversation is actually about React Native. - [shadcn](https://ui.ahmedbna.com/docs/shadcn): Acknowledging the amazing projects and people that made BNA UI possible. ## Installation - [Installation](https://ui.ahmedbna.com/docs/installation): Pick the stack you are building on and follow the guide for it — plain Expo, or Expo with a Convex, Supabase or Firebase backend, with or without authentication. - [Expo](https://ui.ahmedbna.com/docs/installation/expo): Scaffold a new Expo app with BNA UI — Expo Router, light and dark theming, and thirteen components already wired up. - [Expo + Convex](https://ui.ahmedbna.com/docs/installation/convex): Scaffold an Expo app with BNA UI and a Convex backend — a schema, a live query and no authentication. - [Expo + Convex + Auth](https://ui.ahmedbna.com/docs/installation/convex-auth): Scaffold an Expo app with BNA UI, a Convex backend and authentication — Google, Apple, password and email OTP sign-in, pre-wired. - [Expo + Supabase](https://ui.ahmedbna.com/docs/installation/supabase): Scaffold an Expo app with BNA UI and a Supabase backend — Postgres with row level security, realtime subscriptions, storage and an edge function, with no authentication. - [Expo + Supabase + Auth](https://ui.ahmedbna.com/docs/installation/supabase-auth): Scaffold an Expo app with BNA UI, a Supabase backend and authentication — password, magic links, email OTP, Google, Apple and GitHub, with protected routes, onboarding and user profiles pre-wired. - [Expo + Firebase](https://ui.ahmedbna.com/docs/installation/firebase): Scaffold an Expo app with BNA UI and a Firebase backend — Cloud Firestore with live listeners, Cloud Storage with upload progress, and security rules with tests that run them. No sign-in. - [Expo + Firebase + Auth](https://ui.ahmedbna.com/docs/installation/firebase-auth): Scaffold an Expo app with BNA UI, Firebase Authentication, Cloud Firestore scoped per user, Cloud Storage avatars, and security rules with tests that run them. - [Manual](https://ui.ahmedbna.com/docs/installation/manual): Add BNA UI to an Expo app you already created — the theme system, the hooks components depend on, and the import alias that makes it all resolve. ## Components - [Components](https://ui.ahmedbna.com/docs/components): Here you can find all the components available in the library. We are working on adding more components. - [Accordion](https://ui.ahmedbna.com/docs/components/accordion): A vertically stacked set of interactive headings that each reveal a section of content. - [Action Sheet](https://ui.ahmedbna.com/docs/components/action-sheet): A native-feeling action sheet component that provides a menu of options triggered from the bottom of the screen. - [Alert Dialog](https://ui.ahmedbna.com/docs/components/alert-dialog): A modal dialog that interrupts the user with important content and expects a response. - [Alert](https://ui.ahmedbna.com/docs/components/alert): Display important messages to users with both visual inline alerts and native system alerts. - [Audio Player](https://ui.ahmedbna.com/docs/components/audio-player): A feature-rich audio player component with waveform visualization, playback controls, and seeking capabilities. - [Audio Recorder](https://ui.ahmedbna.com/docs/components/audio-recorder): A comprehensive audio recording component with real-time waveform visualization, quality settings, and built-in playback. - [Audio Waveform](https://ui.ahmedbna.com/docs/components/audio-waveform): A customizable audio waveform visualization component with playback progress and interactive seeking capabilities. - [Avatar](https://ui.ahmedbna.com/docs/components/avatar): An image element with a fallback for representing the user. - [AvoidKeyboard](https://ui.ahmedbna.com/docs/components/avoid-keyboard): A component that automatically adjusts its height to avoid keyboard overlap with smooth animations and cross-platform support. - [Badge](https://ui.ahmedbna.com/docs/components/badge): A small status descriptor for UI elements. - [BottomSheet](https://ui.ahmedbna.com/docs/components/bottom-sheet): A modal sheet component that slides up from the bottom with gesture support and snap points. - [Button](https://ui.ahmedbna.com/docs/components/button): A versatile button component with multiple variants, sizes, and interactive animations. - [Camera Preview](https://ui.ahmedbna.com/docs/components/camera-preview): A comprehensive camera component with capture, preview, and media management capabilities. - [Camera](https://ui.ahmedbna.com/docs/components/camera): A powerful camera component with advanced features like zoom, timer, torch, and video recording. - [Card](https://ui.ahmedbna.com/docs/components/card): Displays a card with header, content, and footer. - [Carousel](https://ui.ahmedbna.com/docs/components/carousel): A flexible carousel component with support for auto-play, indicators, arrows, and custom layouts. - [Checkbox](https://ui.ahmedbna.com/docs/components/checkbox): A control that allows the user to toggle between checked and not checked states. - [Collapsible](https://ui.ahmedbna.com/docs/components/collapsible): An interactive component which can be expanded/collapsed to show and hide content. - [Color Picker](https://ui.ahmedbna.com/docs/components/color-picker): A color picker component with HSV color space selection and swatch display. - [Combobox](https://ui.ahmedbna.com/docs/components/combobox): A searchable dropdown component that combines an input with a list of options. - [Date Picker](https://ui.ahmedbna.com/docs/components/date-picker): A customizable date and time picker component with bottom sheet UI. - [File Picker](https://ui.ahmedbna.com/docs/components/file-picker): A customizable file picker component with validation, preview, and multiple file support. - [Gallery](https://ui.ahmedbna.com/docs/components/gallery): A responsive image gallery component with fullscreen viewing, zoom, and gesture support. - [Hello Wave](https://ui.ahmedbna.com/docs/components/hello-wave): An animated waving hand emoji component with smooth rotation animation and customizable sizes. - [Icon](https://ui.ahmedbna.com/docs/components/icon): A themed icon component with support for Lucide React Native icons. - [Image](https://ui.ahmedbna.com/docs/components/image): A responsive image component with loading states, error handling, and flexible styling options. - [Input OTP](https://ui.ahmedbna.com/docs/components/input-otp): A secure input component for one-time passwords and verification codes. - [Input](https://ui.ahmedbna.com/docs/components/input): A styled text input component with label, validation, icons, and grouped layouts. - [Link](https://ui.ahmedbna.com/docs/components/link): A navigation component that handles both internal and external links with customizable browser behavior. - [MediaPicker](https://ui.ahmedbna.com/docs/components/media-picker): A versatile component for selecting images and videos from device gallery or camera with preview capabilities. - [Mode Toggle](https://ui.ahmedbna.com/docs/components/mode-toggle): An animated button component for switching between light and dark themes. - [Onboarding](https://ui.ahmedbna.com/docs/components/onboarding): A customizable multi-step onboarding flow with smooth animations and gesture support. - [ParallaxScrollView](https://ui.ahmedbna.com/docs/components/parallax-scrollview): A scroll view with parallax header effect that transforms as the user scrolls. - [Picker](https://ui.ahmedbna.com/docs/components/picker): A customizable dropdown picker component with search, sections, and multiple selection support. - [Popover](https://ui.ahmedbna.com/docs/components/popover): A contextual overlay that displays rich content triggered by user interaction. - [Progress](https://ui.ahmedbna.com/docs/components/progress): A progress bar component to show completion status with optional interactivity. - [Radio](https://ui.ahmedbna.com/docs/components/radio): A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. - [ScrollView](https://ui.ahmedbna.com/docs/components/scroll-view): A scrollable view component that allows content to be scrolled when it exceeds the container size. - [SearchBar](https://ui.ahmedbna.com/docs/components/searchbar): A customizable search input with debouncing, loading states, and suggestions. - [Separator](https://ui.ahmedbna.com/docs/components/separator): Visually or semantically separates content. - [Share](https://ui.ahmedbna.com/docs/components/share): A button component for sharing content across platforms with native share functionality. - [Sheet](https://ui.ahmedbna.com/docs/components/sheet): A modal component that slides in from the side of the screen, commonly used for navigation menus, filters, and detail views. - [Skeleton](https://ui.ahmedbna.com/docs/components/skeleton): A placeholder component to show a loading state while content is being fetched. - [Spinner](https://ui.ahmedbna.com/docs/components/spinner): A loading indicator component with multiple variants and customization options. - [Switch](https://ui.ahmedbna.com/docs/components/switch): A control that allows the user to toggle between checked and not checked states. - [Table](https://ui.ahmedbna.com/docs/components/table): A flexible data table component with sorting, filtering, pagination, and search functionality. - [Tabs](https://ui.ahmedbna.com/docs/components/tabs): A set of layered sections of content—known as tab panels—that are displayed one at a time. - [Text](https://ui.ahmedbna.com/docs/components/text): A themed text component with multiple variants for consistent typography across your app. - [Toast](https://ui.ahmedbna.com/docs/components/toast): A succinct message that is displayed temporarily with Dynamic Island animation inspired by iOS. - [Toggle](https://ui.ahmedbna.com/docs/components/toggle): A two-state button that can be either on or off. - [Video](https://ui.ahmedbna.com/docs/components/video): A video player component with custom controls, gestures, and subtitle support. - [View](https://ui.ahmedbna.com/docs/components/view): A foundational View component with transparent background and ref forwarding support. ## Charts - [Charts](https://ui.ahmedbna.com/docs/charts): Here you can find all the charts available in the library. We are working on adding more charts. - [Area Chart](https://ui.ahmedbna.com/docs/charts/area-chart): A customizable area chart component with gradient fills and smooth animations. - [Bar Chart](https://ui.ahmedbna.com/docs/charts/bar-chart): A customizable bar chart component with smooth animations and interactive features. - [Bubble Chart](https://ui.ahmedbna.com/docs/charts/bubble-chart): A customizable bubble chart component with animations and size mapping. - [Candlestick Chart](https://ui.ahmedbna.com/docs/charts/candlestick-chart): A customizable candlestick chart component with animations for financial data visualization. - [Chart Container](https://ui.ahmedbna.com/docs/charts/chart-container): A container component for wrapping charts with title, description, and consistent styling. - [Column Chart](https://ui.ahmedbna.com/docs/charts/column-chart): A customizable horizontal bar chart component with smooth animations and flexible styling. - [Doughnut Chart](https://ui.ahmedbna.com/docs/charts/doughnut-chart): A customizable doughnut chart component with smooth animations, interactive legends, and flexible styling. - [Heatmap Chart](https://ui.ahmedbna.com/docs/charts/heatmap-chart): A customizable heatmap chart component with smooth animations and flexible color scaling for visualizing matrix data. - [Line Chart](https://ui.ahmedbna.com/docs/charts/line-chart): A customizable line chart component with animations, interactions, and gradient fills. - [Pie Chart](https://ui.ahmedbna.com/docs/charts/pie-chart): A customizable pie chart component with smooth animations and flexible styling. - [Polar Area Chart](https://ui.ahmedbna.com/docs/charts/polar-area-chart): A customizable polar area chart component with smooth animations and flexible styling for displaying radial data. - [Progress Ring Chart](https://ui.ahmedbna.com/docs/charts/progress-ring-chart): A customizable circular progress ring component with smooth animations and flexible styling. - [Radar Chart](https://ui.ahmedbna.com/docs/charts/radar-chart): A customizable radar chart component with smooth animations and flexible styling for displaying multi-dimensional data. - [Radial Bar Chart](https://ui.ahmedbna.com/docs/charts/radial-bar-chart): A customizable radial bar chart component with smooth animations, gradient support, and center value display. - [Scatter Chart](https://ui.ahmedbna.com/docs/charts/scatter-chart): A customizable scatter plot component with smooth animations and flexible styling for visualizing data relationships. - [Stacked Area Chart](https://ui.ahmedbna.com/docs/charts/stacked-area-chart): A customizable stacked area chart component with smooth animations and gradient fills for visualizing multiple data series over time. - [Stacked Bar Chart](https://ui.ahmedbna.com/docs/charts/stacked-bar-chart): A customizable stacked bar chart component with smooth animations, support for both horizontal and vertical layouts, and flexible styling. - [TreeMap Chart](https://ui.ahmedbna.com/docs/charts/treemap-chart): A customizable treemap chart component with hierarchical data visualization, smooth animations, and flexible styling. ## Convex - [Convex](https://ui.ahmedbna.com/docs/convex): A React Native starter with BNA UI components and a Convex backend — real-time data, with or without Google, Apple, password and email OTP authentication. - [Authentication](https://ui.ahmedbna.com/docs/convex/auth): How the Convex Auth starter persists a session, guards screens, handles OAuth and email OTP — and why authorization lives in the function, not a policy. - [Database and schema](https://ui.ahmedbna.com/docs/convex/database): The schema both Convex starters ship, defineSchema and defineTable, indexes, validators, and how authorization replaces row level security. - [Realtime](https://ui.ahmedbna.com/docs/convex/realtime): Why useQuery needs no subscription setup, adding optimistic updates yourself, reconnect behaviour, offline, and debugging a query that never resolves. - [File Storage](https://ui.ahmedbna.com/docs/convex/storage): Upload files from Expo to Convex's built-in file storage — generating an upload URL, reading files back, authorization, and deletion. - [Actions](https://ui.ahmedbna.com/docs/convex/actions): When to reach for a Convex action instead of a query or mutation, the Node runtime, calling third-party APIs, and scheduling. - [Google Sign-In](https://ui.ahmedbna.com/docs/convex/google): Step-by-step guide to configuring Google as an OAuth provider for the Convex Auth starter — the Cloud project, the consent screen, the OAuth client, the .site callback URL, and what to do when the browser comes back to nothing. - [Apple Sign-In](https://ui.ahmedbna.com/docs/convex/apple): Step-by-step guide to configuring Apple as an OAuth provider for the Convex Auth starter — the App ID, the Services ID, the signing key, and the JWT client secret you have to generate and rotate. - [Resend OTP](https://ui.ahmedbna.com/docs/convex/resend): Step-by-step guide to configuring Resend for email OTP and password reset in the Convex Auth starter — the account, domain verification, the API key, and the from address you have to change. - [Deployment](https://ui.ahmedbna.com/docs/convex/deployment): Ship a Convex-backed Expo app — dev versus prod deployments, EAS build profiles, the two-job CI workflow both starters include, migration safety, and the production checklist. - [Troubleshooting](https://ui.ahmedbna.com/docs/convex/troubleshooting): Common failures across auth, the database, realtime and deployment, a FAQ, and a Supabase to Convex migration guide. ## Supabase - [Supabase](https://ui.ahmedbna.com/docs/supabase): A React Native starter with BNA UI components and a Supabase backend — Postgres, row level security, realtime, storage and edge functions, with or without authentication. - [Authentication](https://ui.ahmedbna.com/docs/supabase/auth): How the Supabase Auth starter persists a session, guards routes, handles deep links and runs OAuth — and how to swap the browser flow for native sign-in sheets. - [Database and RLS](https://ui.ahmedbna.com/docs/supabase/database): The schema both Supabase starters ship, every row level security policy explained, and the migration and type-generation workflow that keeps your code and your database in step. - [Realtime](https://ui.ahmedbna.com/docs/supabase/realtime): Live Postgres subscriptions in Expo — the two SQL lines that make changes broadcast at all, reconciling events with optimistic updates, reconnect behaviour, and presence and broadcast channels. - [Storage](https://ui.ahmedbna.com/docs/supabase/storage): Upload files from Expo to Supabase Storage — buckets, owner-scoped policies, reading a file URI without base64, public versus signed URLs, and the cache-busting problem avatars run into. - [Edge Functions](https://ui.ahmedbna.com/docs/supabase/edge-functions): Write, serve, deploy and invoke Deno edge functions from Expo — running as the caller versus as an admin, JWT verification, CORS, secrets, and why deleting a user has to happen server-side. - [Google Sign-In](https://ui.ahmedbna.com/docs/supabase/google): Configure Google as an OAuth provider for the Supabase Auth starter — creating the OAuth client, the two redirect URLs that matter, and what to do when the browser comes back to nothing. - [Apple Sign-In](https://ui.ahmedbna.com/docs/supabase/apple): Configure Apple as an OAuth provider for the Supabase Auth starter — the Services ID, the client secret you have to generate and rotate, and App Store review requirements. - [Email and SMTP](https://ui.ahmedbna.com/docs/supabase/email): Configure email delivery for the Supabase Auth starter — custom SMTP, the templates magic links and OTP codes need, deep-link configuration, and testing the whole flow locally. - [Deployment](https://ui.ahmedbna.com/docs/supabase/deployment): Ship a Supabase-backed Expo app — EAS build profiles and environment variables, the GitHub Actions workflow both starters include, migration safety, and the production checklist. - [Troubleshooting and FAQ](https://ui.ahmedbna.com/docs/supabase/troubleshooting): The failures the Supabase starters actually produce — silent realtime, rejected redirects, empty queries, sessions that do not survive a relaunch — plus common questions and a Convex to Supabase migration guide. ## Firebase - [Firebase](https://ui.ahmedbna.com/docs/firebase): A React Native starter with BNA UI components and a Firebase backend — Cloud Firestore, Cloud Storage, Authentication and security rules with tests, with or without sign-in. - [Authentication](https://ui.ahmedbna.com/docs/firebase/auth): How the Firebase auth starter persists a session, guards routes, handles deep links, creates profiles and deletes accounts. - [Firestore](https://ui.ahmedbna.com/docs/firebase/firestore): The data model both starters use, how queries and composite indexes work, and the serverTimestamp behaviour that crashes naive mappers. - [Realtime](https://ui.ahmedbna.com/docs/firebase/realtime): How onSnapshot works, why there is no applyChange reducer, and the three habits to unlearn when arriving from a REST or Supabase codebase. - [Storage](https://ui.ahmedbna.com/docs/firebase/storage): Uploading to Cloud Storage from React Native — resumable uploads with progress, the uid path convention, and why download URLs are capabilities. - [Security rules](https://ui.ahmedbna.com/docs/firebase/rules): How Firestore and Storage rules actually work — why a query is checked instead of its results, the delete trap in Storage, and how to test both against the emulator. - [Google sign-in](https://ui.ahmedbna.com/docs/firebase/google): Wiring Google sign-in with expo-auth-session and signInWithCredential — the three client IDs, why a development build is required, and what fails when one is missing. - [Apple sign-in](https://ui.ahmedbna.com/docs/firebase/apple): Sign in with Apple through expo-apple-authentication and signInWithCredential — the nonce dance, the one-shot name, and what App Store review requires. - [Email and links](https://ui.ahmedbna.com/docs/firebase/email): Password reset, address verification and email-link sign-in — what works out of the box, and what the Dynamic Links shutdown changed. - [Deployment](https://ui.ahmedbna.com/docs/firebase/deployment): Shipping a Firebase app — deploying rules and indexes from CI with a service account, EAS builds, and the production checklist. - [Troubleshooting](https://ui.ahmedbna.com/docs/firebase/troubleshooting): The failures this stack actually produces — permission-denied on a valid query, sessions that expire on relaunch, Metro resolution errors — and a Supabase to Firebase migration guide. ## Hooks - [Hooks](https://ui.ahmedbna.com/docs/hooks): Here you can find all the hooks available in the library. - [useBottomTabOverflow](https://ui.ahmedbna.com/docs/hooks/useBottomTabOverflow): A hook that returns the appropriate bottom tab bar height for iOS devices to handle safe area insets and overflow scenarios. - [useColor](https://ui.ahmedbna.com/docs/hooks/useColor): A hook that returns the appropriate color based on the current theme, with support for prop overrides and fallback to predefined color palettes. - [useColorScheme](https://ui.ahmedbna.com/docs/hooks/useColorScheme): A cross-platform hook that provides access to the user's preferred color scheme with hydration-safe web support. - [useHaptics](https://ui.ahmedbna.com/docs/hooks/useHaptics): Semantic haptic feedback that routes each intent to the right native API per platform, using performAndroidHapticsAsync on Android instead of the Vibrator-simulated impact APIs. - [useKeyboardHeight](https://ui.ahmedbna.com/docs/hooks/useKeyboardHeight): A React Native hook that tracks keyboard visibility, height, and animation duration with cross-platform support and screen rotation handling. - [useModeToggle](https://ui.ahmedbna.com/docs/hooks/useModeToggle): A hook that provides complete control over theme mode switching with support for light, dark, and system modes. ## Providers - [Providers](https://ui.ahmedbna.com/docs/providers): The React context providers you mount at the root of your app. - [ModeProvider](https://ui.ahmedbna.com/docs/providers/mode-provider): Holds the app-wide light, dark or system theme mode, resolves it to a concrete color scheme, and optionally persists it. - [ThemeProvider](https://ui.ahmedbna.com/docs/providers/theme-provider): A context provider that manages theme state and provides consistent theming across your React Native app with React Navigation integration. ## Theme - [Theme](https://ui.ahmedbna.com/docs/theme): Here you can find all the theme files available in the library. - [Colors](https://ui.ahmedbna.com/docs/theme/colors): A comprehensive color system with light and dark mode support, semantic colors, and utility functions for consistent theming across your React Native app. - [Globals](https://ui.ahmedbna.com/docs/theme/globals): Global design constants for consistent spacing, sizing, and styling across your React Native app components. ## Conventions - Components are copied into your project and imported through `@/components/ui/*`, `@/components/charts/*`, `@/hooks/*` and `@/theme/*`. These specifiers are part of the contract — component source imports its dependencies by those exact paths. - Colours come from the `useColor` hook, which reads the active theme. Do not hardcode hex values. - Sizing tokens (`HEIGHT`, `FONT_SIZE`, `BORDER_RADIUS`, `CORNERS`) come from `@/theme/globals`. - Every component is a plain React Native component: style with `StyleSheet` objects and the `style` prop, never `className`. ## Machine-readable endpoints - [llms.txt](https://ui.ahmedbna.com/llms.txt): This file — the index. - [llms-full.txt](https://ui.ahmedbna.com/llms-full.txt): Every documentation page inlined as Markdown. - Any documentation page as Markdown: append `.md` to its URL, e.g. [https://ui.ahmedbna.com/docs/components/button.md](https://ui.ahmedbna.com/docs/components/button.md). - [Component index](https://ui.ahmedbna.com/r/ai/index.json): Every installable component, with its description and the URL of its bundle. - Component bundle: `https://ui.ahmedbna.com/r/ai/.json` — description, props, variants, usage snippet, accessibility notes, dependencies, source and every example, in one request. Start here. e.g. [https://ui.ahmedbna.com/r/ai/button.json](https://ui.ahmedbna.com/r/ai/button.json). - [Registry index](https://ui.ahmedbna.com/r/index.json): Every entry, including the examples, with its type, dependencies and file targets. - Install payload: `https://ui.ahmedbna.com/r/.json` — the component's source plus the full transitive closure of everything it imports, in dependency order and ready to write to disk. This is what the CLI fetches. e.g. [https://ui.ahmedbna.com/r/button.json](https://ui.ahmedbna.com/r/button.json). All of these send `Access-Control-Allow-Origin: *`.