npm i bloomer-extensions

import {  Divider,
          PageLoader,
          ToolTip,
          Badge,
          CheckRadio,
          Slider,
          CheckSwitch,
          QuickView, QuickViewHeader, QuickViewBody, QuickViewBlock, QuickViewFooter,
          Steps, StepItem, StepMarker, StepDetails, StepTitle,
          Timeline, TimelineHeader, TimelineItem, TimelineMarker, TimelineContent
  } from 'bloomer-extensions'

<Divider />
<Divider isVertical />
<Divider content="HI" />

<PageLoader isActive>
	Test
</PageLoader>

<ToolTip text="Hey">Test</ToolTip>

<Badge text="8">
	<button class="button">Test</button>
</Badge>

<CheckRadio id="test" checked={this.state.checkradioChecked} onClick={() => this.setState({ checkradioChecked: !this.state.checkradioChecked })}>Click me</Checkradio>

<CheckRadio type="radio" name="myGroup" id="opt1" value="1" checked>Option 1</Checkradio>

<CheckRadio type="radio" name="myGroup" id="opt2" value="2">Option 2</Checkradio>

<Slider value={this.state.sliderValue} onChange={(e) => this.setState({ sliderValue: e.target.value })} />
<p>{ this.state.sliderValue || 50 }</p>

<CheckSwitch checked={this.state.checkswitchChecked} onClick={() => this.setState({ checkswitchChecked: !this.state.checkswitchChecked })}>
	Check me
</CheckSwitch>

<QuickView isActive={this.state.quickview}>
	<QuickViewHeader>
	  Title
	  <Delete onClick={() => this.setState({ quickview: false })} />
	</QuickViewHeader>

	<QuickViewBody>
	  <QuickViewBlock>
	    Hello, world
	  </QuickViewBlock>
	</QuickViewBody>

	<QuickViewFooter>
	  Footer
	</QuickViewFooter>
</QuickView>

  <Steps isSize='large'>
    <StepItem isCompleted isColor='info'>
      <StepMarker>
        ✓
      </StepMarker>
      <StepDetails>
        <StepTitle>Step 1</StepTitle>
        <p>Steps' first step</p>
      </StepDetails>
    </StepItem>

    <StepItem isActive>
      <StepMarker>
        ✓
      </StepMarker>
      <StepDetails>
        <StepTitle>Step 2</StepTitle>
        <p>Steps' second step</p>
      </StepDetails>
    </StepItem>

    <StepItem>
      <StepMarker>
        ✓
      </StepMarker>
      <StepDetails>
        <StepTitle>Step 3</StepTitle>
        <p>Steps' third step</p>
      </StepDetails>
    </StepItem>

    <StepItem>
      <StepMarker>
        ✓
      </StepMarker>
      <StepDetails>
        <StepTitle>Step 4</StepTitle>
        <p>Steps' final step</p>
      </StepDetails>
    </StepItem>

  </Steps>

  <Timeline>

    <TimelineHeader>
      <Tag isSize='medium' isColor='primary'>Start</Tag>
    </TimelineHeader>

    <TimelineItem>
      <TimelineMarker />
      <TimelineContent>
        <p class="heading">January 2016</p>
        <p>Timeline content</p>
      </TimelineContent>
    </TimelineItem>

    <TimelineItem>
      <TimelineMarker isColor='info' isSize='medium' />
      <TimelineContent>
        <p class="heading">January 2017</p>
        <p>Timeline content</p>
      </TimelineContent>
    </TimelineItem>

    <TimelineItem>
      <TimelineMarker isColor='info' isSize='medium' isIcon>
        ✓
       </TimelineMarker>
      <TimelineContent>
        <p class="heading">January 2017</p>
        <p>Timeline content</p>
      </TimelineContent>
    </TimelineItem>

  </Timeline>