themesberg · SutuSebastian · Jun 21, 2024 · Jun 21, 2024 · Jun 21, 2024 · Jun 21, 2024
diff --git a/.changeset/purple-rocks-divide.md b/.changeset/purple-rocks-divide.md
@@ -0,0 +1,6 @@
+---
+"create-flowbite-react": patch
+"flowbite-react": patch
+---
+
+add `AdonisJS` integration guide
diff --git a/apps/web/components/quickstart/integration-guides.tsx b/apps/web/components/quickstart/integration-guides.tsx
@@ -16,6 +16,7 @@ const GUIDES: Guide[] = [
   { name: "Remix", slug: "/docs/guides/remix", logo: "remix.svg", invert: true },
   { name: "Astro", slug: "/docs/guides/astro", logo: "astro.svg", invert: true },
   { name: "Gatsby", slug: "/docs/guides/gatsby", logo: "gatsby.svg" },
+  { name: "AdonisJS", slug: "/docs/guides/adonis-js", logo: "adonis-js.svg", className: "p-2", invert: true },
   { name: "RedwoodJS", slug: "/docs/guides/redwood-js", logo: "redwood-js.svg", className: "p-2" },
   { name: "Laravel", slug: "/docs/guides/laravel", logo: "laravel.svg" },
   { name: "Vite", slug: "/docs/guides/vite", logo: "vite.svg" },

diff --git a/apps/web/content/docs/guides/adonis-js.mdx b/apps/web/content/docs/guides/adonis-js.mdx
@@ -0,0 +1,149 @@
+---
+title: Use with AdonisJS - Flowbite React
+description: Learn how to install Flowbite React for your AdonisJS project and start developing modern full-stack web applications
+---
+
+## Using the CLI
+
+Run the following command to scaffold a new `Flowbite React` project using `AdonisJS`:
+
+```bash
+# npm
+npm create flowbite-react@latest -- --template adonisjs
+
+# yarn
+yarn create flowbite-react --template adonisjs
+
+# pnpm
+pnpm create flowbite-react@latest --template adonisjs
+
+# bun
+bun create flowbite-react@latest --template adonisjs
+```
+
+<TextDivider>Manual Installation</TextDivider>
+
+## Create project
+
+Run the following command to create a new AdonisJS project using the CLI:
+
+```bash
+npm init adonisjs@latest -- -K=inertia --adapter=react --ssr --install
+```
+
+## Setup Tailwind CSS
+
+1. Install `tailwindcss` and its peer dependencies:
+
+```bash
+npm i -D tailwindcss postcss autoprefixer
+```
+
+2. Generate `tailwind.config.js` and `postcss.config.js` files:
+
+```bash
+npx tailwindcss init -p
+```
+
+3. Add the paths to all of your template files in your `tailwind.config.js` file:
+
+```js {3}
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./inertia/**/*.{js,ts,jsx,tsx}", "./resources/**/*.{edge,js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+```
+
+4. Add the `@tailwind` directives for each of Tailwind's layers to your `./inertia/css/app.css` file:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+## Install Flowbite React
+
+1. Run the following command to install `flowbite-react`:
+
+```bash
+npm i flowbite-react
+```
+
+2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.js`:
+
+```js {1,7,11}
+import flowbite from "flowbite-react/tailwind";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    // ...
+    flowbite.content(),
+  ],
+  plugins: [
+    // ...
+    flowbite.plugin(),
+  ],
+};
+```
+
+## Dark mode
+
+In server side rendered applications, such as AdonisJS, to avoid page flicker (if `dark` mode is set) before AdonisJS hydrates the content, `ThemeModeScript` component must be rendered (see implementation below).
+
+`ThemeModeScript` renders a script tag that sets `dark` or removes `dark` from `<html>` element before hydration occurs.
+
+### Configure
+
+1. Import and render `ThemeModeScript` in the return body of `setup` function:
+
+```tsx {4,15-20}
+// inertia/app/ssr.tsx
+
+import { createInertiaApp } from "@inertiajs/react";
+import { ThemeModeScript } from "flowbite-react";
+import ReactDOMServer from "react-dom/server";
+
+export default function render(page: any) {
+  return createInertiaApp({
+    page,
+    render: ReactDOMServer.renderToString,
+    resolve: (name) => {
+      const pages = import.meta.glob("../pages/**/*.tsx", { eager: true });
+      return pages[`../pages/${name}.tsx`];
+    },
+    setup: ({ App, props }) => (
+      <>
+        <ThemeModeScript />
+        <App {...props} />
+      </>
+    ),
+  });
+}
+```
+
+## Try it out
+
+Now that you have successfully installed Flowbite React you can start using the components from the library.
+
+```tsx
+// inertia/pages/home.tsx
+
+import { Button } from "flowbite-react";
+
+export default function Home() {
+  return <Button>Click me</Button>;
+}
+```
+
+<hr />
+
+## Templates
+
+- [Github](https://github.com/themesberg/flowbite-react-template-adonisjs)
+- [StackBlitz](https://stackblitz.com/edit/flowbite-react-template-adonisjs)
diff --git a/apps/web/data/docs-sidebar.ts b/apps/web/data/docs-sidebar.ts
@@ -18,9 +18,9 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
     items: [
       { title: "Introduction", href: "/docs/getting-started/introduction" },
       { title: "Quickstart", href: "/docs/getting-started/quickstart" },
-      { title: "CLI", href: "/docs/getting-started/cli", isNew: true },
-      { title: "Editor Setup", href: "/docs/getting-started/editor-setup", isNew: true },
-      { title: "Server Components", href: "/docs/getting-started/server-components", isNew: true },
+      { title: "CLI", href: "/docs/getting-started/cli" },
+      { title: "Editor Setup", href: "/docs/getting-started/editor-setup" },
+      { title: "Server Components", href: "/docs/getting-started/server-components" },
       { title: "License", href: "/docs/getting-started/license" },
       { title: "Changelog", href: "https://github.com/themesberg/flowbite-react/releases", isExternal: true },
       { title: "Contributing", href: "/docs/getting-started/contributing" },
@@ -30,15 +30,16 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
     title: "integration guides",
     href: "/guides/",
     items: [
-      { title: "Next.js", href: "/docs/guides/next-js", isNew: true },
-      { title: "Remix", href: "/docs/guides/remix", isNew: true },
-      { title: "Astro", href: "/docs/guides/astro", isNew: true },
-      { title: "Gatsby", href: "/docs/guides/gatsby", isNew: true },
-      { title: "RedwoodJS", href: "/docs/guides/redwood-js", isNew: true },
-      { title: "Laravel", href: "/docs/guides/laravel", isNew: true },
-      { title: "Vite", href: "/docs/guides/vite", isNew: true },
-      { title: "Parcel", href: "/docs/guides/parcel", isNew: true },
-      { title: "Create React App", href: "/docs/guides/create-react-app", isNew: true },
+      { title: "Next.js", href: "/docs/guides/next-js" },
+      { title: "Remix", href: "/docs/guides/remix" },
+      { title: "Astro", href: "/docs/guides/astro" },
+      { title: "Gatsby", href: "/docs/guides/gatsby" },
+      { title: "AdonisJS", href: "/docs/guides/adonis-js", isNew: true },
+      { title: "RedwoodJS", href: "/docs/guides/redwood-js" },
+      { title: "Laravel", href: "/docs/guides/laravel" },
+      { title: "Vite", href: "/docs/guides/vite" },
+      { title: "Parcel", href: "/docs/guides/parcel" },
+      { title: "Create React App", href: "/docs/guides/create-react-app" },
     ],
   },
   {
@@ -57,19 +58,19 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
       { title: "Alert", href: "/docs/components/alert" },
       { title: "Avatar", href: "/docs/components/avatar" },
       { title: "Badge", href: "/docs/components/badge" },
-      { title: "Banner", href: "/docs/components/banner", isNew: true },
+      { title: "Banner", href: "/docs/components/banner" },
       { title: "Breadcrumb", href: "/docs/components/breadcrumb" },
       { title: "Button", href: "/docs/components/button" },
       { title: "Button group", href: "/docs/components/button-group" },
       { title: "Card", href: "/docs/components/card" },
       { title: "Carousel", href: "/docs/components/carousel" },
       { title: "Clipboard", href: "/docs/components/clipboard", isNew: true },
-      { title: "Datepicker", href: "/docs/components/datepicker", isNew: true },
+      { title: "Datepicker", href: "/docs/components/datepicker" },
       { title: "Drawer", href: "/docs/components/drawer", isNew: true },
       { title: "Dropdown", href: "/docs/components/dropdown" },
       { title: "Footer", href: "/docs/components/footer" },
       { title: "Forms", href: "/docs/components/forms" },
-      { title: "KBD", href: "/docs/components/kbd", isNew: true },
+      { title: "KBD", href: "/docs/components/kbd" },
       { title: "List group", href: "/docs/components/list-group" },
       { title: "Mega menu", href: "/docs/components/mega-menu", isNew: true },
       { title: "Modal", href: "/docs/components/modal" },
@@ -92,15 +93,15 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
     href: "/forms/",
     items: [
       { title: "File Input", href: "/docs/forms/file-input" },
-      { title: "Floating Label", href: "/docs/forms/floating-label", isNew: true },
+      { title: "Floating Label", href: "/docs/forms/floating-label" },
     ],
   },
   {
     title: "typography",
     href: "/typography/",
     items: [
-      { title: "Blockquote", href: "/docs/typography/blockquote", isNew: true },
-      { title: "List", href: "/docs/typography/list", isNew: true },
+      { title: "Blockquote", href: "/docs/typography/blockquote" },
+      { title: "List", href: "/docs/typography/list" },
       { title: "HR", href: "/docs/typography/hr", isNew: true },
     ],
   },

diff --git a/apps/web/public/logos/adonis-js.svg b/apps/web/public/logos/adonis-js.svg
diff --git a/packages/cli/src/data.ts b/packages/cli/src/data.ts
@@ -5,6 +5,7 @@ export const REPOS: { key: string; name: string; url: string }[] = [
   { key: "remix", name: "Remix", url: "https://github.com/themesberg/flowbite-react-template-remix.git" },
   { key: "astro", name: "Astro", url: "https://github.com/themesberg/flowbite-react-template-astro.git" },
   { key: "gatsby", name: "Gatsby", url: "https://github.com/themesberg/flowbite-react-template-gatsby.git" },
+  { key: "adonisjs", name: "AdonisJS", url: "https://github.com/themesberg/flowbite-react-template-adonisjs.git" },
   { key: "redwoodjs", name: "RedwoodJS", url: "https://github.com/themesberg/flowbite-react-template-redwoodjs.git" },
   { key: "laravel", name: "Laravel", url: "https://github.com/themesberg/flowbite-react-template-laravel.git" },
   { key: "vite", name: "Vite", url: "https://github.com/themesberg/flowbite-react-template-vite.git" },

diff --git a/packages/ui/README.md b/packages/ui/README.md
@@ -84,6 +84,7 @@ To manually install `flowbite-react` into your application, here is a list of th
 - [Remix](https://www.flowbite-react.com/docs/guides/remix)
 - [Astro](https://www.flowbite-react.com/docs/guides/astro)
 - [Gatsby](https://www.flowbite-react.com/docs/guides/gatsby)
+- [AdonisJS](https://www.flowbite-react.com/docs/guides/adonis-js)
 - [RedwoodJS](https://www.flowbite-react.com/docs/guides/redwood-js)
 - [Laravel](https://www.flowbite-react.com/docs/guides/laravel)
 - [Vite](https://www.flowbite-react.com/docs/guides/vite)