Combine Bootstrap 5 with Headless UI in React Server Components

I was looking for a CSS framework that could be used for React and server side rendering. Tailwind is the most used option, but sometimes I just want to use some existing components to get started more quickly. But most React frameworks don't really work yet with server rendering.

A very good CSS framework already exists, Bootstrap. Why not use that?

The javascript part of Bootstrap is not very composable with React, but there is also a good existing framework for React Components, Headless UI.

The instructions below are for combining those in Next.js. I use plain Bootstrap classes for server rendering and Headless UI for more complex client components.

Install Next.js 13 with Bootstrap 5

First install Next.js:
npx create-next-app@latest

Now add bootstrap:
npm install bootstrap

Next.js has support for sass.

npm install --save-dev sass

Create a styles folder in the root and add sassOptions in next.config.js:

const path = require("path");

/** @type {import('next').NextConfig} */
const nextConfig = {
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },
};

module.exports = nextConfig;

In that styles folder create a new file bootstrap.scss with content like this:

$theme-colors: (
  'primary': #7a45d0bf,
);
$enable-cssgrid: true;
@import '/node_modules/bootstrap/scss/bootstrap.scss';

$theme-colors is for overriding bootstrap default colors.
$enable-cssgrid: true; for the new grid system

Let's use bootstrap now. Import the new stylesheets in app/layout.js.

import "../styles/bootstrap.scss";
import "./globals.css";

Remove the existing styles in app/globals.css and app/page.module.css.

Now replace the content of app/page.js with this:

export default function Home() {
  return (
    <div className="container grid gap-3 mt-3">
      <button className="btn btn-primary">Bootstrap button</button>
    </div>
  );
}

You now have a bootstrap button with a custom color.

Headless UI

Add Headless UI now:
npm install @headlessui/react

As an example I will implement the bootstrap accordion with the disclosure from Headless UI.

Create a new file components/Accordion.jsx,
components is a new folder in the root folder.

Let's add the example from the Headless UI website:

import { Disclosure } from "@headlessui/react";

export default function Accordion() {
  return (
    <Disclosure>
      <Disclosure.Button className="py-2">
        Is team pricing available?
      </Disclosure.Button>
      <Disclosure.Panel className="text-gray-500">
        Yes! You can purchase a license that you can share with your entire
        team.
      </Disclosure.Panel>
    </Disclosure>
  );
}

Now in app/page.jsx use this new component:

import Accordion from "@/components/Accordion";

export default function Home() {
  return (
    <div className="container grid gap-3 mt-3">
      <button className="btn btn-primary g-col-12">Bootstrap button</button>
      <div className="g-col-12">
        <Accordion />
      </div>
    </div>
  );
}

Now you get an error:
You're importing a component that imports client-only. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

The solution is easy. Add "use client"; at the top of components/Accordion.jsx

You have a working accordion now, but not themed.

Theming the accordion

Add bootstrap classes:

"use client";

import { Disclosure } from "@headlessui/react";

export default function Accordion() {
  return (
    <div className="accordion">
      <Disclosure>
        <div className="accordion-item">
          <h2 className="accordion-header">
            <Disclosure.Button className="accordion-button">
              Is team pricing available?
            </Disclosure.Button>
          </h2>
          <Disclosure.Panel className="accordion-collapse">
            <div className="accordion-body">
              Yes! You can purchase a license that you can share with your
              entire team.
            </div>
          </Disclosure.Panel>
        </div>
      </Disclosure>
    </div>
  );
}

It kind of works, but the arrow is not changing on opening/collapsing.

Whe can use the open render prop for this:

"use client";

import { Disclosure } from "@headlessui/react";

export default function Accordion() {
  return (
    <div className="accordion">
      <Disclosure>
        {({ open }) => (
          <div className="accordion-item">
            <h2 className="accordion-header">
              <Disclosure.Button
                className={`accordion-button ${open ? "" : "collapsed"}`}
              >
                Is team pricing available?
              </Disclosure.Button>
            </h2>
            <Disclosure.Panel className="accordion-collapse">
              <div className="accordion-body">
                Yes! You can purchase a license that you can share with your
                entire team.
              </div>
            </Disclosure.Panel>
          </div>
        )}
      </Disclosure>
    </div>
  );
}

This works. Now add an extra disclosure for the final result:

"use client";

import { Disclosure } from "@headlessui/react";

export default function Accordion() {
  return (
    <div className="accordion">
      <Disclosure>
        {({ open }) => (
          <div className="accordion-item">
            <h2 className="accordion-header">
              <Disclosure.Button
                className={`accordion-button ${open ? "" : "collapsed"}`}
              >
                First item
              </Disclosure.Button>
            </h2>
            <Disclosure.Panel className="accordion-collapse">
              <div className="accordion-body">
                This is the content of the first item.
              </div>
            </Disclosure.Panel>
          </div>
        )}
      </Disclosure>

      <Disclosure>
        {({ open }) => (
          <div className="accordion-item">
            <h2 className="accordion-header">
              <Disclosure.Button
                className={`accordion-button ${open ? "" : "collapsed"}`}
              >
                Second item
              </Disclosure.Button>
            </h2>
            <Disclosure.Panel className="accordion-collapse">
              <div className="accordion-body">
                This is the content of the second item.
              </div>
            </Disclosure.Panel>
          </div>
        )}
      </Disclosure>
    </div>
  );
}

You should now have something like this:

This is just an example. You can make this component more reusable by adding props for the content. This makes it useable from server components like explained here