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.