CoreUI + React + Astro

This guide walks you through adding CoreUI for React.js to an Astro project, where CoreUI components run as React islands.

Create a project

Scaffold a new Astro project with the official command, then add the React integration — it installs React and wires up the renderer for you.

npm create astro@latest my-app
cd my-app
npx astro add react

Install CoreUI

Install the React components together with the CSS library that styles them.

npm install @coreui/react @coreui/coreui

npm install @coreui/react-pro @coreui/coreui-pro

Import styles

Import the stylesheet in your layout’s frontmatter — for example src/layouts/Layout.astro — so every page using the layout loads it.

---
import '@coreui/coreui/dist/css/coreui.min.css'
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My App</title>
  </head>
  <body>
    <slot />
  </body>
</html>

---
import '@coreui/coreui-pro/dist/css/coreui.min.css'
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My App</title>
  </head>
  <body>
    <slot />
  </body>
</html>

Use components

Create a React component, for example src/components/HelloCoreUI.tsx.

import { CButton } from '@coreui/react'

export default function HelloCoreUI() {
  return <CButton theme="primary">Primary button</CButton>
}

import { CButton } from '@coreui/react-pro'

export default function HelloCoreUI() {
  return <CButton theme="primary">Primary button</CButton>
}

Then render it in an Astro page — for example src/pages/index.astro — with a client directive so it hydrates in the browser.

---
import Layout from '../layouts/Layout.astro'
import HelloCoreUI from '../components/HelloCoreUI'
---

<Layout>
  <HelloCoreUI client:load />
</Layout>

Start the development server and open the URL it prints to see the button rendered with CoreUI’s styles.

npm run dev