**Build new UI compositions directly in your browser.**

> *We've imported the entire UMD bundle as a **`UI`** variable so you can use any element! Once you're done, you should be able to copy and paste your work directly in to your local repo clone.*

```jsx
import UI, {Box} from '@ui/components';

<UI.Flex>
  <Box>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit quaerat, recusandae magni ut nemo nulla pariatur animi. Sunt rerum, fugit neque at molestiae inventore blanditiis dolorem vero quo nam reiciendis ducimus ullam, porro mollitia!
  </Box>
  <Box>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit quaerat, recusandae magni ut nemo nulla pariatur animi. Sunt rerum, fugit neque at molestiae inventore blanditiis dolorem vero quo nam reiciendis ducimus ullam, porro mollitia!
  </Box>
</UI.Flex>
```

<style>
  html[flags~=isolated] [data-testid*="quick-composer"] > div[class*=rsg--wrapper-],
  html[flags~=isolated] [data-testid*="Quick Composer"] > div:not([class]) {
    display: none;
  }
</style>

<!--
```jsx
import UI from '../../src/umd.js';

<UI.Flex align="center">
  <UI.Box bem={[['pop']]}>
    <UI.Metric
      chart="doughnut"
      data={{
        labels: ['200', '400', '404'],
        datasets: [{
          data: [300, 100, 50],
          backgroundColor: ['#118CFD', '#C3E2FE', '#8ABFFE'],
          hoverBorderColor: '#fff',
          borderWidth: 3,
        }],
        options: { tooltips: {enabled: false} }
      }}
    >
    <small style={{opacity:.66}}>
      <br/>
      <em>Response Code Insights</em>
    </small>
  </UI.Metric>
  </UI.Box>
  <div flex="block">
    <UI.Title text="Developer Metrics" level={4} bem={{bold: true}}/>
    <p>Our metrics help you understand your API, so your team can make informed decisions and provide tailored support to your developer community based on real-world usage.</p>
    <UI.Button bem={{gray: true}}>
      <b>Sign Up</b>
    </UI.Button>
  </div>
</UI.Flex>
```
 -->

<!--
```jsx
import UI from '../../src/umd.js';

const handleSubmit = e => {
  e.preventDefault();
  const {target} = e;
  const form = new FormData(target)
  const data = Object.fromEntries(form.entries())
  console.log(data)
}

const style = {
  backgroundColor: '#018ef5',
  backgroundImage: 'url(https://cdn.readme.io/img/dash/books@2x.png)',
  backgroundSize: '500px',
  backgroundRepeatY: 'no-repeat',
  backgroundPosition: 'center bottom 30px',
  margin: '-1em',
  padding: '2em 3em',
};

<div style={style}>
  <UI.Flex align="end" justify="between" style={{position:'relative'}}>
    <UI.Box bem={[['pop']]} style={{width: "80%"}}>
      <UI.Title level={4} style={{marginBottom: '.7em', letterSpacing: '-.03em', color: '#008ef5'}}>
        <b>Sign in to ReadMe</b>
      </UI.Title>
      <form onSubmit={handleSubmit} className="Flex Flex_col">
        <UI.LabeledCheckbox id="user" name="user" type="text" placeholder="rafe@readme.io">
          <span style={{width: "25%"}}>Username</span>
        </UI.LabeledCheckbox>
        <UI.LabeledCheckbox id="pass" name="pass" type="password" placeholder="•••••••">
          <span style={{width: "25%"}}>Password</span>
        </UI.LabeledCheckbox>
        <UI.Box bem={[['rule','flat']]} style={{
          margin: '1em calc(-1rem - 1px) calc(-1rem - 1px) calc(-1rem - 1px)',
          borderRadius: 0,
          opacity:1
        }}>
          <UI.Flex align="center" justify="between">
            <label class="Flex" align="center" inline="true">
              <UI.LabeledCheckbox name="test" type="toggle">
                <small style={{opacity: .6, marginLeft: 4}}>Stay logged in?</small>
              </UI.LabeledCheckbox>
            </label>
            <UI.Button type="submit">Log In</UI.Button>
          </UI.Flex>
        </UI.Box>
      </form>
    </UI.Box>
    <img src="https://owlbert.io/images/owlberts-png/Pointing.psd.png" style={{
      height: 200,
      transform: 'translate(-30px, 30px)',
    }}/>
  </UI.Flex>
</div>
```
-->