---
title: Integrate React with Storyblok
description: This guide walks you through integrating Storyblok as a headless CMS, fetching content, and building components to render it effectively in your React project.
url: https://storyblok.com/docs/guides/react
---

# Integrate React with Storyblok

Use Storyblok to manage the content of your React application.

> [!NOTE]
> This guide has been tested with the following package versions:
> 
> -   `react@19.2.4`
> -   `react-dom@19.2.4`
> -   `react-router@7.13.1`
> -   `@storyblok/react@6.1.0`
> -   Node.js v24.7.0

## Setup

Create a new React project in a few simple steps by following the [Vite](https://vite.dev/guide/#scaffolding-your-first-vite-project) guide documentation.

If you already have a Storyblok account, visit [app.storyblok.com](http://app.storyblok.com/#/signup) or [log in with GitHub](https://github.com/login?client_id=Iv23liC8pLXD6VcT2EbS&return_to=%2Flogin%2Foauth%2Fauthorize%3Fclient_id%3DIv23liC8pLXD6VcT2EbS%26redirect_uri%3Dhttps%253A%252F%252Fapp.storyblok.com%252F#/login) to continue.

Create a [new blank space](https://app.storyblok.com/#/me/spaces/new?tab=select-plan) to follow the tutorial from scratch, or start from the [core blueprint](https://app.storyblok.com/#/spaces/new/blueprint?blueprintReference=starter).

[Create one and start a free Storyblok space](https://app.storyblok.com/#/signup) No Storyblok account yet?

## Installation

In your terminal, `cd` into your React project and install the `@storyblok/react` package.

```bash
npm install @storyblok/react
```

In the root of your project, create a `.env` file with the access token from your space.

```bash
VITE_STORYBLOK_DELIVERY_API_TOKEN=fqc3tdIuC8djNwEYl5cE5Att
```

> [!TIP]
> Learn how to [retrieve an access token](https://www.storyblok.com/docs/concepts/access-tokens#read-only-access-tokens) for your Storyblok space.

Initialize the Storyblok client by updating the `main.jsx` file:

src/main.jsx

```javascript
import { storyblokInit, apiPlugin } from '@storyblok/react';

storyblokInit({
  accessToken: import.meta.env.VITE_STORYBLOK_DELIVERY_API_TOKEN,
  use: [apiPlugin],
  apiOptions: {
    region: 'eu', // Choose the correct region from your Space.
  },
});
```

> [!WARNING]
> Ensure to set the correct `region` value depending on the server location of your Storyblok space. Learn more in the [@storyblok/js package reference](https://www.storyblok.com/docs/libraries/js/js-sdk).

The Storyblok package will give you access to features like fetching, components registration and bridge available across your project.

## Fetch a single story

In your `App.jsx` file, call the `useStoryblok` hook to fetch a story’s data.  

> [!NOTE]
> Using the correct export
> 
> The `@storyblok/react` SDK has different exports for various rendering modes. For this React guide, we are building a client-side rendered single-page application, so we will use the standard import from `@storyblok/react`. Learn more about the library's rendering modes in the [documentation](/docs/libraries/js/react-sdk).

src/App.jsx

```javascript
import { StoryblokComponent, useStoryblok } from '@storyblok/react';

export default function App() {
  const story = useStoryblok('home', {
    version: 'draft'
  });

  if (!story?.content) {
    return <div>Loading...</div>;
  }

  return <StoryblokComponent blok={story.content} />;
}
```

This page fetches the home story of your Storyblok space using the convenient `useStoryblok` composable.

The `StoryblokComponent` dynamically renders content type and nestable blocks. In this case, it looks for the content type block of the home story.

> [!TIP]
> This element detects the content type of the story for you, in this case `page` and looks for a component of the same name to render the story. Learn more in the [Storyblok React package](https://www.storyblok.com/docs/libraries/js/react-sdk) reference.

## Create and register blocks

Create a `src/storyblok/Page.jsx` to render all stories of the `page` content type.

src/storyblok/Page.jsx

```javascript
import { StoryblokComponent } from '@storyblok/react';

export default function Page({ blok }) {
  return (
    <main>
      {blok.body?.map((nestedBlok) => (
        <StoryblokComponent blok={nestedBlok} key={nestedBlok._uid} />
      ))}
    </main>
  );
}
```

Using `StoryblokComponent` iterate through the `body` field and render the blocks in it.

Stories might contain a `body` or similar field which consists of an array with several blocks of custom types (for example, Feature, Teaser, Grid) in it.

Create the code for these components as follows.

src/storyblok/Feature.jsx

```javascript
export default function Feature({ blok }) {
  return (
    <div className="feature">
      <span>{blok.name}</span>
    </div>
  );
}
```

src/storyblok/Teaser.jsx

```javascript
export default function Teaser({ blok }) {
  return (
    <div className="teaser">
      <h2>{blok.headline}</h2>
    </div>
  );
}
```

src/storyblok/Grid.jsx

```javascript
import { StoryblokComponent } from '@storyblok/react';

export default function Grid({ blok }) {
  return (
    <div className="grid">
      {blok.columns.map((nestedBlok) => (
        <StoryblokComponent blok={nestedBlok} key={nestedBlok._uid} />
      ))}
    </div>
  );
}
```

Similar to `Page.jsx`, `Grid.jsx` iterates over the `columns` block field.

Add all these new components to your app within the `main.jsx` file.

src/main.js

```javascript
import { createRoot } from 'react-dom/client';
import { StrictMode } from 'react';
import './index.css';
import App from "./App"
import { storyblokInit, apiPlugin } from '@storyblok/react';

import Page from './storyblok/Page';
import Teaser from './storyblok/Teaser';
import Feature from './storyblok/Feature';
import Grid from './storyblok/Grid';

storyblokInit({
  accessToken: import.meta.env.VITE_STORYBLOK_ACCESS_TOKEN,
  use: [apiPlugin],
  components: {
    page: Page,
    teaser: Teaser,
    feature: Feature,
    grid: Grid,
  },
  apiOptions: {
    region: 'eu',
  },
});

const root = document.getElementById('root');

createRoot(root).render(
  <StrictMode>
    <App/>
  </StrictMode>
);
```

Run the server and visit the site in your browser.

```bash
npm run dev
```

## Related resources

[Storyblok's React Blueprint Repository](https://github.com/storyblok/blueprint-core-react)

[@storyblok/react Package Reference](https://www.storyblok.com/docs/libraries/js/react-sdk)

[Concept: Blocks](/docs/concepts/blocks)

[Content Delivery API: Retrieve a Single Story](/docs/api/content-delivery/v2/stories/retrieve-a-single-story)

[React Docs](https://react.dev/learn)

  

## Pagination

-   [Next: Visual Preview in React](/docs/guides/react/visual-preview)