Bessa UI for React Native

Lightweight and themeable components for React Native

🎉 Getting Started

npm install bessa-ui or yarn add bessa-ui or expo install bessa-ui

import { BessaButton, BessaUIProvider } from "bessa-ui";

<BessaUIProvider>
    <BessaButton>Button</BessaButton>
</BessaUIProvider>

🎨 Theming

Theme Object

To customize the theme, make a copy of bessa-ui-theme.ts and pass the JSON object into the BessaUIProvider component as theme.

Colors

There are 22 base colors available, represented by 500 and based on the Preline Design System. Each color is divided into 11 tints and shades, +95%, +80%, +60%, +40%, +20%, 0%, -20%, -40%, -60%, -80%, and -95%, in light mode and reversed in dark mode.

You can access a color's tints and shades through React Native's useColorScheme hook and Bessa UI's useBessaUI hook.

const colorScheme = useColorScheme();
const { theme } = useBessaUI();

const color = theme.colors[colorScheme].neutral[500]

🔨 Components

Button

<BessaButton>Button</BessaButton>

colorScheme

Description: The background color of the button and color of the anchor text

Type: string

Default: teal

size

Description: Padding between the button and the anchor text

Type: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"

Default: md

radius

Description: The border radius around the button

Type: "none" | "sm" | "md" | "lg" | "xl" | "full"

Default: xl

...rest

Description: All other props are passed down to the TouchableOpacity React Native component.

🔗 Useful Links

Dev Gotchas by Topher

An example: Bessa LGBTQ Social Media App

WynHouse: An Innovation Firm