Updated: Dropdown component updated.

app/docs/components/alert/variant/AlertColorVariant.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { Alert } from '../../../../src'
 
 const AlertWithColorVariant = () => {
@@ -53,6 +54,7 @@ const AlertWithColorVariant = () => {
 }
 
 const AlertWithColorVariantCode = `
+'use client'
 import { Alert } from 'keep-react'
 
 export const AlertComponent = () => {

app/docs/components/alert/variant/AlertWithBgColor.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { Alert } from '../../../../src'
 
 const AlertWithBgColor = () => {
@@ -53,6 +54,7 @@ const AlertWithBgColor = () => {
 }
 
 const AlertWithBgColorCode = `
+'use client'
 import { Alert } from 'keep-react'
 
 export const AlertComponent = () => {

app/docs/components/alert/variant/AlertWithCard.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { Alert, Button, CheckBox } from '../../../../src'
 
 const AlertWithCard = () => {
@@ -158,6 +159,7 @@ const AlertWithCard = () => {
 }
 
 const AlertWithCardCode = `
+'use client'
 import { Alert, Button, CheckBox } from 'keep-react'
 
 export const AlertComponent = () => {

app/docs/components/alert/variant/AlertWithDismissIcon.tsx

@@ -1,6 +1,6 @@
 'use client'
-import { Alert } from '../../../../src'
 import { useState } from 'react'
+import { Alert } from '../../../../src'
 
 const AlertWithDismissIcon = () => {
   const [showAlert, setShowAlert] = useState(false)
@@ -22,8 +22,8 @@ const AlertWithDismissIcon = () => {
 
 const AlertWithDismissIconCode = `
 'use client'
-import { Alert } from '../../../../src'
 import { useState } from 'react'
+import { Alert } from 'keep-react'
 
 const AlertComponent = () => {
   const [showAlert, setShowAlert] = useState(false)

app/docs/components/alert/variant/DefaultAlert.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { Alert } from '../../../../src'
 
 const DefaultAlert = () => {
@@ -15,6 +16,7 @@ const DefaultAlert = () => {
 }
 
 const DefaultAlertCode = `
+'use client'
 import { Alert } from 'keep-react'
 
 export const AlertComponent = () => {

app/docs/components/avatar/variant/AvatarGroup.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { Avatar } from '../../../../src'
 
 const AvatarGroup = () => {
@@ -13,6 +14,7 @@ const AvatarGroup = () => {
 }
 
 const AvatarGroupCode = `
+'use client'
 import { Avatar } from 'keep-react'
 
 const AvatarGroupComponent = () => {

app/docs/components/avatar/variant/DefaultAvatar.tsx

@@ -1,11 +1,14 @@
+'use client'
 import { Avatar } from '../../../../src'
 
 const DefaultAvatar = () => {
   return <Avatar />
 }
 
 const DefaultAvatarCode = `
+'use client'
 import { Avatar } from 'keep-react'
+
 export const AvatarComponent = () => {
   return <Avatar />
 }

app/docs/components/avatar/variant/ImageOfAvatar.tsx

@@ -11,6 +11,7 @@ const ImageOfAvatar = () => {
 }
 
 const ImageOfAvatarCode = `
+'use client'
 import { Avatar } from "keep-react"
 
 export const AvatarComponent = () => {

app/docs/components/avatar/variant/SizesOfAvatar.tsx

@@ -14,6 +14,7 @@ const SizesOfAvatar = () => {
 }
 
 const SizesOfAvatarCode = `
+'use client'
 import { Avatar } from "keep-react"
 
 export const AvatarComponent = () => {

app/docs/components/avatar/variant/StatusOfAvatar.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { Avatar } from '../../../../src'
 
 const StatusOfAvatar = () => {
@@ -10,6 +11,7 @@ const StatusOfAvatar = () => {
 }
 
 const StatusOfAvatarCode = `
+'use client'
 import { Avatar } from "keep-react";
 
 export const AvatarComponent = () => {

app/docs/components/badge/variant/BadgeWithDot.tsx

@@ -24,8 +24,8 @@ const BadgeWithDot = () => {
 }
 
 const BadgeWithDotCode = `
-"use client";
-import { Badge } from "keep-react";
+'use client'
+import { Badge } from 'keep-react'
 
 export const BadgeComponent = () => {
   return (

app/docs/components/badge/variant/SizesOfBadge.tsx

@@ -43,8 +43,8 @@ const SizesOfBadge = () => {
 }
 
 const SizesOfBadgeCode = `
-"use client";
-import { Badge } from "keep-react";
+'use client'
+import { Badge } from 'keep-react'
 
 export const BadgeComponent = () => {
   return (

app/docs/components/badge/variant/VariantOfBadge.tsx

@@ -60,8 +60,8 @@ const VariantOfBadge = () => {
 }
 
 const VariantOfBadgeCode = `
-"use client";
-import { Badge } from "keep-react";
+'use client'
+import { Badge } from 'keep-react'
 
 export const BadgeComponent = () => {
   return (

app/docs/components/breadcrumb/variant/BreadcrumbDividerIcon.tsx

@@ -31,6 +31,7 @@ const BreadcrumbDividerIcon = () => {
 }
 
 const BreadcrumbDividerIconCode = `
+'use client'
 import { Breadcrumb } from "keep-react"
 
 export const BreadcrumbComponent = () => {

app/docs/components/breadcrumb/variant/BreadcrumbWithBorder.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { Breadcrumb } from '../../../../src'
 
 const BreadcrumbWithBorder = () => {

app/docs/components/breadcrumb/variant/DefaultBreadcrumb.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { Breadcrumb } from '../../../../src'
 
 const DefaultBreadcrumb = () => {
@@ -19,6 +20,7 @@ const DefaultBreadcrumb = () => {
 }
 
 const DefaultBreadcrumbCode = `
+'use client'
 import { Breadcrumb } from 'keep-react'
 
 const BreadcrumbComponent = () => {

app/docs/components/button/variant/KeepButtonColor.tsx

@@ -14,8 +14,8 @@ const KeepButtonColor = () => {
 }
 
 const KeepButtonColorCode = `
-"use client"
-import { Button } from "keep-react"
+'use client'
+import { Button } from 'keep-react'
 
 export const ButtonComponent = () => {
   return (

app/docs/components/button/variant/KeepButtonSize.tsx

@@ -15,8 +15,8 @@ const KeepButtonSize = () => {
 }
 
 const KeepButtonSizeCode = `
-"use client";
-import { Button } from "keep-react;
+'use client'
+import { Button } from 'keep-react'
 
 export const ButtonComponent = () => {
   return (

app/docs/components/button/variant/KeepButtonType.tsx

@@ -43,7 +43,8 @@ const KeepButtonType = () => {
 }
 
 const KeepButtonTypeCode = `
-import { Button } from "keep-react";
+'use client'
+import { Button } from 'keep-react'
 
 export const ButtonComponent = () => {
   return (

app/docs/components/buttonGroup/variant/ButtonGroupWithIcon.tsx

@@ -1,6 +1,6 @@
 'use client'
-import { Button } from '../../../../src'
 import { ChatCircleDots, Cube, Gear } from 'phosphor-react'
+import { Button } from '../../../../src'
 
 const ButtonGroupWithIcon = () => {
   return (
@@ -24,9 +24,9 @@ const ButtonGroupWithIcon = () => {
 }
 
 const ButtonGroupWithIconCode = `
-"use client";
-import { Button } from "keep-react";
-import { ChatCircleDots, Cube, Gear } from "phosphor-react";
+'use client'
+import { Button } from 'keep-react'
+import { ChatCircleDots, Cube, Gear } from 'phosphor-react'
 
 export const ButtonGroupComponent = () => {
   return (

app/docs/components/buttonGroup/variant/DefaultButtonGroup.tsx

@@ -14,8 +14,8 @@ const DefaultButtonGroup = () => {
 }
 
 const DefaultButtonGroupCode = `
-"use client";
-import { Button } from "keep-react";
+'use client'
+import { Button } from 'keep-react'
 
 export const ButtonGroupComponent = () => {
   return (

app/docs/components/dropdown/Dropdown.mdx

@@ -1,5 +1,6 @@
 import { DefaultDropdown, DefaultDropdownCode } from './variant/DefaultDropdown'
 import { DropdownWithIcon, DropdownWithIconCode } from './variant/DropdownWithIcon'
+import { CustomDropdown, CustomDropdownCode } from './variant/CustomDropdown'
 import { dropdownAPIData } from './DropdownApi'
 import CodePreview from '../../../components/CodePreview'
 import ComponentApi from '../../../components/ComponentApi'
@@ -10,20 +11,28 @@ The Dropdown Component is a versatile user interface element that provides users
 
 ## Default Dropdown
 
-The Default Dropdown represents some list items as a dropdown items with `<Dropdown.Item>` components and the `<Dropdown>` is a wrapper button where user can click to show the dropdown items. `dismissOnClick={true}` props means when the user select a dropdown item dropdown will be closed.
+The Default Dropdown represents a list of items as dropdown items with `<Dropdown.Item>` components.
 
 <CodePreview github="Dropdown" code={DefaultDropdownCode}>
   <DefaultDropdown />
 </CodePreview>
 
 ## Dropdown With Icon
 
-The Dropdown with Both Side Icon component combines dropdown items with icons on both sides of the label.
+The Dropdown with Icon component allows you to include icons within dropdown items.
 
 <CodePreview github="Dropdown" code={DropdownWithIconCode}>
   <DropdownWithIcon />
 </CodePreview>
 
+## Customize Dropdown
+
+Customize the dropdown according to your preferences.
+
+<CodePreview github="Dropdown" code={CustomDropdownCode}>
+  <CustomDropdown />
+</CodePreview>
+
 ## API Reference
 
 Here is a list of the props that you can pass to the dropdown component:

app/docs/components/dropdown/DropdownApi.ts

@@ -21,31 +21,30 @@ export const dropdownAPIData = [
   },
   {
     id: 2,
-    propsName: 'trigger',
-    propsType: ['hover', 'click'],
-    propsDescription: 'Specifies the trigger behavior for the dropdown.',
-    default: 'click',
+    propsName: 'showArrow',
+    propsType: 'boolean',
+    propsDescription: 'Enables or disables the floating arrow within the dropdown.',
+    default: 'false',
   },
   {
     id: 3,
-    propsName: 'label',
+    propsName: 'className',
     propsType: 'string',
-    propsDescription: 'The content to display within the dropdown.',
-    default: 'Dropdown Button',
+    propsDescription: 'Custom class for styling the dropdown',
+    default: '',
   },
-
   {
     id: 4,
-    propsName: 'floatingArrow',
-    propsType: 'boolean',
-    propsDescription: 'Enables or disables the floating arrow within the dropdown.',
-    default: 'false',
+    propsName: 'actionClassName',
+    propsType: 'string',
+    propsDescription: 'action button Custom class for styling',
+    default: '',
   },
   {
     id: 5,
-    propsName: 'arrowIcon',
-    propsType: 'boolean',
-    propsDescription: 'Enables or disables the arrow icon.',
-    default: 'true',
+    propsName: 'action',
+    propsType: 'ReactNode',
+    propsDescription: 'Dropdown clickable item',
+    default: 'Dot Icon',
   },
 ]