---
title: 'Getting started'
---

# Getting Started

First we need to install `@blockstack/ui` and its various dependencies.

```
yarn add @blockstack/ui styled-components babel-plugin-styled-components
```

## Usage

> Please note that you will need to have the [styled-components babel plugin](https://github.com/styled-components/babel-plugin-styled-components)
> set up in your project in order to use the `css` prop.

To use any component from `@blockstack/ui`, we need to import the `ThemeProvider` into the root component of the app that
will be using Blockstack UI. The ThemeProvider creates a [React Context](https://reactjs.org/docs/context.html) scope
for all of our components to use.

```jsx live=false
// app.tsx
import React from 'react';
import { ThemeProvider } from '@blockstack/ui';

<ThemeProvider>{children}</ThemeProvider>;
```

### Reset global styles

Typically you will want to apply a css reset to your page. `@blockstack/ui` exports
a [`CSSReset`](/components/css-reset) that will reset and improve the browsers default styles. It's heavily inspired by
[Tailwind's preflight](https://unpkg.com/tailwindcss@1.1.2/dist/base.css).

```jsx live=false
const App({ children }) => {
  return (
    <ThemeProvider>
      <CSSReset />
      {children}
    </ThemeProvider>
  );
}
```

### Using components

Simply import components by name from the `@blockstack/ui` package, as shown
below.

```js
import { Button } from '@blockstack/ui';
```

### Contributing

Please see our [contribution guidelines](/contributing) to learn how you can
contribute to this project.
