diff --git a/CNAME b/CNAME deleted file mode 100644 index d2ec11aae..000000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -flowbite-react.com \ No newline at end of file diff --git a/app/components/code-preview.tsx b/app/components/code-preview.tsx index b34bcbe11..c0681c93a 100644 --- a/app/components/code-preview.tsx +++ b/app/components/code-preview.tsx @@ -18,7 +18,7 @@ interface CodePreviewProps extends PropsWithChildren, ComponentProps<'div'> { title: string; } -export const CodePreview: FC = function ({ children, className, title }) { +export const CodePreview: FC = function ({ children, className }) { const childrenList = Children.toArray(children); let code = childrenList.map((child) => reactElementToJSXString(child, reactElementToJSXStringOptions)).join('\n'); code = deleteJSXSpaces(code); @@ -28,7 +28,6 @@ export const CodePreview: FC = function ({ children, className return (
-

{title}

{children}
         {code}
diff --git a/app/docs.css b/app/docs.css
index 5532b1f1c..da31ede06 100644
--- a/app/docs.css
+++ b/app/docs.css
@@ -47,6 +47,12 @@
   @apply font-medium text-gray-900 underline decoration-cyan-700 decoration-1 underline-offset-2 dark:text-white dark:decoration-cyan-700;
 }
 
+#mainContent > p > code,
+#mainContent > ul > li > code,
+#mainContent > ol > li > code {
+  @apply break-all px-1 font-mono text-sm text-primary-600 dark:text-primary-400;
+}
+
 #mainContent > p > a:hover,
 #mainContent > div > p > a:hover,
 #mainContent > ul > li > a:hover,
@@ -108,7 +114,7 @@ pre[class*='language-'] {
   -ms-hyphens: none;
   hyphens: none;
 
-  @apply font-normal;
+  @apply my-6 rounded-lg text-sm font-normal;
 }
 
 /* without preview */
diff --git a/app/docs/components/accordion/accordion.mdx b/app/docs/components/accordion/accordion.mdx
index d9097c578..13976645f 100644
--- a/app/docs/components/accordion/accordion.mdx
+++ b/app/docs/components/accordion/accordion.mdx
@@ -1,9 +1,21 @@
 import { Accordion } from '~/src/components/Accordion';
 import { CodePreview } from '~/app/components/code-preview';
 
-The accordion component is a collection of vertically collapsing header and body elements that can be used to show and hide information based on the Tailwind CSS utility classes and JavaScript from Flowbite.
+The accordion component from Flowbite React can be used to toggle the visibility of the content of each accordion panel tab by expanding the collapsing the trigger element based on multiple examples and styles.
 
-A popular use case would be the “Frequently Asked Questions” section of a website or page when you can show questions and answers for each child element.
+The reactivity and state is handled by React and the components is built using the Tailwind CSS framework meaning that you can easily customize the styles and colors of the accordion.
+
+To use the accordion component, you need to import the `` component from `flowbite-react`:
+
+```jsx
+'use client';
+
+import { Accordion } from 'flowbite-react';
+```
+
+## Default accordion
+
+Use this example of the `` component and the `` and `` subcomponents to create an accordion with multiple panels.
 
 
   
@@ -75,6 +87,11 @@ A popular use case would be the “Frequently Asked Questions” section of a we
     
   
 
+
+## Collapse all
+
+Use this example to automatically collapse all of the accordion panels by passing the `collapseAll` prop to the `` component.
+
 
   
     
@@ -145,3 +162,7 @@ A popular use case would be the “Frequently Asked Questions” section of a we
     
   
 
+
+## References
+
+- [Flowbite Accordion](https://flowbite.com/docs/components/accordion/)
diff --git a/app/docs/components/accordion/page.tsx b/app/docs/components/accordion/page.tsx
index ab0d6ec10..bc71464a1 100644
--- a/app/docs/components/accordion/page.tsx
+++ b/app/docs/components/accordion/page.tsx
@@ -4,7 +4,7 @@ import AccordionPageContent from '.';
 
 export const metadata: Metadata = {
   description:
-    'Use the accordion component to show hidden information based on the collapse and expand state of the child elements using data attribute options',
+    'Use the accordion component and its options to expand and collapse the content inside each panel based on state reactivity from React and Tailwind CSS',
   title: 'React Accordion - Flowbite',
 };
 
diff --git a/app/docs/components/alert/alert.mdx b/app/docs/components/alert/alert.mdx
index 86b608e8b..a932ca69e 100644
--- a/app/docs/components/alert/alert.mdx
+++ b/app/docs/components/alert/alert.mdx
@@ -3,7 +3,23 @@ import { ExampleAdditionalContent } from './additional-content.tsx';
 import { HiInformationCircle } from 'react-icons/hi';
 import { Alert } from '~/src';
 
-The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page. Flowbite also includes dismissable alerts which can be hidden by the users by clicking on the close icon.
+The alert component can be used to show a contextual text to the user such as a success or error message after form validation inside an alert box where you can choose from multiple colors, sizes, and styles.
+
+The examples below are styled with Tailwind CSS and the reactivity is handled by React and you can also add any type of content inside the alert box.
+
+To start using the alert box you need to import the `` component from the `flowbite-react` package:
+
+```jsx
+'use client';
+
+import { Alert } from 'flowbite-react';
+```
+
+## Default alert
+
+The default alert component is a simple alert box with a text inside it and you can use the `color` prop to change the color of the alert box and the `title` prop to add a title to the alert box.
+
+Inside of the `` component you can add any type of content such as text, images, or other components as they will be considered children of the alert box.
 
 
   
@@ -12,6 +28,11 @@ The alert component can be used to provide information to your users such as suc
     
   
 
+
+## Alert with icon
+
+Use the `icon` prop to add an icon to the alert box and you can use any icon from the [React Icons](https://react-icons.github.io/react-icons/) library.
+
 
   
     
@@ -19,6 +40,11 @@ The alert component can be used to provide information to your users such as suc
     
   
 
+
+## Dismissable alert
+
+You can use the `onDismiss` prop on the `` component to add a dismiss button to the alert box by adding a function inside of it that will be called when the user clicks on the dismiss button.
+
 
    alert('Alert dismissed!')}>
     
@@ -26,6 +52,11 @@ The alert component can be used to provide information to your users such as suc
     
   
 
+
+## Rounded alert
+
+To make the alert box rounded you can use the `rounded` prop on the `` component.
+
 
   
     
@@ -33,6 +64,11 @@ The alert component can be used to provide information to your users such as suc
     
   
 
+
+## Border accent
+
+Add a border accent to the alert box by applying the `withBorderAccent` prop on the `` component.
+
 
   
     
@@ -40,6 +76,11 @@ The alert component can be used to provide information to your users such as suc
     
   
 
+
+## Additional content
+
+Add additional content by using the `additionalContent` prop and add any type of content inside of it.
+
 
   } color="warning" icon={HiInformationCircle}>
     
@@ -47,6 +88,11 @@ The alert component can be used to provide information to your users such as suc
     
   
 
+
+## All options
+
+This is an example with all of the available options and props for the alert component.
+
 
   }
@@ -60,3 +106,7 @@ The alert component can be used to provide information to your users such as suc
     
   
 
+
+## References
+
+- [Flowbite Alerts](https://flowbite.com/docs/components/alerts/)
diff --git a/app/docs/components/alert/page.tsx b/app/docs/components/alert/page.tsx
index c88d371b7..edc324927 100644
--- a/app/docs/components/alert/page.tsx
+++ b/app/docs/components/alert/page.tsx
@@ -3,7 +3,8 @@ import { DocsContentLayout } from '~/app/components/docs-content-layout';
 import AlertPageContent from '.';
 
 export const metadata: Metadata = {
-  description: 'Show contextual information to your users using alert elements based on Tailwind CSS',
+  description:
+    'Get started with the alert component to show contextual information to the user such as when validating forms or showing errors based on React and Tailwind CSS',
   title: 'React Alert - Flowbite',
 };
 
diff --git a/app/docs/components/avatar/avatar.mdx b/app/docs/components/avatar/avatar.mdx
index 05fca6da4..a2a8df5ac 100644
--- a/app/docs/components/avatar/avatar.mdx
+++ b/app/docs/components/avatar/avatar.mdx
@@ -2,72 +2,67 @@ import { CodePreview } from '~/app/components/code-preview';
 import { Avatar, Dropdown } from '~/src';
 import Image from 'next/image';
 
-The avatar component can be used as a visual identifier for a user profile on your website and you can use the examples from Flowbite to modify the styles and sizes of these components using the utility classes from Tailwind CSS.
+The avatar component from Flowbite React can be used to show a visual representation of a user or team account for your application based on multiple examples, colors, sizes and shapes.
+
+All of the example are built as React components and you can access custom props and methods to customize the component and you can also use Tailwind CSS classes to style the component.
+
+To start using the avatar component you need to import it from the `flowbite-react` package:
+
+```jsx
+'use client';
+
+import { Avatar } from 'flowbite-react';
+```
+
+## Default avatar
+
+Here's a default example of the `` component where you can use the `img` prop to pass the image URL, the `alt` prop to pass a description of the image for accessibility and the `rounded` prop to make the avatar rounded.
 
 
   

-    
+    
     
   

 
+
+## Avatar with border
+
+Use the `bordered` prop to add a border style to the avatar.
+
 
   

     
     
   

 
-
-  

-    
-    
-    
-    
-    
-  

-  

-    
-    
-    
-    
-    
-  

-
-
-  

-     (
-        
-      )}
-    />
-     (
-        
-          
-          
-          
-        
-      )}
-    />
-  

-
+
+## Avatar placeholder
+
+If the user doesn't have an image you can use the `placeholder` prop to show a placeholder image and you can still pass the `rounded` prop to make the avatar rounded and other options.
+
 
   

     
     
   

 
+
+## Placeholder initials
+
+Alternatively to the placeholder image you can use the `placeholderInitials` prop to show the user initials.
+
 
   

     
   

 
+
+## Dot indicator
+
+You can use the `status` prop to show a dot indicator on the avatar and you can use the `statusPosition` prop to change the position of the dot indicator.
+
+This is useful to show the user status like online, offline, busy, away, and more.
+
 
   

     
@@ -76,6 +71,13 @@ The avatar component can be used as a visual identifier for a user profile on yo
     
   

 
+
+## Stacked layout
+
+Stack multiple avatars together by using the `` component and by passing the `stacked` prop to the child components of the group.
+
+The `` component can be used to show the total number of avatars in the group by passing the `total` prop and a link to the `href` prop to view all users.
+
 
   

     
@@ -94,6 +96,11 @@ The avatar component can be used as a visual identifier for a user profile on yo
     
   

 
+
+## Avatar with text
+
+Use this example to show an avatar with text (ie. user name, email, etc) by passing the custom markup inside the `` component. This is useful for admin dashboard interfaces while the user is logged in.
+
 
   
     

@@ -102,6 +109,11 @@ The avatar component can be used as a visual identifier for a user profile on yo
     

   
 
+
+## Avatar dropdown
+
+Use the `` component to show a dropdown menu when clicking on the avatar component. This example is often used to show the user settings, account settings, and more.
+
 
   }
@@ -119,6 +131,32 @@ The avatar component can be used as a visual identifier for a user profile on yo
     Sign out
   
 
+
+## Colors
+
+If you want to change the default color of the avatar component you can pass the `color` prop. Colors that you can choose from are gray, light, purple, success, pink, and more.
+
+
+  

+    
+    
+    
+    
+    
+  

+  

+    
+    
+    
+    
+    
+  

+
+
+## Sizes
+
+Change the default size of the avatar component by passing the `size` prop. Sizes that you can choose from are xs, sm, md, lg, and xl.
+
 
   

     
@@ -128,6 +166,37 @@ The avatar component can be used as a visual identifier for a user profile on yo
     
   

 
-
-  
+
+## Override image element
+
+You can override the default image element by passing the `img` prop to the `` component. This is useful if you want to use a different image element like `` from Next.js.
+
+
+  

+     (
+        
+      )}
+    />
+     (
+        
+          
+          
+          
+        
+      )}
+    />
+  

 
+
+## References
+
+- [Flowbite Avatar](https://flowbite.com/docs/components/avatar/)
diff --git a/app/docs/components/avatar/page.tsx b/app/docs/components/avatar/page.tsx
index ec953cddf..e881f123e 100644
--- a/app/docs/components/avatar/page.tsx
+++ b/app/docs/components/avatar/page.tsx
@@ -4,7 +4,7 @@ import AvatarPageContent from '.';
 
 export const metadata: Metadata = {
   description:
-    'Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes',
+    'Use the avatar component to show user profile images and placeholders in different sizes, colors and shapes based on React and Tailwind CSS',
   title: 'React Avatar - Flowbite',
 };
 
diff --git a/app/docs/components/badge/badge.mdx b/app/docs/components/badge/badge.mdx
index 5912420ed..2d5594688 100644
--- a/app/docs/components/badge/badge.mdx
+++ b/app/docs/components/badge/badge.mdx
@@ -2,9 +2,21 @@ import { HiCheck, HiClock } from 'react-icons/hi';
 import { CodePreview } from '~/app/components/code-preview';
 import { Badge } from '~/src';
 
-The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.
+The badge component can be used to show text, labels, and counters inside a small box or circle element which can be placed inside paragraphs, buttons, dropdowns, menu items, and more.
 
-Alternatively, badges can also be used as standalone elements that link to a certain page.
+You can choose from multiple examples of badges based on the color, size, and icon and even use it as a link component by leveraging the properties from React and classes from Tailwind CSS.
+
+To start using the badge component you need to import it from `flowbite-react`:
+
+```jsx
+'use client';
+
+import { Badge } from 'flowbite-react';
+```
+
+## Default badges
+
+Here's a list of default `` component examples where you can use the `color` property to change the color of the badge based on contextual colors such as info, gray, success, and more.
 
 
   Default
@@ -16,6 +28,46 @@ Alternatively, badges can also be used as standalone elements that link to a cer
   Purple
   Pink
 
+
+## Badge as link
+
+Use the badge as a link component by adding the `href` property and passing the URL as a value.
+
+
+  Default
+  
+    Default
+  
+
+
+## Badge with icon
+
+Add an icon to the badge by using the `icon` property and pass the icon component as a value. This can be used to show the status of a task or a notification often used for admin dashboards and user feeds.
+
+
+  2 minutes ago
+  
+    3 days ago
+  
+
+
+## Badge with icon only
+
+An alternative style for the badge component is by only showing an icon without any text. You can do this by removing the children from the component and only using the `icon` property.
+
+
+  
+  
+  
+  
+
+
+## Sizes
+
+Update the size of the badge component by using the `size` property and passing the size as a value.
+
+You can choose from `xs` and `sm` sizes.
+
 
   
     Default
@@ -42,21 +94,7 @@ Alternatively, badges can also be used as standalone elements that link to a cer
     Pink
   
 
-
-  Default
-  
-    Default
-  
-
-
-  2 minutes ago
-  
-    3 days ago
-  
-
-
-  
-  
-  
-  
-
+
+## References
+
+- [Flowbite Badge](https://flowbite.com/docs/components/badge/)
diff --git a/app/docs/components/badge/page.tsx b/app/docs/components/badge/page.tsx
index 05048087a..41ae8b285 100644
--- a/app/docs/components/badge/page.tsx
+++ b/app/docs/components/badge/page.tsx
@@ -4,7 +4,7 @@ import BadgePageContent from '.';
 
 export const metadata: Metadata = {
   description:
-    'Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes',
+    'Get started with the badge component to add labels or counters inside paragraphs, buttons, and inputs based on multiple colors and sizes from React and Tailwind CSS',
   title: 'React Badge - Flowbite',
 };
 
diff --git a/app/docs/components/breadcrumb/breadcrumb.mdx b/app/docs/components/breadcrumb/breadcrumb.mdx
index c266f014e..21b1d3b9c 100644
--- a/app/docs/components/breadcrumb/breadcrumb.mdx
+++ b/app/docs/components/breadcrumb/breadcrumb.mdx
@@ -2,9 +2,21 @@ import { HiHome } from 'react-icons/hi';
 import { CodePreview } from '~/app/components/code-preview';
 import { Breadcrumb } from '~/src';
 
-The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages.
+The breadcrumb component can be used to indicate the current page's location within a navigational hierarchy and you can choose from multiple examples, colors, and sizes built with React and based on the utility classes from Tailwind CSS.
 
-Flowbite includes two styles of breadcrumb elements, one that has a transparent background and a few more that come with a background in different colors.
+To start using the breadcrumb component you need to import it from `flowbite-react`:
+
+```jsx
+'use client';
+
+import { Breadcrumb } from 'flowbite-react';
+```
+
+## Default breadcrumb
+
+Use the `` component and the child `` components to create and indicate a series of page structure and URLs to help the user navigate through the website.
+
+You can use the `href` prop from React to make the breadcrumb items clickable and the `icon` prop to add an icon to the breadcrumb item such as for the homepage.
 
 
   
@@ -15,6 +27,11 @@ Flowbite includes two styles of breadcrumb elements, one that has a transparent
     Flowbite React
   
 
+
+## Background color
+
+You can add a solid background style to the breadcrumb component by adding the `bg-gray-50` class to the component from Tailwind CSS.
+
 
   
     
@@ -24,3 +41,7 @@ Flowbite includes two styles of breadcrumb elements, one that has a transparent
     Flowbite React
   
 
+
+## References
+
+- [Flowbite Breadcrumbs](https://flowbite.com/docs/components/breadcrumb/)
diff --git a/app/docs/components/breadcrumb/page.tsx b/app/docs/components/breadcrumb/page.tsx
index 7ae153295..48849f665 100644
--- a/app/docs/components/breadcrumb/page.tsx
+++ b/app/docs/components/breadcrumb/page.tsx
@@ -3,7 +3,8 @@ import { DocsContentLayout } from '~/app/components/docs-content-layout';
 import BreadcrumbPageContent from '.';
 
 export const metadata: Metadata = {
-  description: 'Show the location of the current page in a hierarchical structure using the breadcrumb components',
+  description:
+    'Get started with the breadcrumb component to show the current page location based on the URL structure using React and Tailwind CSS',
   title: 'React Breadcrumb - Flowbite',
 };
 
diff --git a/app/docs/components/button-group/button-group.mdx b/app/docs/components/button-group/button-group.mdx
index d36817306..a96a57b20 100644
--- a/app/docs/components/button-group/button-group.mdx
+++ b/app/docs/components/button-group/button-group.mdx
@@ -2,7 +2,21 @@ import { HiAdjustments, HiCloudDownload, HiUserCircle } from 'react-icons/hi';
 import { CodePreview } from '~/app/components/code-preview';
 import { Button } from '~/src';
 
-The button group component from Flowbite React can be used to stack together multiple buttons and links inside a single element.
+The button group component from Flowbite React can be used to stack multiple button elements and group them visually together. It can often be used to create a navigation menu or a toolbar.
+
+Choose from multiple examples and you can update properties such as the color, size, and appearance using the props from React and utility classes from Tailwind CSS.
+
+To start using the component you need to import it from the Flowbite React library:
+
+```jsx
+'use client';
+
+import { Button } from 'flowbite';
+```
+
+## Default button group
+
+Use this example of the `` component by adding the `Button` component as a child element and stack them together. You can also use the `color` prop to change the color of the buttons.
 
 
   
@@ -11,6 +25,11 @@ The button group component from Flowbite React can be used to stack together mul
     
   
 
+
+## Button group with icons
+
+Import one of the icons from the `react-icons` library and add it as a child element to the `
   
 
-
-  
-    
-    
-    
-  
-  
-    
-    
-    
-  
-  
-    
-    
-    
-  
-
+
+## Outline button group
+
+By passing the outline prop to the `` component you can create a button group with outline buttons with no background and solid borders.
+
 
   
     
@@ -61,6 +68,33 @@ The button group component from Flowbite React can be used to stack together mul
     
   
 
+
+## Color options
+
+Use the `color` prop to change the color of the buttons. You can also use the `gradientMonochrome` and `gradientDuoTone` props to apply a gradient color to the buttons.
+
+
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+
+
+## Outline button group with icons
+
+Here's an example on how you can use both the outline and icon props together.
+
 
   
     
   
 
+
+## References
+
+- [Flowbite Button Group](https://flowbite.com/docs/components/button-group/)
diff --git a/app/docs/components/button-group/page.tsx b/app/docs/components/button-group/page.tsx
index 946e5dd45..a86aff6a4 100644
--- a/app/docs/components/button-group/page.tsx
+++ b/app/docs/components/button-group/page.tsx
@@ -3,7 +3,8 @@ import { DocsContentLayout } from '~/app/components/docs-content-layout';
 import ButtonGroupPageContent from '.';
 
 export const metadata: Metadata = {
-  description: 'Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line',
+  description:
+    'Button groups allow you to stack together multiple buttons in a single line horizontally based on multiple styles and sizes using React and Tailwind CSS',
   title: 'React Button Group - Flowbite',
 };
 
diff --git a/app/docs/components/button/button.mdx b/app/docs/components/button/button.mdx
index eebe54c0b..9c0aa8e56 100644
--- a/app/docs/components/button/button.mdx
+++ b/app/docs/components/button/button.mdx
@@ -2,9 +2,21 @@ import { HiOutlineArrowRight, HiShoppingCart } from 'react-icons/hi';
 import { CodePreview } from '~/app/components/code-preview';
 import { Button } from '~/src';
 
-The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages.
+The button component is a common UI component found on the web that allows users to trigger certain actions on your website such as submitting a form, navigating to a new page, or downloading a file.
 
-Flowbite React provides a large variety of styles and sizes for the button component including outlined buttons, multiple colors, sizes, buttons with icons, and more.
+The examples from the Flowbite React library allows you to customise the buttons with different colors, sizes, icons, and more. All examples are built with React and Tailwind CSS.
+
+In order to start using the button component you need to import it from Flowbite React:
+
+```jsx
+'use client';
+
+import { Button } from 'flowbite';
+```
+
+## Default buttons
+
+Use this example to create a default button by using the `
@@ -16,6 +28,11 @@ Flowbite React provides a large variety of styles and sizes for the button compo
   
   
 
+
+## Button pills
+
+Add the `pill` property to the `
 
+
+## Gradient monochrome
+
+By adding the `gradientMonochrome` property to the `
   
@@ -49,6 +71,11 @@ Flowbite React provides a large variety of styles and sizes for the button compo
   
   
 
+
+## Gradient duotone
+
+Use the `gradientDuoTone` property to create a button with a gradient background with two colors.
+
 
   
   
@@ -58,6 +85,11 @@ Flowbite React provides a large variety of styles and sizes for the button compo
   
   
 
+
+## Outline buttons
+
+Use the `outline` property to create an outline button with transparent background and colored border.
+
 
   
 
+
+## Button sizes
+
+You can update the size of the button by adding the `size` property to the `
   
@@ -88,6 +127,11 @@ Flowbite React provides a large variety of styles and sizes for the button compo
   
   
 
+
+## Buttons with icon
+
+You can add icons to the buttons by adding it inside the `
 
+
+## Button with label
+
+You can add a label to the button by adding the `label` property to the `
 
+
+## Button with only icons
+
+Create a button with only icons by adding the `iconOnly` property to the `
 
+
+## Button with loading state
+
+Add a loading state to the button element by adding the `isProcessing` property to the `
 
+
+## References
+
+- [Flowbite Buttons](https://flowbite.com/docs/components/buttons/)
diff --git a/app/docs/components/button/page.tsx b/app/docs/components/button/page.tsx
index ba04a1ac2..1a9387f46 100644
--- a/app/docs/components/button/page.tsx
+++ b/app/docs/components/button/page.tsx
@@ -4,7 +4,7 @@ import ButtonPageContent from '.';
 
 export const metadata: Metadata = {
   description:
-    'Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows',
+    'Enable user interaction with the button component to perform actions on your website as links, for payment, form submission, social buttons and more based on React and Tailwind CSS',
   title: 'React Buttons - Flowbite',
 };
 
diff --git a/app/docs/components/card/card.mdx b/app/docs/components/card/card.mdx
index 0a66f4211..2e887c1b3 100644
--- a/app/docs/components/card/card.mdx
+++ b/app/docs/components/card/card.mdx
@@ -2,7 +2,19 @@ import { CodePreview } from '~/app/components/code-preview';
 import { Button, Card, Checkbox, Dropdown, Label, TextInput } from '~/src';
 import Image from 'next/image';
 
-Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more.
+The card component can be used to show a wide variety of content such as previews of blog posts, user profiles, pricing plans, and more. Choose from one of the many examples built with React and the utility classes from Tailwind CSS.
+
+To start using the card component you will need to import it from `flowbite-react`:
+
+```jsx
+'use client';
+
+import { Card } from 'flowbite-react';
+```
+
+## Default card
+
+Use this example to show a simple card component with a title and description and apply the `href` tag to the `` component to set a hyperlink to the card.
 
 
   
@@ -14,6 +26,11 @@ Use these responsive card components to show data entries and information to you
     

   
 
+
+## Card with CTA button
+
+By also importing the `
   
 
+
+## Card with image
+
+Add an image to the card by using the `imgSrc` prop and set the `imgAlt` prop to add an alt text to the image.
+
 
-  
-    

-      Noteworthy technology acquisitions 2021
-    

-    

-      Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
-    

-  
-
-
   
     

       Noteworthy technology acquisitions 2021
@@ -54,6 +66,11 @@ Use these responsive card components to show data entries and information to you
     

   
 
+
+## Horizontal card
+
+Use the `horizontal` prop to show the card in a horizontal layout.
+
 
   
     

@@ -64,6 +81,11 @@ Use these responsive card components to show data entries and information to you
     

   
 
+
+## User profile card
+
+Use this example to show a user card with a profile picture, name, job title, buttons and a dropdown menu.
+
 
   
     

@@ -121,6 +143,11 @@ Use these responsive card components to show data entries and information to you
     

   
 
+
+## Card with form
+
+You can also add form elements inside of the card component such as for sign up or login forms.
+
 
   
     

@@ -144,6 +171,11 @@ Use these responsive card components to show data entries and information to you
     

   
 
+
+## E-commerce card
+
+Use this example to show a product card with an image (product preview), title, price, rating stars and buttons built for E-commerce websites.
+
 
   
     
@@ -207,6 +239,11 @@ Use these responsive card components to show data entries and information to you
+ +## CTA card + +Use this component to display a call to action card for mobile applications where you feature download buttons for App Store and Google Play. +
Work fast from anywhere
@@ -265,6 +302,11 @@ Use these responsive card components to show data entries and information to you + +## Card with list + +Use this component to display a card with a list of items such as your latest customers or latest orders that include an image, descriptive text and a link to view more. +
@@ -369,6 +411,11 @@ Use these responsive card components to show data entries and information to you
+ +## Pricing card + +Use the pricing card component to show the pricing of your product or service. +
Standard plan
@@ -492,6 +539,11 @@ Use these responsive card components to show data entries and information to you + +## Crypto card (web3) + +This component can be used for crypto and web3 related projects where you can choose which wallet you want to connect with (ie. Metamask, Coinbase). +
Connect wallet
@@ -736,3 +788,7 @@ Use these responsive card components to show data entries and information to you + +## References + +- [Flowbite Card](https://flowbite.com/docs/components/card/) diff --git a/app/docs/components/card/page.tsx b/app/docs/components/card/page.tsx index 6828ab0a2..013257cec 100644 --- a/app/docs/components/card/page.tsx +++ b/app/docs/components/card/page.tsx @@ -3,7 +3,8 @@ import { DocsContentLayout } from '~/app/components/docs-content-layout'; import CardPageContent from '.'; export const metadata: Metadata = { - description: 'Get started with a large variety of Tailwind CSS card examples for your web project', + description: + 'Get started with the card component to show content in a box such as titles, descriptions, and images based on multiple styles and sizes built with React', title: 'React Cards - Flowbite', }; diff --git a/app/docs/components/carousel/carousel.mdx b/app/docs/components/carousel/carousel.mdx index 83f9d72a2..cd99cc791 100644 --- a/app/docs/components/carousel/carousel.mdx +++ b/app/docs/components/carousel/carousel.mdx @@ -1,7 +1,21 @@ import { CodePreview } from '~/app/components/code-preview'; import { Carousel } from '~/src'; -The carousel component can be used to cycle through a set of elements using custom options, controls, and indicators. +Use the responsive carousel component to allow users to slide through multiple items and navigate between them using the control buttons and indicators. + +Choose from multiple examples and options to update the intervals, make the carousel static and set custom control button and indicator by configuring React and the utility classes from Tailwind CSS. + +To start using the carousel component you first need to import it from Flowbite React: + +```jsx +'use client'; + +import { Carousel } from 'flowbite'; +``` + +## Default carousel + +Use this example by adding a series of images inside of the `` component. @@ -12,8 +26,13 @@ The carousel component can be used to cycle through a set of elements using cust ... - - + +## Static carousel + +Pass the `slide` prop to the carousel component to make it static and disable the automatic sliding functionality. This does not disable the control or indicator buttons. + + + ... ... ... @@ -21,8 +40,13 @@ The carousel component can be used to cycle through a set of elements using cust ... - - + +## Sliding interval + +Use the `slideInterval` prop to set the interval between slides in milliseconds. The default value is `3000`. + + + ... ... ... @@ -30,6 +54,11 @@ The carousel component can be used to cycle through a set of elements using cust ... + +## Custom controls + +Use the `leftControl` and `rightControl` props to set custom control buttons. + ... @@ -39,6 +68,11 @@ The carousel component can be used to cycle through a set of elements using cust ... + +## Indicators + +Add custom indicators or disable them by passing the `indicators` prop to the `` component. + ... @@ -55,6 +89,11 @@ The carousel component can be used to cycle through a set of elements using cust ... + +## Slider content + +Instead of images you can also use any type of markup and content inside the carousel such as simple text. +
Slide 1
@@ -62,3 +101,7 @@ The carousel component can be used to cycle through a set of elements using cust
Slide 3
 + +## References + +- [Flowbite Carousel](https://flowbite.com/docs/components/carousel/) diff --git a/app/docs/components/carousel/page.tsx b/app/docs/components/carousel/page.tsx index d98dd5417..c56ae3969 100644 --- a/app/docs/components/carousel/page.tsx +++ b/app/docs/components/carousel/page.tsx @@ -4,7 +4,7 @@ import CarouselPageContent from '.'; export const metadata: Metadata = { description: - 'Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options', + 'Get started with the carousel component to showcase images and content and slide through them using custom controls, intervals, and indicators with React and Tailwind CSS', title: 'React Carousel - Flowbite', }; diff --git a/app/docs/components/dropdown/dropdown.mdx b/app/docs/components/dropdown/dropdown.mdx index 3c2a3a37a..e05e907df 100644 --- a/app/docs/components/dropdown/dropdown.mdx +++ b/app/docs/components/dropdown/dropdown.mdx @@ -2,7 +2,21 @@ import { HiCog, HiCurrencyDollar, HiLogout, HiViewGrid } from 'react-icons/hi'; import { CodePreview } from '~/app/components/code-preview'; import { Dropdown } from '~/src'; -The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when clicking outside of the triggering element. +The dropdown component is a UI component built with React that allows you to show a list of items when clicking on a trigger element (ie. a button) that you can use to build dropdown menus, lists, and more. + +The default styles are built with the utility classes from Tailwind CSS and you can use the custom props from React to customize the behaviour and positioning of the dropdowns. + +To start using the component make sure that you have imported it from Flowbite React: + +```jsx +'use client'; + +import { Dropdown } from 'flowbite'; +``` + +## Default dropdown + +Use this example to create a simple dropdown with a list of menu items by adding child `` components inside of the main `` component. @@ -12,6 +26,11 @@ The dropdown component can be used to show a list of menu items when clicking on Sign out + +## Dropdown divider + +Use the `` component to add a divider between the dropdown items. + Dashboard @@ -21,6 +40,11 @@ The dropdown component can be used to show a list of menu items when clicking on Separated link + +## Dropdown header + +Use the `` component to add a header to the dropdown. You can use this to add a user profile image and name, for example. + @@ -34,14 +58,11 @@ The dropdown component can be used to show a list of menu items when clicking on Sign out - - - Dashboard - Settings - Earnings - Sign out - - + +## Dropdown items with icon + +Add custom icons next to the menu items by using the `icon` prop on the `` component. + @@ -55,14 +76,24 @@ The dropdown component can be used to show a list of menu items when clicking on Sign out - - - alert('Dashboard!')}>Dashboard - alert('Settings!')}>Settings - alert('Earnings!')}>Earnings - alert('Sign out!')}>Sign out + +## Inline dropdown + +Use the `inline` prop to make the dropdown appear inline with the trigger element. + + + + Dashboard + Settings + Earnings + Sign out + +## Dropdown sizes + +You can use the `size` prop to change the size of the dropdown. The default size is `md`. +
@@ -79,6 +110,11 @@ The dropdown component can be used to show a list of menu items when clicking on
+ +## Placement options + +Use the `placement` prop to change the placement of the dropdown by choosing one of the following options: `top`, `right`, `bottom` or `left`. If there is not enough space then the dropdown will be automatically repositioned. +
@@ -123,3 +159,20 @@ The dropdown component can be used to show a list of menu items when clicking on
+ +## Click event handler + +Add a custom `onClick` event handler to the `` component to handle the click event. + + + + alert('Dashboard!')}>Dashboard + alert('Settings!')}>Settings + alert('Earnings!')}>Earnings + alert('Sign out!')}>Sign out + + + +## References + +- [Flowbite Dropdown](https://flowbite.com/docs/components/dropdowns/) diff --git a/app/docs/components/dropdown/page.tsx b/app/docs/components/dropdown/page.tsx index 722b2b462..3a42577ef 100644 --- a/app/docs/components/dropdown/page.tsx +++ b/app/docs/components/dropdown/page.tsx @@ -4,7 +4,7 @@ import DropdownPageContent from '.'; export const metadata: Metadata = { description: - 'Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements', + 'Use the dropdown component to trigger a list of menu items when clicking on an element such as a button or link based on multiple styles, sizes, and placements with React', title: 'React Dropdown - Flowbite', }; diff --git a/app/docs/components/footer/footer.mdx b/app/docs/components/footer/footer.mdx index 2fcc41923..740f4733b 100644 --- a/app/docs/components/footer/footer.mdx +++ b/app/docs/components/footer/footer.mdx @@ -2,7 +2,23 @@ import { BsDribbble, BsFacebook, BsGithub, BsInstagram, BsTwitter } from 'react- import { CodePreview } from '~/app/components/code-preview'; import { Footer } from '~/src'; -The footer is one of the most underestimated sections of a website being located at the very bottom of every page, however, it can be used as a way to try to convince users to stay on your website if they haven’t found the information they’ve been looking for inside the main content area. +The footer component is an important section of a website where you should provide content such as sitemap links, copyright text, logo of your brand, social media account links, and more. + +Get started with the examples from Flowbite React based on multiple styles, sizes, and colors by using React components and the utility classes from Tailwind CSS. + +To start using the footer component you need to import it from `flowbite-react`: + +```jsx +'use client'; + +import { Footer } from 'flowbite-react'; +``` + +## Default footer + +Use this example to create a simple and responsive footer component with copyright text and links by adding the `` and `` items inside the `