# Table of Contents

- [Introduction - nativecn-ui](#introduction-nativecn-ui)
- [Avatar - nativecn-ui](#avatar-nativecn-ui)
- [Dark mode - nativecn-ui](#dark-mode-nativecn-ui)
- [Badge - nativecn-ui](#badge-nativecn-ui)
- [Button - nativecn-ui](#button-nativecn-ui)
- [Dialog - nativecn-ui](#dialog-nativecn-ui)
- [Checkbox - nativecn-ui](#checkbox-nativecn-ui)
- [Drop down - nativecn-ui](#drop-down-nativecn-ui)
- [Input - nativecn-ui](#input-nativecn-ui)
- [Progress - nativecn-ui](#progress-nativecn-ui)
- [Card - nativecn-ui](#card-nativecn-ui)
- [Skeleton - nativecn-ui](#skeleton-nativecn-ui)
- [Switch - nativecn-ui](#switch-nativecn-ui)
- [Select - nativecn-ui](#select-nativecn-ui)
- [Radio group - nativecn-ui](#radio-group-nativecn-ui)
- [Tabs - nativecn-ui](#tabs-nativecn-ui)
- [Toast - nativecn-ui](#toast-nativecn-ui)

---

# Introduction - nativecn-ui

[nativecn-ui home page![light logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-light.png)![dark logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-dark.png)](/)

Search...

Search...

Navigation

Getting Started

Introduction

A project inspired by [shadcn/ui](https://ui.shadcn.com/)
.

[​](#why-nativecn-ui)

Why Nativecn UI?
-----------------------------------------

*   **Beautifully Designed**: Components are designed with a focus on aesthetics, delivering a great UI/UX.
*   **Customizable**: Modify components easily using Tailwind CSS classes —no `style` needed.
*   **Easy Integration**: Import components into your project as needed. No package installs.
*   **TypeScript-first**: Static typing for all components.

[​](#installation)

Installation
----------------------------------

1

Create a new Expo project

    npx create-expo-app -t expo-template-blank-typescript
    

2

Set up \[NativeWind\](https://www.nativewind.dev/quick-starts/expo)

NativeWind allows you to style components using Tailwind CSS classes.

    # Install dependencies
    yarn add nativewind@^4.0.1 react-native-reanimated
    yarn add --dev tailwindcss
    
    # Create a tailwind.config.js file
    npx tailwindcss init
    

Finally, add `"nativewind/babel"` to your `babel.config.js` file.

3

3\. Add nativecn-ui components

Run the CLI to initialize your project and add components easily:

    npx nativecn-ui init
    npx nativecn-ui add Button
    

Or simply copy-paste from the [components directory](https://github.com/Mobilecn-UI/nativecn-ui/tree/main/components)
.

[​](#examples)

Examples
--------------------------

| Light mode | Dark mode |
| --- | --- |
|     |     |

[​](#community-and-contributions)

Community and Contributions
----------------------------------------------------------------

Feel free to open PRs or report issues on our [GitHub repository](https://github.com/Mobilecn-UI/nativecn-ui)
.

[Dark mode](/dark-mode)

On this page

*   [Why Nativecn UI?](#why-nativecn-ui)
    
*   [Installation](#installation)
    
*   [Examples](#examples)
    
*   [Community and Contributions](#community-and-contributions)

---

# Avatar - nativecn-ui

[nativecn-ui home page![light logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-light.png)![dark logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-dark.png)](/)

Search...

Search...

Navigation

[​](#overview)

Overview
--------------------------

`Avatar` is a React Native component designed for displaying user avatars. It can show an image avatar from a given source. If the image fails to load, a fallback text can be displayed.

[​](#preview)

Preview
------------------------

*   Preview
*   Code

Light Mode

Dark Mode

[​](#installation)

Installation
----------------------------------

*   CLI
*   Manual

    npx nativecn-ui add Avatar 
    

[​](#usage)

Usage
--------------------

### 

[​](#basic-usage)

Basic usage

    <Avatar>
      <AvatarImage
        source={{
          uri: 'https://pbs.twimg.com/profile_images/1745949238519803904/ZHwM5B07_400x400.jpg',
        }}
      />
      <AvatarFallback>CG</AvatarFallback>
    </Avatar>
    

### 

[​](#custom-fallback-style)

Custom fallback style

    <Avatar>
      <AvatarImage
        source={{
          uri: 'https://pbs.twimg.com/profile_images/1603610343905058816/PsPEWMOJ_400x400.jpgx',
        }}
      />
      <AvatarFallback textClassname="text-amber-400">SS</AvatarFallback>
    </Avatar>
    

[Dark mode](/dark-mode)
[Button](/button)

On this page

*   [Overview](#overview)
    
*   [Preview](#preview)
    
*   [Installation](#installation)
    
*   [Usage](#usage)
    
*   [Basic usage](#basic-usage)
    
*   [Custom fallback style](#custom-fallback-style)

---

# Dark mode - nativecn-ui

[nativecn-ui home page![light logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-light.png)![dark logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-dark.png)](/)

Search...

Search...

Navigation

Getting Started

Dark mode

1

Set up dark mode

    module.exports = {
      darkMode: "class",
      // ...
    };
    

2

Add a mode toggle

Place a mode toggle on your app to toggle between light and dark mode.

    import { colorScheme, useColorScheme } from "nativewind";
    
    export function ModeToggle() {
      const { colorScheme, setColorScheme } = useColorScheme();
    
      return (
        <Button
          variant="outline"
          onClick={() => setColorScheme(colorScheme === "dark" ? "light" : "dark")}
        >
          Toggle mode
        </Button>
      )
    }
    

Reference: [NativeWind docs](https://www.nativewind.dev/v4/core-concepts/dark-mode#manual-color-scheme-control)

[Introduction](/introduction)
[Avatar](/avatar)

---

# Badge - nativecn-ui

[nativecn-ui home page![light logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-light.png)![dark logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-dark.png)](/)

Search...

Search...

Navigation

[​](#overview)

Overview
--------------------------

`Badge` is a React Native component for displaying brief labels or tags with optional variants. If you want to control style using Tailwind CSS classes, use the `className` and `labelClasses` props.

*   Preview
*   Code

Light mode

Dark mode

[​](#installation)

Installation
----------------------------------

*   CLI
*   Manual

    npx nativecn-ui add Badge 
    

[​](#properties)

Properties
------------------------------

*   `label: string` (required) - The text displayed inside the badge.
*   `labelClasses?: string (optional)` - The classes for the label’s text.
*   `className?: string (optional)` - The classes for the parent container.
*   `variant?: Variant` (optional) - The variant of the badge. Can be one of ‘default’, ‘secondary’, ‘destructive’, or ‘success’.

[​](#usage)

Usage
--------------------

### 

[​](#basic-usage-with-variant)

Basic usage with `variant`

    <Badge label="New" />
    <Badge label="Archived" variant="secondary" />
    <Badge label="Error" variant="destructive" />
    <Badge label="Accepted" variant="success" />
    

### 

[​](#basic-usage-with-custom-classes)

Basic usage with custom classes

    <Badge label="New" className="bg-amber-400" />
    <Badge label="Accepted" labelClasses="font-semibold text-lg" />
    

[Button](/button)
[Card](/card)

On this page

*   [Overview](#overview)
    
*   [Installation](#installation)
    
*   [Properties](#properties)
    
*   [Usage](#usage)
    
*   [Basic usage with variant](#basic-usage-with-variant)
    
*   [Basic usage with custom classes](#basic-usage-with-custom-classes)

---

# Button - nativecn-ui

[nativecn-ui home page![light logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-light.png)![dark logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-dark.png)](/)

Search...

Search...

Navigation

[​](#overview)

Overview
--------------------------

`Button` is a React Native component designed for creating styled buttons. It provides quick style customization through the `variant` and `size` props, automatically adapting to the device’s current color scheme. Control style using Tailwind CSS classes through the `className` and `labelClasses` props.

[​](#preview)

Preview
------------------------

*   Preview
*   Code

Light mode

Dark mode

[​](#installation)

Installation
----------------------------------

*   CLI
*   Manual

    npx nativecn-ui add Button 
    

[​](#properties)

Properties
------------------------------

*   `label: string` (required) - The label displayed on the button.
*   `labelClasses?: string (optional)` - The classes for the button’s text.
*   `className?: string (optional)` - The classes for the parent container.
*   `variant?: Variant` (optional) - The variant of the button. Can be one of ‘default’, ‘secondary’, ‘ghost’, ‘destructive’, or ‘link’.
*   `size?: Variant` (optional) - The size of the button. Can be one of ‘default’, ‘sm’, or ‘lg’.

> **Note**: The `variant` property determines the background color of the button. The color scheme (light/dark mode) is automatically detected.

[​](#usage)

Usage
--------------------

### 

[​](#basic-usage-with-variant)

Basic usage with `variant`

    <Button label="Button" />
    <Button label="Button" variant="secondary" />
    <Button label="Button" variant="destructive" />
    

### 

[​](#basic-usage-with-size)

Basic usage with `size`

    <Button label="Button" size="sm" />
    <Button label="Button" size="lg" />
    

### 

[​](#basic-usage-with-custom-classes)

Basic usage with custom classes

    <Button label="Button" className="px-6 py-3 rounded-lg" />
    <Button label="Button" labelClasses="font-semibold text-lg" />
    

[Avatar](/avatar)
[Badge](/badge)

On this page

*   [Overview](#overview)
    
*   [Preview](#preview)
    
*   [Installation](#installation)
    
*   [Properties](#properties)
    
*   [Usage](#usage)
    
*   [Basic usage with variant](#basic-usage-with-variant)
    
*   [Basic usage with size](#basic-usage-with-size)
    
*   [Basic usage with custom classes](#basic-usage-with-custom-classes)

---

# Dialog - nativecn-ui

[nativecn-ui home page![light logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-light.png)![dark logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-dark.png)](/)

Search...

Search...

Navigation

[​](#overview)

Overview
--------------------------

`Dialog` component in React Native is designed to manage modal dialogs within your application. The component is split into three key parts: `Dialog`, which acts as the context provider; `DialogTrigger`, which handles the action to open the dialog; and `DialogContent`, which contains the actual content to be displayed in the dialog.

[​](#preview)

Preview
------------------------

*   Preview
*   Code

Light mode

Dark mode

[​](#installation)

Installation
----------------------------------

*   CLI
*   Manual

    npx nativecn-ui add Dialog 
    

[​](#properties)

Properties
------------------------------

### 

[​](#dialog)

`Dialog`

This component doesn’t accept any props directly but acts as a context provider for dialog visibility.

### 

[​](#dialogtrigger)

`DialogTrigger`

*   `children`: The React element that will trigger the dialog to open. It should be a component that accepts an `onPress` prop, like a button.

### 

[​](#dialogcontent)

`DialogContent`

*   `children`: The content that will be displayed inside the dialog. This can be any React Node.

[​](#usage)

Usage
--------------------

To use the Dialog component, wrap your entire dialog structure with `Dialog`. Then, use `DialogTrigger` to specify the element that will open the dialog, and `DialogContent` to define the content of the dialog.

    <Dialog>
      <DialogTrigger>
        <Button label="Open Dialog" />
      </DialogTrigger>
      <DialogContent>
        <View className="flex gap-4">
          <Text className="font-semibold text-xl text-primary">Dialog Content</Text>
          <Text className="text-primary">
            Tap outside the dialog to close it.
          </Text>
        </View>
      </DialogContent>
    </Dialog>
    

[Checkbox](/checkbox)
[Drop down](/drop-down)

On this page

*   [Overview](#overview)
    
*   [Preview](#preview)
    
*   [Installation](#installation)
    
*   [Properties](#properties)
    
*   [Dialog](#dialog)
    
*   [DialogTrigger](#dialogtrigger)
    
*   [DialogContent](#dialogcontent)
    
*   [Usage](#usage)

---

# Checkbox - nativecn-ui

[nativecn-ui home page![light logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-light.png)![dark logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-dark.png)](/)

Search...

Search...

Navigation

[​](#overview)

Overview
--------------------------

`Checkbox` is a React Native component designed for creating interactive checkboxes with customizable styles. This component allows for easy integration into forms and user interfaces, offering properties for label display and style customization. It leverages Tailwind CSS classes to provide a flexible styling approach suitable for both light and dark themes.

[​](#preview)

Preview
------------------------

*   Preview
*   Code

Light mode (Enabled)

Dark mode (Enabled)

Light mode (Disabled)

Dark mode (Disabled)

[​](#installation)

Installation
----------------------------------

*   CLI
*   Manual

    npx nativecn-ui add Checkbox 
    

[​](#properties)

Properties
------------------------------

*   `label?: string` (optional) - The label text displayed next to the checkbox.
*   `labelClasses?: string` (optional) - Custom classes for styling the label.
*   `checkboxClasses?: string` (optional) - Custom classes for styling the checkbox.
*   `className?: string` (optional) - Custom classes for the container wrapping the checkbox and its label.

[​](#usage)

Usage
--------------------

    <Checkbox label="Accept Terms" />
    

[Card](/card)
[Dialog](/dialog)

On this page

*   [Overview](#overview)
    
*   [Preview](#preview)
    
*   [Installation](#installation)
    
*   [Properties](#properties)
    
*   [Usage](#usage)

---

# Drop down - nativecn-ui

[nativecn-ui home page![light logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-light.png)![dark logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-dark.png)](/)

Search...

Search...

Navigation

[​](#overview)

Overview
--------------------------

`DropDown` component in React Native is designed to manage drop-downs within your application. The component is split into 6 key parts: `DropDown`, which acts as the context provider containing the other 5 parts; `DropDownTrigger`, handles the action to open and close the dropdown; `DropDownLabel`, this is used to label a section in the dropdown menu; `DropDownContent`, this contains the actual content to be displayed in the dropdown menu; `DropDownItemSeparator` the separator is used to visually separate items in the dropdown menu; `DropDownItem` this component contains the dropdown item to be displayed in the dropdown menu.

[​](#preview)

Preview
------------------------

*   Preview
*   Code

Light mode

Dark mode

[​](#installation)

Installation
----------------------------------

*   CLI
*   Manual

    npx nativecn-ui add DropDown
    

[​](#components)

Components
------------------------------

### 

[​](#dropdown)

DropDown

This component is the parent container for the dropdown system.

*   `children` - These are the components to be rendered inside the DropDown view. Mainly `DropDownTrigger`, `DropDownLabel`, `DropDownContent`, `DropDownItemSeparator` and `DropDownItem`.

### 

[​](#dropdowntrigger)

DropDownTrigger

This component handles the action to open and close the dropdown.

*   `children`: The react element that will trigger the dialog to open. It should be a component that accepts an `onPress` prop like a button.

### 

[​](#dropdowncontent)

DropDownContent

This is the body of the DropDown Menu.

*   `children` - Components to be rendered inside the `View` element.
*   `className?: string` - Tailwind CSS classes to be applied to the `View`

### 

[​](#dropdownlabel)

DropDownLabel

This component accepts the `labelTitle` prop that contains the name/title as the main text shown in the header.

*   `labelTitle` - Text to be rendered inside the `DropDownLabel`.

### 

[​](#dropdownitemseparator)

DropDownItemSeparator

This is a line approximately to the hairLineWidth that will be used to separate different sections in the dropdown menu

### 

[​](#dropdownitem)

DropDownItem

This component contains the item content that will be added to the dropdown menu.

*   `children` - Components to be rendered inside the `View` element.
*   `className?: string` - Tailwind CSS classes to be applied to the `View`

[​](#usage)

Usage
--------------------

### 

[​](#basic-usage)

Basic Usage

To use the DropDown component, wrap your entire dropdown structure with `DropDown`. Then, use `DropDownTrigger` to specify the element that will open the dropdown, and the `DropDownContent` will now appear when you press on the `DropDownTrigger`. The `DropDownContent` will contain the content of the dropdown ie. `DropDownLabel`, `DropDownItem` and `DropDownItemSeparator`.

    import {
      DropDown,
      DropDownContent,
      DropDownItem,
      DropDownItemSeparator,
      DropDownLabel,
      DropDownTrigger,
    } from './components/DropDown';
    

    <DropDown>
        <DropDownTrigger>
            <Button label="Open Dropdown" />
        </DropDownTrigger>
        <DropDownContent>
        <DropDownLabel labelTitle="My Account" />
        <DropDownItemSeparator />
        <DropDownItem>
        <TouchableOpacity className="flex flex-row gap-2 items-center">
            <CircleUser size={18} color='#fff'/>
            <Text className="text-primary text-xl">Profile</Text>
        </TouchableOpacity>
        </DropDownItem>
        <DropDownItem>
        <TouchableOpacity className="flex flex-row gap-2 items-center">
            <Settings size={18} color="#fff" />
            <Text className="text-primary text-xl">Settings</Text>
        </TouchableOpacity>
        </DropDownItem>
        <DropDownItem>
        <TouchableOpacity className="flex flex-row gap-2 items-center">
            <CreditCard size={18} color='#fff' />
            <Text className="text-primary text-xl">Billing</Text>
        </TouchableOpacity>
        </DropDownItem>
        <DropDownLabel labelTitle="Team" />
        <DropDownItemSeparator />
        <DropDownItem>
        <TouchableOpacity className="flex flex-row gap-2 items-center">
            <CreditCard size={18} color="#fff" />
            <Text className="text-primary text-xl">Billing</Text>
        </TouchableOpacity>
        </DropDownItem>
        </DropDownContent>
    </DropDown>
    

[Dialog](/dialog)
[Input](/input)

On this page

*   [Overview](#overview)
    
*   [Preview](#preview)
    
*   [Installation](#installation)
    
*   [Components](#components)
    
*   [DropDown](#dropdown)
    
*   [DropDownTrigger](#dropdowntrigger)
    
*   [DropDownContent](#dropdowncontent)
    
*   [DropDownLabel](#dropdownlabel)
    
*   [DropDownItemSeparator](#dropdownitemseparator)
    
*   [DropDownItem](#dropdownitem)
    
*   [Usage](#usage)
    
*   [Basic Usage](#basic-usage)

---

# Input - nativecn-ui

[nativecn-ui home page![light logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-light.png)![dark logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-dark.png)](/)

Search...

Search...

Navigation

[​](#overview)

Overview
--------------------------

`Input` is a React Native component for creating text input fields with customizable styles and behaviors. It’s built on top of React Native’s [TextInput](https://reactnative.dev/docs/textinput)
. This component provides properties for label display and customization.

[​](#preview)

Preview
------------------------

*   Preview
*   Code

Light mode

Dark mode

[​](#installation)

Installation
----------------------------------

*   CLI
*   Manual

    npx nativecn-ui add Input 
    

[​](#properties)

Properties
------------------------------

*   `className?: string (optional)` - The classes for the `View` container wrapping the input field and the label.
*   `label?: string` (optional) - The label text for the input field.
*   `inputClasses?: string` (optional) - Custom classes for styling the input field.
*   `labelClasses?: string` (optional) - Custom classes for styling the label.
*   See React Native’s [TextInput props](https://reactnative.dev/docs/textinput#props)
    

[​](#usage)

Usage
--------------------

### 

[​](#basic-usage-with-label)

Basic usage with `label`

    <Input label="Email" placeholder="Enter your email" />
    

### 

[​](#usage-with-keyboard-type-and-custom-styles)

Usage with keyboard type and custom styles

    <Input
      label="Phone Number"
      keyboardType="phone-pad"
      placeholder="123-456-7890"
      className="flex flex-row items-center gap-2"
      inputClasses="border-2 border-blue-500"
      labelClasses="text-lg text-blue-600"
    />
    

### 

[​](#controlled-component)

Controlled Component

    const [inputValue, setInputValue] = useState('');
    // ...
    <Input
      value={inputValue}
      onChange={setInputValue}
      placeholder="Controlled Input"
    />;
    

[Drop down](/drop-down)
[Progress](/progress)

On this page

*   [Overview](#overview)
    
*   [Preview](#preview)
    
*   [Installation](#installation)
    
*   [Properties](#properties)
    
*   [Usage](#usage)
    
*   [Basic usage with label](#basic-usage-with-label)
    
*   [Usage with keyboard type and custom styles](#usage-with-keyboard-type-and-custom-styles)
    
*   [Controlled Component](#controlled-component)

---

# Progress - nativecn-ui

[nativecn-ui home page![light logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-light.png)![dark logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-dark.png)](/)

Search...

Search...

Navigation

[​](#overview)

Overview
--------------------------

`Progress` Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

[​](#preview)

Preview
------------------------

*   Preview
*   Code

Light mode

Dark mode

[​](#installation)

Installation
----------------------------------

*   CLI
*   Manual

    npx nativecn-ui add Progress 
    

[​](#properties)

Properties
------------------------------

*   `className?: string` (optional) - The classes for the `View` bar.
*   `value: number` - The value of the progress bar. It should be a number between 0 and 100.

[​](#usage)

Usage
--------------------

    <Progress value={25} className="mb-2" />
    <Progress value={50} className="mb-2" />
    <Progress value={75} className="mb-2" />
    

[Input](/input)
[Radio group](/radio-group)

On this page

*   [Overview](#overview)
    
*   [Preview](#preview)
    
*   [Installation](#installation)
    
*   [Properties](#properties)
    
*   [Usage](#usage)

---

# Card - nativecn-ui

[nativecn-ui home page![light logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-light.png)![dark logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-dark.png)](/)

Search...

Search...

Navigation

[​](#overview)

Overview
--------------------------

`Card` is a versatile React Native component that provides a structured format for displaying content. Cards can display title, description, content, and footer. It also adapts automatically to the current color scheme.

[​](#preview)

Preview
------------------------

*   Preview
*   Code

Light mode

Dark mode

[​](#installation)

Installation
----------------------------------

*   CLI
*   Manual

    npx nativecn-ui add Card 
    

[​](#components)

Components
------------------------------

### 

[​](#card)

Card

The parent container for the card system.

*   `children` - Components to be rendered inside the Cards container. Mainly `CardHeader`, `CardContent`, and `CardFooter`.
*   `className?: string` - Tailwind CSS classes to be applied to the `View`.

### 

[​](#cardheader)

CardHeader

The container for the card header.

*   `children` - Components to be rendered inside the Cards container. Mainly `CardTitle` and `CardDescription`.
*   `className?: string` - Tailwind CSS classes to be applied to the `View`.

### 

[​](#cardtitle)

CardTitle

The main text shown in the header.

*   `children` - Text to be rendered inside the `Text` element.
*   `className?: string` - Tailwind CSS classes to be applied to the `Text`.

### 

[​](#carddescription)

CardDescription

The secondary text shown in the header.

*   `children` - Text to be rendered inside the `Text` element.
*   `className?: string` - Tailwind CSS classes to be applied to the `Text`.

### 

[​](#cardcontent)

CardContent

The body of the card.

*   `children` - Components to be rendered inside the `View` element.
*   `className?: string` - Tailwind CSS classes to be applied to the `View`.

### 

[​](#cardfooter)

CardFooter

The footer of the card.

*   `children` - Components to be rendered inside the `View` element.
*   `className?: string` - Tailwind CSS classes to be applied to the `View`.

### 

[​](#simplecard)

SimpleCard

A pre-built `Card` component taking text as input.

*   `className?: string` - Tailwind CSS classes to be applied to the `View`.
*   `title?: string` - The title of the card.
*   `description?: string` - A brief description or subtitle.
*   `content?: string` - The main content inside the card.
*   `footer?: string` - Text to display at the bottom of the card.

[​](#usage)

Usage
--------------------

### 

[​](#basic-usage)

Basic usage

    <Card>
      <CardHeader>
        <CardTitle>Accelerate UI</CardTitle>
        <CardDescription>Enter a new development experience</CardDescription>
      </CardHeader>
      <CardContent>
        <Text className="text-base text-primary">
          Sleek, easy to use components to build your next app faster.
        </Text>
      </CardContent>
      <CardFooter>
        <Text className="text-sm text-muted-foreground">
          Inspired by shadcn/ui
        </Text>
      </CardFooter>
    </Card>
    

### 

[​](#basic-usage-with-simplecard-component)

Basic usage with `SimpleCard` component

    <SimpleCard
      title="Accelerate UI"
      description="Enter a new development experience"
      content="Sleek, easy to use components to build your next app faster."
      footer="Inspired by shadcn/ui"
    />
    

[Badge](/badge)
[Checkbox](/checkbox)

On this page

*   [Overview](#overview)
    
*   [Preview](#preview)
    
*   [Installation](#installation)
    
*   [Components](#components)
    
*   [Card](#card)
    
*   [CardHeader](#cardheader)
    
*   [CardTitle](#cardtitle)
    
*   [CardDescription](#carddescription)
    
*   [CardContent](#cardcontent)
    
*   [CardFooter](#cardfooter)
    
*   [SimpleCard](#simplecard)
    
*   [Usage](#usage)
    
*   [Basic usage](#basic-usage)
    
*   [Basic usage with SimpleCard component](#basic-usage-with-simplecard-component)

---

# Skeleton - nativecn-ui

[nativecn-ui home page![light logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-light.png)![dark logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-dark.png)](/)

Search...

Search...

Navigation

[​](#overview)

Overview
--------------------------

`Skeleton` is a React Native component that serves as a placeholder for content during the loading state, providing a smooth, pulsating animation similar to TailwindCSS’s animate-pulse.

[​](#preview)

Preview
------------------------

*   Preview
*   Code

Light mode

Dark mode

[​](#installation)

Installation
----------------------------------

*   CLI
*   Manual

    npx nativecn-ui add Skeleton 
    

[​](#properties)

Properties
------------------------------

*   `className?: string` (optional) - The classes for the `View` container.

[​](#usage)

Usage
--------------------

    <Skeleton className="w-48 h-4 mb-1" />
    <Skeleton className="w-60 h-4 mb-1" />
    <Skeleton className="w-36 h-4" />
    

[Radio group](/radio-group)
[Switch](/switch)

On this page

*   [Overview](#overview)
    
*   [Preview](#preview)
    
*   [Installation](#installation)
    
*   [Properties](#properties)
    
*   [Usage](#usage)

---

# Switch - nativecn-ui

[nativecn-ui home page![light logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-light.png)![dark logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-dark.png)](/)

Search...

Search...

Navigation

[​](#overview)

Overview
--------------------------

`Switch` is a React Native component designed for creating a switch or toggle control. It’s built on top of React Native’s [Switch](https://reactnative.dev/docs/switch)
. It can be customized with Tailwind classes through the `className` prop.

[​](#preview)

Preview
------------------------

*   Preview
*   Code

Light mode

Dark mode

[​](#installation)

Installation
----------------------------------

*   CLI
*   Manual

    npx nativecn-ui add Switch
    

[​](#properties)

Properties
------------------------------

*   `className?: string (optional)` - The classes for the switch.
*   See React Native’s [Switch props](https://reactnative.dev/docs/switch#props)
    

[​](#usage)

Usage
--------------------

### 

[​](#basic-usage)

Basic Usage

Here’s how you can use the `Switch` component:

    const [isEnabled, setIsEnabled] = useState(false);
    
    return <Switch onValueChange={setIsEnabled} value={isEnabled} />;
    

[Skeleton](/skeleton)
[Tabs](/tabs)

On this page

*   [Overview](#overview)
    
*   [Preview](#preview)
    
*   [Installation](#installation)
    
*   [Properties](#properties)
    
*   [Usage](#usage)
    
*   [Basic Usage](#basic-usage)

---

# Select - nativecn-ui

[nativecn-ui home page![light logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-light.png)![dark logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-dark.png)](/)

Search...

Search...

Navigation

[​](#overview)

Overview
--------------------------

`Select` is a customizable React Native component for selecting options from a dropdown. This component converts any array of objects into an array of options compatible with the `label` and `value` fields, facilitating use with different data sources.

[​](#preview)

Preview
------------------------

*   Preview
*   Code

Light mode

Dark mode

[​](#installation)

Installation
----------------------------------

*   CLI
*   Manual

    npx  nativecn-ui  add  Select
    

[​](#properties)

Properties
------------------------------

*   `label?: string` (optional) - Text displayed as selector label.
    
*   `labelClasses?: string` (optional) - Style classes for the label.
    
*   `selectClasses?: string` (optional) - Style classes for the selector button.
    
*   `options: any[]` (required) - Array of options that will be converted into options compatible with `label` and `value`.
    
*   `onSelect: (value: string | number) => void` (required) - Callback function called when an option is selected.
    
*   `selectedValue?: string | number` (optional) - Currently selected value.
    
*   `placeholder?: string` (optional) - Placeholder to display when nothing is selected (default: ‘Select an option’).
    
*   `labelKey: string` (required) - Label key in the options object.
    
*   `valueKey: string` (required) - Value key in the options object.
    

[​](#usage)

Usage
--------------------

### 

[​](#basic-usage-with-label)

Basic usage with `label`

    <Select
    label="Choose an option"
    options={[\
    { id:  1, name:  'Option 1' },\
    { id:  2, name:  'Option 2' },\
    ]}
    
    labelKey="name"
    valueKey="id"
    selectedValue={selectedOption}
    onSelect={value  =>  setSelectedOption(value)}
    />
    

[​](#usage-2)

Usage
----------------------

### 

[​](#basic-usage-with-labelkey-and-valuekey)

Basic usage with `labelKey` and `valueKey`

    <Select
    label="Choose an option"
    options={[\
    { description:  'Option A', code:  'A' },\
    { description:  'Option B', code:  'B' },\
    ]}
    
    onSelect={setSelectedValue}
    selectedValue={selectedValue}
    labelKey="description"
    valueKey="code"
    />
    

### 

[​](#usage-with-custom-styles)

Usage with custom styles

    <Select
    label="Custom Option"
    options={data}
    onSelect={setSelectedValue}
    selectedValue={selectedValue}
    labelKey="name"
    valueKey="id"
    labelClasses="text-lg font-bold"
    selectClasses="bg-amber-400"
    />
    
    

[Toast](/toast)

On this page

*   [Overview](#overview)
    
*   [Preview](#preview)
    
*   [Installation](#installation)
    
*   [Properties](#properties)
    
*   [Usage](#usage)
    
*   [Basic usage with label](#basic-usage-with-label)
    
*   [Usage](#usage-2)
    
*   [Basic usage with labelKey and valueKey](#basic-usage-with-labelkey-and-valuekey)
    
*   [Usage with custom styles](#usage-with-custom-styles)

---

# Radio group - nativecn-ui

[nativecn-ui home page![light logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-light.png)![dark logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-dark.png)](/)

Search...

Search...

Navigation

[​](#overview)

Overview
--------------------------

`RadioGroup` is a set of flexible React Native components designed for creating radio buttons.

*   Preview
*   Code

Light mode

Dark mode

[​](#installation)

Installation
----------------------------------

*   CLI
*   Manual

    npx nativecn-ui add RadioGroup
    

[​](#api)

API
----------------

### 

[​](#radiogroup)

`RadioGroup`

*   `defaultValue: string` - The default value of the radio group.

### 

[​](#radiogroupitem)

`RadioGroupItem`

*   `value: boolean` - The value of the button.
*   `label?: string (optional)` - The label of the button (rendered as `<Text>`).
*   `labelClasses?: string (optional)` - The classes for the label.
*   `className?: string (optional)` - The classes for the switch.

### 

[​](#radiogrouplabel)

`RadioGroupLabel`

*   `value: string` - The value of the label (needs to match the value of the radio group item).
*   `className?: string (optional)` - The classes for the label.

[​](#usage)

Usage
--------------------

    <RadioGroup defaultValue="dark">
      <RadioGroupItem value="light" label="Light" />
      <RadioGroupItem value="dark" label="Dark" />
      <View className="flex flex-row items-center gap-2">
        <RadioGroupItem value="system" />
        <RadioGroupLabel value="system">
          <AvatarImage
            className="h-8 w-8 rounded-full"
            source={{
              uri: 'https://avatars.githubusercontent.com/u/75042455?s=200&v=4',
            }}
          />
        </RadioGroupLabel>
      </View>
    </RadioGroup>
    

[Progress](/progress)
[Skeleton](/skeleton)

On this page

*   [Overview](#overview)
    
*   [Installation](#installation)
    
*   [API](#api)
    
*   [RadioGroup](#radiogroup)
    
*   [RadioGroupItem](#radiogroupitem)
    
*   [RadioGroupLabel](#radiogrouplabel)
    
*   [Usage](#usage)

---

# Tabs - nativecn-ui

[nativecn-ui home page![light logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-light.png)![dark logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-dark.png)](/)

Search...

Search...

Navigation

[​](#overview)

Overview
--------------------------

A set of layered sections of content —known as tab panels— that are displayed one at a time.

[​](#preview)

Preview
------------------------

*   Preview
*   Code

Light mode

Dark mode

[​](#installation)

Installation
----------------------------------

*   CLI
*   Manual

    npx nativecn-ui add Tabs 
    

[​](#components)

Components
------------------------------

### 

[​](#tabs)

Tabs

The parent container for the tabbing system.

*   `defaultValue: string` - The value of the tab that should be active when initially rendered.
*   `children` - Components to be rendered inside the Tabs container. Mainly `TabsList` and `TabsContent`.

### 

[​](#tabslist)

TabsList

The container for individual tab triggers.

*   `children` - `TabsTrigger` components.

### 

[​](#tabstrigger)

TabsTrigger

Triggers or buttons for each tab. Should be placed inside `TabsList`.

*   `id: string` - A unique identifier for the tab.
*   `title: string` - The label displayed on the tab trigger.

### 

[​](#tabscontent)

TabsContent

Container for the content of each tab.

*   `value: string` - A unique value that associates the content with a trigger.
*   `children` - The content to display when the tab is active.

[​](#usage)

Usage
--------------------

### 

[​](#basic-usage)

Basic usage

    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger id="account" title="Account" />
        <TabsTrigger id="password" title="Password" />
      </TabsList>
      <TabsContent value="account">
        <Text className="text-primary">Make changes to your account here.</Text>
      </TabsContent>
      <TabsContent value="password">
        <Text className="text-primary">Change your password here.</Text>
      </TabsContent>
    </Tabs>
    

[Switch](/switch)
[Toast](/toast)

On this page

*   [Overview](#overview)
    
*   [Preview](#preview)
    
*   [Installation](#installation)
    
*   [Components](#components)
    
*   [Tabs](#tabs)
    
*   [TabsList](#tabslist)
    
*   [TabsTrigger](#tabstrigger)
    
*   [TabsContent](#tabscontent)
    
*   [Usage](#usage)
    
*   [Basic usage](#basic-usage)

---

# Toast - nativecn-ui

[nativecn-ui home page![light logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-light.png)![dark logo](https://mintlify.s3-us-west-1.amazonaws.com/nativecn/logo/logo-dark.png)](/)

Search...

Search...

Navigation

[​](#overview)

Overview
--------------------------

`Toast` is a React Native component designed to provide quick feedback in the form of a temporary, dismissible message. It can be customized based on various variants such as `default`, `success`, `destructive`, and `info`.

[​](#preview)

Preview
------------------------

*   Preview
*   Code

Light Mode

Dark Mode

Light Mode (with progress)

Dark Mode (with progress)

[​](#installation)

Installation
----------------------------------

*   CLI
*   Manual

    npx nativecn-ui add Toast 
    

[​](#usage)

Usage
--------------------

### 

[​](#basic-usage)

Basic usage

    import { ToastProvider, ToastVariant, useToast } from './components/Toast';
    
    function DemoToast() {
      const { toast } = useToast();
    
      return (
        <Button
          label="Show Default Toast"
          onPress={() => {
            toast('This is a default toast');
          }}
        />
      );
    }
    
    <ToastProvider position="top">
      <DemoToast />
    </ToastProvider>;
    

### 

[​](#custom-usage)

Custom Usage

    // with variant, duration
    toast('This is a success toast', 'success', 4000);
    
    // with variant, duration, showProgress
    toast('This is a success toast', 'success', 4000, true);
    

[Tabs](/tabs)
[Select](/select)

On this page

*   [Overview](#overview)
    
*   [Preview](#preview)
    
*   [Installation](#installation)
    
*   [Usage](#usage)
    
*   [Basic usage](#basic-usage)
    
*   [Custom Usage](#custom-usage)

---