Getting Started

Components

Themes

Please understand this website is built in react, the components are in react native. There may be slight differences!

Paragraph

Text or P(just like in web) which can use the library's color directly.

Normally this is just a P tag on website, but it is a little tricky to deal with colors and stuffs in react native with Text. It is built on Text with more properties (See below)

1
Install by running this command!
npx uni-ui-kit install P
2
Import the component!
import P from '../lib/ui/p';
Properties table
color?
color
Color of the text
fontSize?
fontSize
Font size
fontWeight?
fontWeight
Font weight
textAlign?
textAlign
Text align
tint?
tint
Tint of the color(used only with color)
variant?
textVariant
Variant of the text(only set color&tint or variant)
Library data types
color
amber, blue, emerald, cyan, fuchsia, gray, green, indigo, lime, neutral, orange, pink, purple, rose, slate, sky, stone, teal, violet, yellow, zinc
Color currently used in P component(default tint is 500) Can import by Colors from './unistyles.ts' & use Colors.color[tint]
fontSize
xxs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl
Built in font size derived from tailwind _~_ Can import by FontSize from './unistyles.ts'
fontWeight
100, 200, 300, 400, 500, 600, 700, 800, 900
Same font weight used in style!
textVariant
primary, primaryForeground, secondary, secondaryForeground, tertiary, tertiaryForeground, success, successForeground, warning, warningForeground, error, errorForeground, black, white
Colors will change according to theme(light, dark). Use when it is intended.
tint
50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
Color currently used in P component(default tint is 500)