API Reference for React

Installation#

npm install @scalar/api-reference-react

Usage#

The API Reference package is written in Vue. That shouldn't stop you from using it in React, though. We have created a client side wrapper in React:

[!WARNING] This is untested on SSR/SSG!

import { ApiReferenceReact } from '@scalar/api-reference-react'
import '@scalar/api-reference-react/style.css'
 
function App() {
  return (
    <ApiReferenceReact
      configuration={{
        url: 'https://registry.scalar.com/@scalar/apis/galaxy?format=yaml',
      }}
    />
  )
}
 
export default App

Example#

You can find an example in this repo under examples/react

Props#

ApiReference only takes one prop which is the configuration object.

configuration: ReferenceProps#

Read more about the available configuration options.

Guide#

Create a new React project (optional)#

There are tons of ways to set up a new React project. Here is an easy one using Vite to get you started:

[!NOTE] We're using pnpm here. You can also just use npm, yarn or whatever you're used to. ✌️

pnpm create vite my-awesome-app

You'll see some questions that you can answer to your liking. We just picked React here:

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

And we're big TypeScript fans, but used plain JavaScript for the sake of this tutorial:

? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
❯   JavaScript
    JavaScript + SWC
    Remix ↗

Okay, your new React project is ready. Jump into the folder, install the dependencies and let's go!

cd my-awesome-app
pnpm install
pnpm run dev

This boots your development server. Open http://localhost:5173/ to see the beautiful Vite/React example page. That wasn't too hard, was it? :)

Render your OpenAPI document with Scalar#

Cool, you've got your (existing) React project and want to render an API reference. That's awesome! You're just two steps away. First, install our package for React:

pnpm add @scalar/api-reference-react

And then, add a new component or just replace the main.jsx with the following content:

// src/main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
 
import { ApiReferenceReact } from '@scalar/api-reference-react'
import '@scalar/api-reference-react/style.css'
 
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <ApiReferenceReact
      configuration={{
        url: 'https://registry.scalar.com/@scalar/apis/galaxy?format=yaml',
      }}
    />
  </StrictMode>,
)

Open http://localhost:5173/ and you should see your API reference. Done!

Using with Tailwind CSS#

If your React project uses Tailwind CSS v4, Scalar's CSS layers may conflict with Tailwind's layer ordering. To fix this, declare the layer order in your main CSS file before importing Tailwind:

/* src/index.css */
@layer scalar-base, scalar-theme, scalar-config, theme, base, components, utilities;
@import "tailwindcss";

This ensures Tailwind's utility classes always take priority over Scalar's styles.

You can also map Scalar's CSS variables to your Tailwind theme to make the API Reference match the rest of your app:

:root {
  --scalar-background-1: var(--color-background);
  --scalar-color-1: var(--color-foreground);
  --scalar-color-accent: var(--color-primary);
}

For full details, see Embedding with CSS Frameworks.