> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shipmobilefast.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Customizable UI Components

<Warning>
  You can integrate some of ui libraries into your app.
</Warning>

Like:

* [React Native Paper](https://callstack.github.io/react-native-paper/)
* [Gluestack UI](https://www.gluestack.io)
* [NativeWind](https://www.nativewind.dev/)
* [Tamagui](https://tamagui.dev/)
* [React Native Elements](https://reactnativeelements.com/)

I recommend using `React Native Paper` if you want to use Material Design.

If you want to use Tailwind CSS, I recommend using `Gluestack UI` or `NativeWind`.

Ship Mobile Fast UI Components are handling nearly all of the components you need for your app.

<Info>
  If you want to use other libraries, you can use them.
</Info>

## Available Components

<Info>
  All components are customizable.
</Info>

<Check>
  They are all built with `StyleSheet` and `Reanimated 3`.
</Check>

<Warning>
  Ship Mobile Fast UI Components are working directly with your Theme Colors.
  So if you change your colors, the components will change automatically.
</Warning>

<CardGroup>
  <Card icon="user" title="Onboarding" href="/onboarding">
    5 prebuilt screen for onboarding
  </Card>

  <Card icon="code" title="Button" href="/buttons/button">
    Button
  </Card>

  <Card icon="code" title="PressableOpacity" href="/buttons/pressable-opacity">
    Pressable Opacity
  </Card>

  <Card icon="code" title="Language Button" href="/buttons/language-button">
    Language Button
  </Card>

  <Card icon="code" title="Rainbow Button" href="/buttons/rainbow-button">
    Rainbow Button
  </Card>

  <Card icon="code" title="Rainbow Button 2" href="/buttons/rainbow-button-2">
    Rainbow Button 2
  </Card>

  <Card icon="code" title="Rainbow Button 3" href="/buttons/rainbow-button-3">
    Rainbow Button 3
  </Card>

  <Card icon="code" title="Ripple Button" href="/buttons/ripple-button">
    Ripple Button
  </Card>

  <Card icon="code" title="Shiny Button" href="/buttons/shiny-button">
    Shiny Button
  </Card>

  <Card icon="message" title="Dialog" href="/dialog">
    Dialog
  </Card>

  <Card icon="envelope" title="Toast" href="/toast">
    Toast
  </Card>

  <Card icon="magnifying-glass" title="Searchbar" href="/searchbar">
    Searchbar
  </Card>

  <Card icon="text" title="Input" href="/input">
    Input
  </Card>

  <Card icon="circle-check" title="Radio Button" href="/radio-button">
    Radio Button
  </Card>
</CardGroup>