import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Concepts/Developer/Quick Start" />

## Install

Fluent UI should be installed as a `dependency` of your app.

```sh
yarn add @fluentui/react-components@alpha
```

## Setup

Fluent UI components are styled using CSS in JS. This technique requires a style renderer which inserts CSS into DOM when needed. React context is used to provide the style renderer.

Place a `<FluentProvider />` at the root of your app and pass theme as a prop.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { FluentProvider, teamsLightTheme } from '@fluentui/react-components';

import App from './App';

ReactDOM.render(
  <FluentProvider theme={teamsLightTheme}>
    <App />
  </FluentProvider>,
  document.getElementById('root'),
);
```

## Usage

That's it. You can now use Fluent UI components in your app.

```jsx
import React from 'react';
import { Button } from '@fluentui/react-components';

export default () => <Button primary>Get started</Button>;
```