Skip to main content

React Native Ficus UI

React Native UI library forked from Magnus UI and inspired by Chakra UI.

🎉 Stable version available ! 🎉

Currently v1.0.0

Style props

React Native Ficus UI allows you to pass all the style properties as component props. You don't need to create huge StyleSheet objects.

Theme support

You can edit the components sizes, colors, borders, ... with your own theme.

Chakra UI & React Native

React Native Ficus UI provides the support of style props on React Native components and some components implemented as from Chakra UI(with same API).

Style props

You can use style props to directly apply specific styles to components, simplifying code and improving readability


Theme support

In Ficus UI, customization options include modifying theme tokens like colors and font sizes and adjusting component styles such as base styles and sizes, and customizing global styles for universal application

const theme = {
colors: {
violet: {
50: '#f0eaff',
100: '#d1c1f4',
200: '#b199e7',
300: '#9171dc',
400: '#7248d0',
500: '#592fb7',
600: '#45248f',
700: '#311968',
800: '#1e0f40',
900: '#0c031b',
bleu: {
50: '#e3eeff',
100: '#b6cdfe',
200: '#88abf7',
300: '#5b8af1',
400: '#2d69ec',
500: '#134fd2',
600: '#0b3da4',
700: '#052c77',
800: '#001a4a',
900: '#00091e',

Responsive styles

Ficus UI supports responsive styles out of the box. You can pass directly the prop value or an object containing differents values for each screen size

export default function App() {
return (
<Box h="100%" bg={{ base: "blue.500", sm: "red.600" }} />

Test it out live!

Discover components live with Expo. Experiment with interactive features for an immersive development experience