docs(app/docs/components/*): add Theme section to each component's docs

For now, we're just including the snippet of Tailwind CSS classes that are applied to each key in
the component's theme. That makes it easy to figure out where you need to make tweaks to the theme.
I'm not sure how we can make it more useful yet - we will want to get feedback on this.

app/docs/components/accordion/accordion.mdx

@@ -1,4 +1,4 @@
-import { Accordion } from '~/src/components/Accordion';
+import { Accordion, theme } from '~/src';
 import { CodePreview } from '~/app/components/code-preview';
 
 ## Table of Contents
@@ -165,6 +165,14 @@ Use this example to automatically collapse all of the accordion panels by passin
   </Accordion>
 </CodePreview>
 
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<pre className="language-tsx">
+  <code>{JSON.stringify(theme.accordion, null, 2)}</code>
+</pre>
+
 ## References
 
 - [Flowbite Accordion](https://flowbite.com/docs/components/accordion/)

app/docs/components/alert/alert.mdx

@@ -1,7 +1,7 @@
+import { HiInformationCircle } from 'react-icons/hi';
 import { CodePreview } from '~/app/components/code-preview';
+import { Alert, theme } from '~/src';
 import { ExampleAdditionalContent } from './additional-content.tsx';
-import { HiInformationCircle } from 'react-icons/hi';
-import { Alert } from '~/src';
 
 ## Table of Contents
 
@@ -109,6 +109,14 @@ This is an example with all of the available options and props for the alert com
   </Alert>
 </CodePreview>
 
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<pre className="language-tsx">
+  <code>{JSON.stringify(theme.alert, null, 2)}</code>
+</pre>
+
 ## References
 
 - [Flowbite Alerts](https://flowbite.com/docs/components/alerts/)

app/docs/components/avatar/avatar.mdx

@@ -1,5 +1,5 @@
 import { CodePreview } from '~/app/components/code-preview';
-import { Avatar, Dropdown } from '~/src';
+import { Avatar, Dropdown, theme } from '~/src';
 import Image from 'next/image';
 
 ## Table of Contents
@@ -199,6 +199,14 @@ You can override the default image element by passing the `img` prop to the `<Av
   </div>
 </CodePreview>
 
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<pre className="language-tsx">
+  <code>{JSON.stringify(theme.avatar, null, 2)}</code>
+</pre>
+
 ## References
 
 - [Flowbite Avatar](https://flowbite.com/docs/components/avatar/)

app/docs/components/badge/badge.mdx

@@ -1,6 +1,6 @@
 import { HiCheck, HiClock } from 'react-icons/hi';
 import { CodePreview } from '~/app/components/code-preview';
-import { Badge } from '~/src';
+import { Badge, theme } from '~/src';
 
 ## Table of Contents
 
@@ -105,6 +105,14 @@ You can choose from `xs` and `sm` sizes.
   </Badge>
 </CodePreview>
 
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<pre className="language-tsx">
+  <code>{JSON.stringify(theme.badge, null, 2)}</code>
+</pre>
+
 ## References
 
 - [Flowbite Badge](https://flowbite.com/docs/components/badge/)

app/docs/components/breadcrumb/breadcrumb.mdx

@@ -1,6 +1,6 @@
-import { HiHome } from 'react-icons/hi';
 import { CodePreview } from '~/app/components/code-preview';
-import { Breadcrumb } from '~/src';
+import { Breadcrumb, theme } from '~/src';
+import { HiHome } from 'react-icons/hi';
 
 ## Table of Contents
 
@@ -44,6 +44,14 @@ You can add a solid background style to the breadcrumb component by adding the `
   </Breadcrumb>
 </CodePreview>
 
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<pre className="language-tsx">
+  <code>{JSON.stringify(theme.breadcrumb, null, 2)}</code>
+</pre>
+
 ## References
 
 - [Flowbite Breadcrumbs](https://flowbite.com/docs/components/breadcrumb/)

app/docs/components/button-group/button-group.mdx

@@ -1,6 +1,6 @@
-import { HiAdjustments, HiCloudDownload, HiUserCircle } from 'react-icons/hi';
 import { CodePreview } from '~/app/components/code-preview';
-import { Button } from '~/src';
+import { Button, theme } from '~/src';
+import { HiAdjustments, HiCloudDownload, HiUserCircle } from 'react-icons/hi';
 
 ## Table of Contents
 
@@ -163,6 +163,14 @@ Here's an example on how you can use both the outline and icon props together.
   </Button.Group>
 </CodePreview>
 
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<pre className="language-tsx">
+  <code>{JSON.stringify(theme.buttonGroup, null, 2)}</code>
+</pre>
+
 ## References
 
 - [Flowbite Button Group](https://flowbite.com/docs/components/button-group/)

app/docs/components/button/button.mdx

@@ -1,6 +1,6 @@
-import { HiOutlineArrowRight, HiShoppingCart } from 'react-icons/hi';
 import { CodePreview } from '~/app/components/code-preview';
-import { Button } from '~/src';
+import { Button, theme } from '~/src';
+import { HiOutlineArrowRight, HiShoppingCart } from 'react-icons/hi';
 
 ## Table of Contents
 
@@ -205,6 +205,14 @@ You can disable the button by adding the `disabled` property to the `<Button>` c
   <Button disabled>Disabled button</Button>
 </CodePreview>
 
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<pre className="language-tsx">
+  <code>{JSON.stringify(theme.button, null, 2)}</code>
+</pre>
+
 ## References
 
 - [Flowbite Buttons](https://flowbite.com/docs/components/buttons/)

app/docs/components/card/card.mdx

@@ -1,5 +1,5 @@
 import { CodePreview } from '~/app/components/code-preview';
-import { Button, Card, Checkbox, Dropdown, Label, TextInput } from '~/src';
+import { Button, Card, Checkbox, Dropdown, Label, TextInput, theme } from '~/src';
 import Image from 'next/image';
 
 ## Table of Contents
@@ -795,6 +795,14 @@ This component can be used for crypto and web3 related projects where you can ch
   </Card>
 </CodePreview>
 
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<pre className="language-tsx">
+  <code>{JSON.stringify(theme.card, null, 2)}</code>
+</pre>
+
 ## References
 
 - [Flowbite Card](https://flowbite.com/docs/components/card/)

app/docs/components/carousel/carousel.mdx

@@ -1,5 +1,5 @@
 import { CodePreview } from '~/app/components/code-preview';
-import { Carousel } from '~/src';
+import { Carousel, theme } from '~/src';
 
 ## Table of Contents
 
@@ -104,6 +104,14 @@ Instead of images you can also use any type of markup and content inside the car
   </Carousel>
 </CodePreview>
 
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<pre className="language-tsx">
+  <code>{JSON.stringify(theme.carousel, null, 2)}</code>
+</pre>
+
 ## References
 
 - [Flowbite Carousel](https://flowbite.com/docs/components/carousel/)

app/docs/components/dropdown/dropdown.mdx

@@ -1,6 +1,6 @@
-import { HiCog, HiCurrencyDollar, HiLogout, HiViewGrid } from 'react-icons/hi';
 import { CodePreview } from '~/app/components/code-preview';
-import { Dropdown } from '~/src';
+import { Dropdown, theme } from '~/src';
+import { HiCog, HiCurrencyDollar, HiLogout, HiViewGrid } from 'react-icons/hi';
 
 ## Table of Contents
 
@@ -178,6 +178,14 @@ Add a custom `onClick` event handler to the `<Dropdown.Item>` component to handl
   </Dropdown>
 </CodePreview>
 
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<pre className="language-tsx">
+  <code>{JSON.stringify(theme.dropdown, null, 2)}</code>
+</pre>
+
 ## References
 
 - [Flowbite Dropdown](https://flowbite.com/docs/components/dropdowns/)

app/docs/components/footer/footer.mdx

@@ -1,6 +1,6 @@
-import { BsDribbble, BsFacebook, BsGithub, BsInstagram, BsTwitter } from 'react-icons/bs';
 import { CodePreview } from '~/app/components/code-preview';
-import { Footer } from '~/src';
+import { Footer, theme } from '~/src';
+import { BsDribbble, BsFacebook, BsGithub, BsInstagram, BsTwitter } from 'react-icons/bs';
 
 ## Table of Contents
 
@@ -180,6 +180,14 @@ Add sitemap links to the footer component by using the `<Footer.LinkGroup>` and
   </Footer>
 </CodePreview>
 
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<pre className="language-tsx">
+  <code>{JSON.stringify(theme.footer, null, 2)}</code>
+</pre>
+
 ## References
 
 - [Flowbite Footer](https://flowbite.com/docs/components/footer/)

app/docs/components/forms/forms.mdx

@@ -12,6 +12,7 @@ import {
   Textarea,
   TextInput,
   ToggleSwitch,
+  theme,
 } from '~/src';
 
 ## Table of Contents
@@ -497,6 +498,26 @@ The `<RangeSlider>` component ca be used to allow users to select a number based
   </div>
 </CodePreview>
 
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<pre className="language-tsx">
+  <code>
+    {JSON.stringify(
+      Object.fromEntries(
+        Object.entries(theme).filter(([key]) =>
+          ['checkbox', 'fileInput', 'label', 'radio', 'rangeSlider', 'textarea', 'textInput', 'toggleSwitch'].includes(
+            key,
+          ),
+        ),
+      ),
+      null,
+      2,
+    )}
+  </code>
+</pre>
+
 ## References
 
 - [Flowbite Forms](https://flowbite.com/docs/components/forms/)

app/docs/components/list-group/list-group.mdx

@@ -1,6 +1,6 @@
-import { HiCloudDownload, HiInbox, HiOutlineAdjustments, HiUserCircle } from 'react-icons/hi';
 import { CodePreview } from '~/app/components/code-preview';
-import { ListGroup } from '~/src';
+import { ListGroup, theme } from '~/src';
+import { HiCloudDownload, HiInbox, HiOutlineAdjustments, HiUserCircle } from 'react-icons/hi';
 
 ## Table of Contents
 
@@ -78,6 +78,14 @@ Add icons to the list group items by using the `icon` prop on the `ListGroup.Ite
   </ListGroup>
 </CodePreview>
 
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<pre className="language-tsx">
+  <code>{JSON.stringify(theme.listGroup, null, 2)}</code>
+</pre>
+
 ## References
 
 - [Flowbite List Group](https://flowbite.com/docs/components/list-group/)

app/docs/components/modal/modal.mdx

@@ -1,7 +1,7 @@
-import { HiOutlineExclamationCircle } from 'react-icons/hi';
 import { CodePreview } from '~/app/components/code-preview';
-import { Button, Checkbox, Label, Modal, Select, TextInput } from '~/src';
+import { Button, Checkbox, Label, Modal, Select, TextInput, theme } from '~/src';
 import Link from 'next/link';
+import { HiOutlineExclamationCircle } from 'react-icons/hi';
 
 ## Table of Contents
 
@@ -479,6 +479,14 @@ To set the position of the modal component relative to the page you can use the
   </Modal>
 </CodePreview>
 
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<pre className="language-tsx">
+  <code>{JSON.stringify(theme.modal, null, 2)}</code>
+</pre>
+
 ## References
 
 - [Flowbite Modal](https://flowbite.com/docs/components/modal/)

app/docs/components/navbar/navbar.mdx

@@ -1,6 +1,6 @@
-import Link from 'next/link';
 import { CodePreview } from '~/app/components/code-preview';
-import { Avatar, Button, Dropdown, Navbar } from '~/src';
+import { Avatar, Button, Dropdown, Navbar, theme } from '~/src';
+import Link from 'next/link';
 
 ## Table of Contents
 
@@ -113,6 +113,14 @@ Use this example to feature a dropdown menu when clicking on the user avatar ins
   </Navbar>
 </CodePreview>
 
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<pre className="language-tsx">
+  <code>{JSON.stringify(theme.navbar, null, 2)}</code>
+</pre>
+
 ## References
 
 - [Flowbite Navbar](https://flowbite.com/docs/components/navbar/)

app/docs/components/pagination/pagination.mdx

@@ -1,5 +1,5 @@
 import { CodePreview } from '~/app/components/code-preview';
-import { Pagination } from '~/src';
+import { Pagination, theme } from '~/src';
 
 ## Table of Contents
 
@@ -142,6 +142,14 @@ Customize the text for the next and previous buttons by passing the `previousLab
   </div>
 </CodePreview>
 
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<pre className="language-tsx">
+  <code>{JSON.stringify(theme.pagination, null, 2)}</code>
+</pre>
+
 ## References
 
 - [Flowbite Pagination](https://flowbite.com/docs/components/pagination/)