Cross-platform Cherag UI design for React Native.

Cherag UI is a library for creating easy to use for user interfaces.Use Cherag UI library and super optimize you codebase, design systems, web applications, and more with a simple API for world class developer community. Cherag UI is a component library that enables devs to build universal design systems. It is easy to understand of React Native ui library, allowing you to develop apps for Android, iOS and the Web.

Cherag UI: The Design easy and developer friendly.

Theme UI is a library for creating ease to use interfaces based on light design principles. Build custom component libraries, design systems, web applications, and more with a simple API for world class developer.

Documentation

GitHub

Most advantage of Cherag UI library.

 Multiplatform : Cherag UI supports multiple platforms; android, iOS and web. You can also customise properties using platform-specific props.

 Accessible : Cherag UI easy to understand, code developer friendly, also support default style props.

 Customisable : The default style can be extended as you desire. You can also customise specific components for your app needs.

Create your own components


    import {
      Checkbox,
      CheckboxItem,
      CheckboxValue,
      COLORS,
      Div,
      RadioButton,
      RadioButtonItem,
      RadioButtonValue,
      SIZES,
      Spinner,
      Text,
    } from 'cherag-ui';
    import React, { useState } from 'react';
    import { StyleSheet } from 'react-native';

    export default function App() {
      const [checkboxes, setCheckboxes] = useState<CheckboxValue[]>([]);
      const [selectedRadio, setSelectedRadio] = useState<RadioButtonValue>(1);

      return (
          <Div style={styles.container}>
            <Text style={{ color: COLORS.black }} fontSize="md">
              Cherag-UI
            </Text>
            <Div style={styles.radioBtnGroup}>
              <RadioButton
                btnColor={COLORS.green}
                onChange={setSelectedRadio}
                selected={selectedRadio}
              >
                <RadioButtonItem value={1}>Radio button</RadioButtonItem>
                <RadioButtonItem value={2}>Radio button</RadioButtonItem>
              </RadioButton>
            </Div>
            <Checkbox values={checkboxes} onChange={setCheckboxes}>
              <CheckboxItem value="1">Checkbox 1</CheckboxItem>
              <CheckboxItem value="2">Checkbox 2</CheckboxItem>
              <CheckboxItem value="3">Checkbox 3</CheckboxItem>
            </Checkbox>
            <Spinner color={COLORS.green} size={'large'} />
          </Div>
        );
      }

    const styles = StyleSheet.create({
      container: {
        width: '100%',
        height: SIZES.DimensionHeight * 2,
        marginTop: 30,
      },
      radioBtnGroup: {
        flexDirection: 'row',
      },
    });

Get Started

Explore the Docs