Introducing UI Kit

A new theme for bootstrap.

npm install --save @ui-kit/css

Bootstrap theme

Use with react-bootstrap

Custom components

HEADINGS code

h1. Heading 1 Secondary text

h2. Heading 2 Secondary text

h3. Heading 3 Secondary text

h4. Heading 4 Secondary text

h5. Heading 5 Secondary text

h6. Heading 6 Secondary text

BODY code

This is a paragraph of text. Here's an inline link.

This is a small paragraph of text. Here's an inline link.

DEFAULT code

class NavbarDefault extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeKey: 1 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(key) {
    this.setState({ activeKey: key });
  }
  render() {
    return (
      <Navbar fluid>
        <Navbar.Header>
          <Navbar.Brand>Brand</Navbar.Brand>
          <Navbar.Toggle />
        </Navbar.Header>
        <Navbar.Collapse>
          <Nav
            activeKey={this.state.activeKey}
            onSelect={this.handleClick}
          >
            <NavItem eventKey={1} href="#">
              Link
            </NavItem>
            <NavItem eventKey={2} href="#">
              Link
            </NavItem>
            <NavDropdown
              eventKey={3}
              title="Dropdown"
              id="basic-nav-dropdown"
            >
              <MenuItem eventKey={3.1}>Action</MenuItem>
              <MenuItem eventKey={3.2}>Another action</MenuItem>
              <MenuItem eventKey={3.3}>Something else here</MenuItem>
              <MenuItem divider />
              <MenuItem header>Nav Header</MenuItem>
              <MenuItem eventKey={3.3}>Separated link</MenuItem>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

LARGE code

<ButtonToolbar>
  <Button bsStyle="default" bsSize="large">
    Default
  </Button>
  <Button bsStyle="info" bsSize="large">
    Info
  </Button>
  <Button bsStyle="primary" bsSize="large">
    Primary
  </Button>
  <Button bsStyle="link" bsSize="large">
    Link
  </Button>
</ButtonToolbar>

REGULAR code

<ButtonToolbar>
  <Button bsStyle="default">Default</Button>
  <Button bsStyle="info">Info</Button>
  <Button bsStyle="primary">Primary</Button>
  <Button bsStyle="link">Link</Button>
</ButtonToolbar>

DISABLED code

<ButtonToolbar>
  <Button bsStyle="default" disabled>
    Default
  </Button>
  <Button bsStyle="info" disabled>
    Info
  </Button>
  <Button bsStyle="primary" disabled>
    Primary
  </Button>
  <Button bsStyle="link" disabled>
    Link
  </Button>
</ButtonToolbar>

SMALL code

<ButtonToolbar>
  <Button bsStyle="default" bsSize="small">
    Default
  </Button>
  <Button bsStyle="info" bsSize="small">
    Info
  </Button>
  <Button bsStyle="primary" bsSize="small">
    Primary
  </Button>
  <Button bsStyle="link" bsSize="small">
    Link
  </Button>
</ButtonToolbar>

XSMALL code

<ButtonToolbar>
  <Button bsStyle="default" bsSize="xsmall">
    Default
  </Button>
  <Button bsStyle="info" bsSize="xsmall">
    Info
  </Button>
  <Button bsStyle="primary" bsSize="xsmall">
    Primary
  </Button>
  <Button bsStyle="link" bsSize="xsmall">
    Link
  </Button>
</ButtonToolbar>

LARGE code

<ButtonGroup bsSize="large">
  <Button>Left</Button>
  <Button>Middle</Button>
  <Button>Right</Button>
</ButtonGroup>

REGULAR code

<ButtonGroup>
  <Button>Left</Button>
  <Button>Middle</Button>
  <Button>Right</Button>
</ButtonGroup>

SMALL code

<ButtonGroup bsSize="small">
  <Button>Left</Button>
  <Button>Middle</Button>
  <Button>Right</Button>
</ButtonGroup>

XSMALL code

<ButtonGroup bsSize="xsmall">
  <Button>Left</Button>
  <Button>Middle</Button>
  <Button>Right</Button>
</ButtonGroup>

BUTTON TOOLBAR code

<ButtonToolbar>
  <ButtonGroup>
    <Button>Left</Button>
    <Button>Middle</Button>
    <Button>Right</Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button>
      <Glyphicon glyph="copy" /> Copy
    </Button>
    <Button>
      <Glyphicon glyph="paste" /> Paste
    </Button>
    <Button>
      <Glyphicon glyph="scissors" /> Cut
    </Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button>
      <Glyphicon glyph="cog" />
    </Button>
  </ButtonGroup>
</ButtonToolbar>

INPUTS code

<form>
  <FormGroup>
    <ControlLabel>Username</ControlLabel>
    <InputGroup>
      <InputGroup.Addon>
        <Glyphicon glyph="user" />
      </InputGroup.Addon>
      <FormControl type="text" placeholder="Username" />
    </InputGroup>
  </FormGroup>

  <FormGroup>
    <ControlLabel>Full price</ControlLabel>
    <InputGroup>
      <InputGroup.Addon>$</InputGroup.Addon>
      <FormControl type="text" />
      <InputGroup.Addon>.00</InputGroup.Addon>
    </InputGroup>
  </FormGroup>

  <FormGroup>
    <InputGroup>
      <FormControl type="text" />
      <InputGroup.Addon>
        <Glyphicon glyph="music" />
      </InputGroup.Addon>
    </InputGroup>
  </FormGroup>

  <FormGroup>
    <InputGroup>
      <InputGroup.Button>
        <Button>Before</Button>
      </InputGroup.Button>
      <FormControl type="text" />
    </InputGroup>
  </FormGroup>

  <FormGroup>
    <InputGroup>
      <FormControl type="text" />
      <DropdownButton
        componentClass={InputGroup.Button}
        id="input-dropdown-addon"
        title="Action"
      >
        <MenuItem key="1">Item</MenuItem>
      </DropdownButton>
    </InputGroup>
  </FormGroup>
</form>

BREADCRUMB code

<Breadcrumb>
  <Breadcrumb.Item href="#" active>
    Home
  </Breadcrumb.Item>
</Breadcrumb>

<Breadcrumb>
  <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
  <Breadcrumb.Item href="#" active>
    Library
  </Breadcrumb.Item>
</Breadcrumb>

<Breadcrumb>
  <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
  <Breadcrumb.Item href="#">Library</Breadcrumb.Item>
  <Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>

DEFAULT code

class PaginationDefault extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activePage: 2 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(page) {
    this.setState({ activePage: page });
  }
  render() {
    return (
      <Pagination
        items={10}
        activePage={this.state.activePage}
        onSelect={this.handleClick}
      />
    );
  }
}

SMALL + ACCESSORIES code

class PaginationSmall extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activePage: 2 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(page) {
    this.setState({ activePage: page });
  }
  render() {
    return (
      <Pagination
        prev
        next
        first
        last
        ellipsis
        boundaryLinks
        items={20}
        maxButtons={5}
        activePage={2}
        bsSize="small"
        activePage={this.state.activePage}
        onSelect={this.handleClick}
      />
    );
  }
}

DEFAULT code

<Pager>
  <Pager.Item href="#">Previous</Pager.Item>{' '}
  <Pager.Item href="#">Next</Pager.Item>
</Pager>

ALIGNED code

<Pager>
  <Pager.Item previous href="#">
    <Glyphicon glyph="arrow-left" /> Previous Page
  </Pager.Item>
  <Pager.Item next href="#">
    Next Page <Glyphicon glyph="arrow-right" />
  </Pager.Item>
</Pager>

DISABLED code

<Pager>
  <Pager.Item previous href="#">
    <Glyphicon glyph="arrow-left" /> Previous
  </Pager.Item>
  <Pager.Item disabled next href="#">
    Next <Glyphicon glyph="arrow-right" />
  </Pager.Item>
</Pager>

DEFAULT code

class PillsDefault extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeKey: 1 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(key) {
    this.setState({ activeKey: key });
  }
  render() {
    return (
      <Nav
        bsStyle="pills"
        activeKey={this.state.activeKey}
        onSelect={this.handleClick}
      >
        <NavItem eventKey={1}>Home</NavItem>
        <NavItem eventKey={2}>Profile</NavItem>
        <NavItem eventKey={3} href="#">
          Messages
        </NavItem>
      </Nav>
    );
  }
}

JUSTIFIED code

class PillsJustified extends React.Component {
    constructor(props) {
      super(props);
      this.state = { activeKey: 1 };
      this.handleClick = this.handleClick.bind(this);
    }
    handleClick(key) {
      this.setState({ activeKey: key });
    }
    render() {
      return (
        <Nav
          bsStyle="pills"
          activeKey={this.state.activeKey}
          onSelect={this.handleClick}
          justified
        >
          <NavItem eventKey={1}>Home</NavItem>
          <NavItem eventKey={2}>Profile</NavItem>
          <NavItem eventKey={3} href="#">
            Messages
          </NavItem>
        </Nav>
      );
    }
  }

DISABLED code

class PillsDisabled extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeKey: 1 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(key) {
    this.setState({ activeKey: key });
  }
  render() {
    return (
      <Nav
        bsStyle="pills"
        activeKey={this.state.activeKey}
        onSelect={this.handleClick}
        justified
        disabled
      >
        <NavItem eventKey={1}>Home</NavItem>
        <NavItem eventKey={2}>Profile</NavItem>
        <NavItem eventKey={3} href="#">
          Messages
        </NavItem>
      </Nav>
    );
  }
}

STACKED code

class PillsDisabled extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeKey: 1 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(key) {
    this.setState({ activeKey: key });
  }
  render() {
    return (
      <Nav
        bsStyle="pills"
        activeKey={this.state.activeKey}
        onSelect={this.handleClick}
        stacked
      >
        <NavItem eventKey={1}>Home</NavItem>
        <NavItem eventKey={2}>Profile</NavItem>
        <NavItem eventKey={3} href="#">
          Messages
        </NavItem>
      </Nav>
    );
  }
}

BADGE code

class PillsWithBadge extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeKey: 1 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(key) {
    this.setState({ activeKey: key });
  }
  render() {
    return (
      <Nav
        bsStyle="pills"
        activeKey={this.state.activeKey}
        onSelect={this.handleClick}
        stacked
      >
      <NavItem eventKey={1}>
        Home <Badge className="pull-right">42</Badge>
      </NavItem>
      <NavItem eventKey={2}>Profile</NavItem>
      <NavItem eventKey={3} href="#">
        Messages <Badge className="pull-right">24</Badge>
      </NavItem>
      </Nav>
    );
  }
}

DEFAULT code

DefaultInfoWarning

<Label>Default</Label>
<Label bsStyle="info">Info</Label>
<Label bsStyle="warning">Warning</Label>

DEFAULT code

Panel header

Panel body text

<Panel header="Panel header">
  Panel body text
</Panel>

PRIMARY code

Panel header

Panel body text

<Panel bsStyle="primary" header="Panel header">
  Panel body text
</Panel>

INFO code

Panel header

Panel body text

<Panel bsStyle="primary" header="Panel header">
  Panel body text
</Panel>

WARNING code

Panel header

Panel body text

<Panel bsStyle="primary" header="Panel header">
  Panel body text
</Panel>

UNCONTROLLED code

Home content

<Tabs defaultActiveKey={1} animation={false}>
  <Tab eventKey={1} title={<div>Home</div>}>
    Home content
  </Tab>
  <Tab eventKey={2} title={<div>Profile</div>}>
    Profile content
  </Tab>
  <Tab eventKey={3} title={<div>Messages</div>}>
    Messages content
  </Tab>
</Tabs>

CONTROLLED code

Home content

class TabsControlled extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeKey: 1 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(key) {
    this.setState({ activeKey: key });
  }
  render() {
    return (
      <Tabs
        activeKey={this.state.activeKey}
        onSelect={this.handleClick}
        animation={false}
      >
        <Tab eventKey={1} title={<div>Home</div>}>
          Home content
        </Tab>
        <Tab eventKey={2} title={<div>Profile</div>}>
          Profile content
        </Tab>
        <Tab eventKey={3} title={<div>Messages</div>}>
          Messages content
        </Tab>
      </Tabs>
    );
  }
}

WITH DROPDOWN code

Home content

<Tab.Container defaultActiveKey="first">
  <Row className="clearfix">
    <Col sm={12}>
      <Nav bsStyle="tabs">
        <NavItem eventKey="first">Home</NavItem>
        <NavItem eventKey="second">Profile</NavItem>
        <NavDropdown eventKey="3" title="Messages">
          <MenuItem eventKey="3.1">Inbox</MenuItem>
          <MenuItem eventKey="3.2">Alerts</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey="3.3">Send Message</MenuItem>
        </NavDropdown>
      </Nav>
    </Col>
    <Col sm={12}>
      <Tab.Content animation={false}>
        <Tab.Pane eventKey="first">Home content</Tab.Pane>
        <Tab.Pane eventKey="second">
          Profile content
        </Tab.Pane>
        <Tab.Pane eventKey="3.1">Inbox content</Tab.Pane>
        <Tab.Pane eventKey="3.2">Alerts content</Tab.Pane>
        <Tab.Pane eventKey="3.3">
          Send message content
        </Tab.Pane>
      </Tab.Content>
    </Col>
  </Row>
</Tab.Container>

CUSTOM LAYOUT code

Home content

<Tab.Container defaultActiveKey="first">
  <Row className="clearfix">
    <Col sm={4}>
      <Nav bsStyle="pills" stacked>
        <NavItem eventKey="first">
          Home<Badge className="pull-right">42</Badge>
        </NavItem>
        <NavItem eventKey="second">Profile</NavItem>
        <NavItem eventKey="third">
          Messages <Badge className="pull-right">24</Badge>
        </NavItem>
      </Nav>
    </Col>
    <Col sm={8}>
      <Tab.Content animation={false}>
        <Tab.Pane eventKey="first">Home content</Tab.Pane>
        <Tab.Pane eventKey="second">
          Profile content
        </Tab.Pane>
        <Tab.Pane eventKey="third">
          Messages content
        </Tab.Pane>
      </Tab.Content>
    </Col>
  </Row>
</Tab.Container>

DEFAULT code

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

<Jumbotron>
  <h1>Hello, world!</h1>
  <p>
    This is a simple hero unit, a simple jumbotron-style
    component for calling extra attention to featured
    content or information.
  </p>
  <p>
    <Button bsStyle="primary">Learn more</Button>
  </p>
</Jumbotron>

Introducing UI Kit

Bootstrap theme

Use with react-bootstrap

Custom components

Typography

h1. Heading 1 Secondary text

h2. Heading 2 Secondary text

h3. Heading 3 Secondary text

h4. Heading 4 Secondary text

h5. Heading 5 Secondary text

h6. Heading 6 Secondary text

Nav bars

Buttons

Button Groups

Inputs

Breadcrumbs

Pagination

Pager

Pills

Badges

Labels

Panels

Tabs

Jumbotron

Hello, world!