CARBON NATIVE

A set of UI components for building React Native apps

yarn add carbon-native


Demo

Badge

  • import {
      Badge,
    } from 'carbon-native';
    
    <Badge
      color="primary"
      text="4"
    />

Buttons

  • import {
      Button,
    } from 'carbon-native';
    
    <Button
      color="stable"
      text="Regular Button"
    />
    
    <Button
      color="primary"
      text="Outline Button"
      outline
    />
    
    <Button
      color="secondary"
      text="Clear Button"
      clear
    />

Cards

  • import {
      Card,
      H4,
    } from 'carbon-native';
    
    <Card>
      <H4>Header</H4>
      <Text>
        Just some text rambling on.
      </Text>
    </Card>

Icons

  • import Icon from '@expo/vector-icons/FontAwesome';
    
    <Icon
      name="volume-down"
      size={24}
    />

Lists

  • import {
      Item,
      ItemIcon,
      ItemContent,
      ItemText,
      Note,
    } from 'carbon-native';
    
    <Item>
      <ItemIcon>
        <Icon name="bolt" size={24} />
      </ItemIcon>
      <ItemContent>
        <ItemText>Harry</ItemText>
        <Note>The boy who lived</Note>
      </ItemContent>
    </Item>

Range

  • import {
      Range,
    } from 'carbon-native';
    
    <Range
      value={this.state.value}
      onValueChange={(value) => this.setState({ value })}
    />

Toggle

  • import {
      Toggle,
    } from 'carbon-native';
    
    <Toggle
      color="primary"
      onValueChange={(value) => this.setState({ toggleState: value })}
      value={this.state.toggleState}
    />

Toolbars

  • import {
      Toolbar,
      ToolbarTitle,
    } from 'carbon-native';
    
    <Toolbar color="primary">
      <ToolbarTitle color="light">Primary</ToolbarTitle>
    </Toolbar>

Typography

  • import {
      H1,
      H2,
      H3,
      H4,
      H5,
      H6,
      P,
    } from 'carbon-native';
    
    <H1>I'm an H1!</H1>
    <H2>I'm an H2!</H2>
    <H3>I'm an H3!</H3>
    <H4>I'm an H4!</H4>
    <H5>I'm an H5!</H5>
    <H6>I'm an H6!</H6>
    <P>I'm a paragraph with a some text!</P>
Spread the good word!
Contribute to the project on Github.