---
title: Styled Vanilla Extract | Integrations
keywords: 'styles, styling, css-in-js, vanilla-extract, styled-components'
contributors:
  - manucorporat
  - literalpie
  - forresst
  - reemardelarosa
  - mhevery
  - igorbabko
  - Benny-Nottonson
  - mrhoodz
  - adamdbradley
updated_at: '2023-10-03T18:53:23Z'
created_at: '2023-04-06T21:28:28Z'
---

import PackageManagerTabs from '~/components/package-manager-tabs/index.tsx';
import { Note } from '~/components/note/note';

# Styled Vanilla Extract

Styled-vanilla-extract is a CSS framework built on top of [vanilla-extract](https://vanilla-extract.style/) that delivers a modern and performant CSS-in-JS with Zero-runtime.

This integration supports two ways of styling:

- Using [Vanilla Extract](https://vanilla-extract.style/) directly.
- [Styled-components](https://styled-components.com/) powered by Vanilla-extract

## Usage

You can add `styled-vanilla-extract` easily by using the following Qwik starter script:


<PackageManagerTabs>
<span q:slot="pnpm">
```shell
pnpm run qwik add styled-vanilla-extract
```
</span>
<span q:slot="npm">
```shell
npm run qwik add styled-vanilla-extract
```
</span>
<span q:slot="yarn">
```shell
yarn run qwik add styled-vanilla-extract
```
</span>
<span q:slot="bun">
```shell
bun run qwik add styled-vanilla-extract
```
</span>
</PackageManagerTabs>

After the installation a new route will be created in your project, showcasing the usage of the library in a new component.

### The Vanilla Extract way

Please refer to the official docs for more information about [Vanilla Extract](https://vanilla-extract.style/documentation/getting-started).

```tsx title="styles.css.ts"
import { style } from 'styled-vanilla-extract/qwik';

export const blueClass = style({
  display: 'block',
  width: '100%',
  height: '500px',
  background: 'blue',
});
```

```tsx title="component.tsx"
import { blueClass } from './styles.css';

export const Cmp = component$(() => {
  return <div class={blueClass} />;
});
```


<PackageManagerTabs>
<span q:slot="pnpm">
```shell
pnpm run qwik add styled-vanilla-extract
```
</span>
<span q:slot="npm">
```shell
npm run qwik add styled-vanilla-extract
```
</span>
<span q:slot="yarn">
```shell
yarn run qwik add styled-vanilla-extract
```
</span>
<span q:slot="bun">
```shell
bun run qwik add styled-vanilla-extract
```
</span>
</PackageManagerTabs>

<Note>While extremely popular, emotion and other CSS-in-JS libs are not the best choice for Qwik. [They are not optimized for runtime performance and they don't have a good SSR streaming support](https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b), leading to a degraded server and client performance.</Note>

## Styled-components

Using the same integration, you have a styled-components powered by Vanilla Extract, use the exported `styled` function to create your components.

```tsx title="styles.css.ts"
import { styled } from 'styled-vanilla-extract/qwik';

export const BlueBox = styled.div`
  display: block;
  width: 100%;
  height: 500px;
  background: blue;
`;
```

```tsx title="component.tsx"
import { BlueBox } from './styles.css';

export const Cmp = component$(() => {
  return <BlueBox />;
});
```
