Flowbite, SolidJS & TypeScript Integration

I recently decided to learn SolidJS, and I am looking forward to using it for a prototype I have already started building. My current focus is the application’s functionality, not styling. Therefore, I wanted to find a UI framework that worked well with SolidJS and had a good default theme. After some searching and experimenting I decided to go with Flowbite.

I didn't find a project template or instructions on creating a SolidJS/TypeScript project with Flowbite. However, with a little research, I came up with a working template. Here's how to configure it.

Start with a template

The starting point is the ts-tailwindcss template from solidjs GitHub repository. This template uses Vite and includes Tailwind CSS. Tailwind is required because Flowbite is built on top of Tailwind.

Download the template with the following command:

npx degit solidjs/templates/ts-tailwindcss my-app

Install dependencies and launch the site:

cd my-app
npm install
npm run dev

Configuration

Adding Flowbite

Now we are ready to add Flowbite to the project. To do that, we need to make changes in three files.

package.json
tailwind.config.ts
tsconfig.json

package.json

In addition to the flowbite package, @types/node is needed so that NodeJS's require function can be used when we add the Flowbite plugin to tailwind.config.ts.

Add the 'flowbite' and '@types/node' packages:

npm install flowbite
npm install -D @types/node

tailwind.config.ts

Add the flowbite plugin to the plugins node.
Add ./node_modules/flowbite/**/*.js to the content node.

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx,css,md,mdx,html,json,scss}',
    './node_modules/flowbite/**/*.js', // add this line
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin') // add this line
  ],
};

export default config;

tsconfig.json

Add "node" to types under compilerOptions.

"types": ["vite/client", "node"],

A Quick Test

We have completed the configuration. Let's check that the project still runs. Run the below command. The page will look the same as it did in the first test.

npm run dev

Giving ourselves a bit more to look at

Let's add some more content to the home page. Open src/App.tsx and replace all the code with the code below:

import type { Component } from "solid-js";

const App: Component = () => {
  return (
    <div class="container mx-auto">
      <p class="text-4xl text-green-700 text-center py-20">SolidJS, Flowbite & TypesScript</p>
      {/* We added this <p> */}
      <p class="text-2xl mb-20"> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </div>
  )
}

export default App;

A Fuller Test - by Creating a Component

Let's create a component to verify the Flowbite default styles are working properly.

We will implement three variations of Flowbite's Default Alert. The variations will be 'info', 'danger', and 'success'.

Create a new folder under src named components
In src/components create a new file named Alert.tsx
Copy and paste the following code into Alert.tsx

const infoClass = "p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400"
const dangerClass = "p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400"
const successClass = "p-4 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400"

interface AlertProps {
  children: any;
  title: string;
  type?: "info" | "danger" | "success";
}

export default function Alert({ children, title, type = "info" }: AlertProps) {
  const getClass = () => {
    switch (type) {
      case "info":
        return infoClass;
      case "danger":
        return dangerClass;
      case "success":
        return successClass;
      default:
        return infoClass;
    }
  }

  return (
    <div
      class={getClass()}
      role="alert"
    >
      <span class="font-medium">{title}</span>
      {children}
    </div>
  );
}

Next, we will add three instances of our Alert component to App.tsx.

import type { Component } from "solid-js";
import Alert from "./components/Alert"; // add this line

const App: Component = () => {
  return (
    <div class="container mx-auto">
      <p class="text-4xl text-green-700 text-center py-20">
        SolidJS, Flowbite & TypesScript
      </p>
      <div class="mb-20">
        <p class="text-2xl">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      {/* We added the below Alerts */}
      <Alert
        title="This is the title"
        // type="info" is the default, so we don't need to specify it.
      >
        <p>This is the new alert</p>
      </Alert>
      <Alert title="This is the title" type="danger">
        <p>This is the new alert</p>
      </Alert>
      <Alert title="This is the title" type="success">
        <p>This is the new alert</p>
      </Alert>
    </div>
  );
};

export default App;

The page should now look like this:

Done!

References

I used the following repositories for reference:

SolidJS has official templates, including a SolidJS / TypeScript template. It seemed the best candidate to build upon, so I used it as a starting point and added Flowbite to it.
Flowbite has a SolidJS example, but it is JavaScript, not TypeScript.
Flowbite also has a Typescript example but it uses HTML, not SolidJS.

Other sources:

Carl Becker's Blog