ci(changesets): version packages (#4237 )

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
chore: v2.6.2
2024-12-06 11:44:32 -03:00 · 2024-12-06 11:36:59 -03:00 · 2024-12-06 11:31:49 -03:00 · 2024-12-06 11:29:02 -03:00 · 2024-12-06 10:34:46 -03:00 · 2024-12-06 10:34:19 -03:00
1709 changed files with 68736 additions and 36117 deletions
@@ -1,5 +0,0 @@
---
-"@nextui-org/theme": patch
---
-
-fix label placement in input and select
@@ -8,7 +8,7 @@
  "fixed": [],
  "linked": [],
  "access": "public",
-  "baseBranch": "main",
+  "baseBranch": "canary",
  "updateInternalDependencies": "patch",
  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
    "onlyUpdatePeerDependentsWhenOutOfRange": true
@@ -1,5 +0,0 @@
---
-"@nextui-org/listbox": patch
---
-
-change ListboxItem key to optional (#3880)
@@ -1,5 +0,0 @@
---
-"@nextui-org/autocomplete": patch
---
-
-Clicking the clear button clears the selected value without closing the dropdown. (#3788)
@@ -1,5 +0,0 @@
---
-"@nextui-org/select": patch
---
-
-update label placement in Select to use `shouldLabelBeOutside` instead of `isOutsideLeft`, resolving multiline label placement issues (#3841).
@@ -1,5 +0,0 @@
---
-"@nextui-org/theme": patch
---
-
-fix the fullWidth variant in input and select component. (#3745)
@@ -1,53 +0,0 @@
---
-"@nextui-org/table": minor
-"@nextui-org/accordion": minor
-"@nextui-org/autocomplete": minor
-"@nextui-org/avatar": minor
-"@nextui-org/breadcrumbs": minor
-"@nextui-org/button": minor
-"@nextui-org/calendar": minor
-"@nextui-org/card": minor
-"@nextui-org/checkbox": minor
-"@nextui-org/chip": minor
-"@nextui-org/date-input": minor
-"@nextui-org/date-picker": minor
-"@nextui-org/divider": minor
-"@nextui-org/dropdown": minor
-"@nextui-org/input": minor
-"@nextui-org/kbd": minor
-"@nextui-org/link": minor
-"@nextui-org/listbox": minor
-"@nextui-org/menu": minor
-"@nextui-org/modal": minor
-"@nextui-org/navbar": minor
-"@nextui-org/pagination": minor
-"@nextui-org/popover": minor
-"@nextui-org/progress": minor
-"@nextui-org/radio": minor
-"@nextui-org/select": minor
-"@nextui-org/slider": minor
-"@nextui-org/snippet": minor
-"@nextui-org/switch": minor
-"@nextui-org/tabs": minor
-"@nextui-org/tooltip": minor
-"@nextui-org/user": minor
-"@nextui-org/react": minor
-"@nextui-org/system": minor
-"@nextui-org/system-rsc": minor
-"@nextui-org/use-aria-accordion": minor
-"@nextui-org/use-aria-accordion-item": minor
-"@nextui-org/use-aria-button": minor
-"@nextui-org/use-aria-link": minor
-"@nextui-org/use-aria-menu": minor
-"@nextui-org/use-aria-modal-overlay": minor
-"@nextui-org/use-aria-multiselect": minor
-"@nextui-org/use-aria-overlay": minor
-"@nextui-org/use-aria-toggle-button": minor
-"@nextui-org/use-disclosure": minor
-"@nextui-org/use-intersection-observer": minor
-"@nextui-org/use-is-mobile": minor
-"@nextui-org/use-pagination": minor
-"@nextui-org/aria-utils": minor
---
-
-update react-aria version
@@ -1,5 +0,0 @@
---
-"@nextui-org/date-picker": patch
---
-
-Fixes getCalendarProps to propagate the classNames in the calendarProps. (#3769)
@@ -1,5 +0,0 @@
---
-"@nextui-org/theme": patch
---
-
-remove the pseudo cancel btn from input (#3907)
@@ -1,5 +0,0 @@
---
-"@nextui-org/theme": patch
---
-
-replace the use of RTL-specific styles with logical properties.
@@ -1,5 +0,0 @@
---
-"@nextui-org/theme": patch
---
-
-bump `tailwind-merge` version (#3614)
@@ -1,6 +0,0 @@
---
-"@nextui-org/calendar": patch
-"@nextui-org/date-picker": patch
---
-
-Add month and year picker to DateRangePicker and RangeCalendar (#3089, #3090)
@@ -1,5 +0,0 @@
---
-"@nextui-org/use-theme": minor
---
-
-introduce `use-theme` hook
@@ -1,8 +0,0 @@
---
-"@nextui-org/calendar": patch
-"@nextui-org/theme": patch
-"@nextui-org/use-infinite-scroll": patch
-"@nextui-org/shared-utils": patch
---
-
-replaced lodash with native approaches
@@ -1,5 +0,0 @@
---
-"@nextui-org/autocomplete": patch
---
-
-Return null if there are items for exit animation on popover close to work
@@ -1,6 +0,0 @@
---
-"@nextui-org/date-picker": minor
-"@nextui-org/theme": minor
---
-
-Add support for selectorButtonPlacement property (#3015)
@@ -1,6 +0,0 @@
---
-"@nextui-org/use-image": patch
-"@nextui-org/test-utils": patch
---
-
-fix cached image flashing due to use-image always returning pending initially. The fix was to check if the image is loaded instantly through HTMLImageElement.complete attribute and use that to initialize the state.
@@ -1,5 +0,0 @@
---
-"@nextui-org/theme": patch
---
-
-added stripe color gradients for progress (#1933)
@@ -1,6 +0,0 @@
---
-"@nextui-org/alert": patch
-"@nextui-org/theme": patch
---
-
-introduced Alert component (#2250)
@@ -1,5 +0,0 @@
---
-"@nextui-org/autocomplete": patch
---
-
-automatically focus first non-disabled item
@@ -1,5 +0,0 @@
---
-"@nextui-org/theme": patch
---
-
-separator icon RTL support in Breadcrumbs component (#2486)
@@ -1,5 +0,0 @@
---
-"@nextui-org/image": patch
---
-
-add missing `w` to `getWrapperProps` dependency (#3801)
@@ -1,4 +0,0 @@
---
---
-
-Update Twitter logo, links, and named references to X. Removed Twitter logo from social based on review feedback.
@@ -1,5 +0,0 @@
---
-"@nextui-org/popover": minor
---
-
-added `shouldCloseOnScroll` to control the popover closing on scroll (#3594)
@@ -1,5 +0,0 @@
---
-"@nextui-org/tabs": patch
---
-
-Add tab ref
@@ -1,6 +0,0 @@
---
-"@nextui-org/modal": patch
-"@nextui-org/use-draggable": patch
---
-
-Add draggable modal (#2647)
@@ -1,5 +0,0 @@
---
-"@nextui-org/menu": patch
---
-
-Use `useMenu` and `useMenuItem` from `@react-aria` instead of custom hooks
@@ -1,15 +0,0 @@
---
-"@nextui-org/accordion": patch
-"@nextui-org/calendar": patch
-"@nextui-org/modal": patch
-"@nextui-org/navbar": patch
-"@nextui-org/popover": patch
-"@nextui-org/ripple": patch
-"@nextui-org/tooltip": patch
-"@nextui-org/theme": patch
-"@nextui-org/use-infinite-scroll": patch
-"@nextui-org/dom-animation": patch
-"@nextui-org/shared-utils": patch
---
-
-framer motion optimization (#3340)
@@ -1,20 +0,0 @@
---
-"@nextui-org/accordion": patch
-"@nextui-org/autocomplete": patch
-"@nextui-org/button": patch
-"@nextui-org/calendar": patch
-"@nextui-org/card": patch
-"@nextui-org/dropdown": patch
-"@nextui-org/modal": patch
-"@nextui-org/navbar": patch
-"@nextui-org/popover": patch
-"@nextui-org/ripple": patch
-"@nextui-org/select": patch
-"@nextui-org/snippet": patch
-"@nextui-org/tabs": patch
-"@nextui-org/tooltip": patch
-"@nextui-org/system": patch
-"@nextui-org/framer-utils": patch
---
-
-update `framer-motion` versions
@@ -1,5 +0,0 @@
---
-"@nextui-org/theme": patch
---
-
-show margin only with label in Switch component (#3791)
@@ -1,5 +0,0 @@
---
-"@nextui-org/tabs": patch
---
-
-revise the inert attribute in `TabPanel` (#3972)
@@ -1,5 +0,0 @@
---
-"@nextui-org/input": patch
---
-
-clear button should not receive focus when input is disabled.
@@ -1,5 +0,0 @@
---
-"@nextui-org/use-image": patch
---
-
-fix Image ReferenceError in SSR
@@ -1,5 +0,0 @@
---
-"@nextui-org/theme": patch
---
-
-add missing `data-[hover=true]:` for ghost button with danger color
@@ -1,6 +1,6 @@
 name: Enter pre-release mode
-on: workflow_dispatch

+on: workflow_dispatch
 jobs:
  enter-pre-release-mode:
    if: ${{ github.ref == 'refs/heads/beta/release-next' || github.ref == 'refs/heads/canary' }}
@@ -20,6 +20,8 @@ jobs:

      - name: Enter pre-release mode
        id: enter-pre-release-mode
+        env:
+          GITHUB_TOKEN: ${{ secrets.GA_ACCESS_TOKEN }}
        run: |
          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
          git config user.name "github-actions[bot]"
@@ -13,7 +13,7 @@ jobs:

    steps:
      - name: Checkout branch
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
        with:
          ref: ${{ github.event.inputs.branch }}
          fetch-depth: 0
@@ -29,6 +29,8 @@ jobs:
        run: npx rimraf .changeset/pre.json

      - name: Commit and push changes
+        env:
+          GITHUB_TOKEN: ${{ secrets.GA_ACCESS_TOKEN }}
        run: |
          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
          git config user.name "github-actions[bot]"
@@ -7,7 +7,6 @@ on:
      - "packages/**"
    branches:
      - "beta/release-next"
-      - "canary"

 concurrency: ${{ github.workflow }}-${{ github.ref }}

@@ -15,6 +14,7 @@ jobs:
  prerelease:
    name: changesets pre-release
    runs-on: ubuntu-latest
+    timeout-minutes: 30
    permissions:
      contents: write
      pull-requests: write
@@ -28,6 +28,13 @@ jobs:
      - name: Install
        uses: ./.github/common-actions/install

+      - name: Debug condition values
+        run: |
+          echo "pre.json exists: ${{ steps.check_if_pre_json_exists.outputs.files_exists }}"
+          echo "Commit message: ${{ github.event.head_commit.message }}"
+          echo "Contains version packages: ${{ contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+          echo "Full condition would be: ${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+
      - name: Check if pre.json exists
        id: check_if_pre_json_exists
        uses: andstor/file-existence-action@v3.0.0
@@ -52,9 +59,19 @@ jobs:
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

+      - name: Tests
+        if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+        run: pnpm test
+
+      - name: Build
+        if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+        run: pnpm build
+        env:
+          NODE_OPTIONS: "--max-old-space-size=4096"
+
      - name: Publish to NPM
        id: publish-to-npm
-        if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): :package: version packages') }}"
+        if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
        uses: changesets/action@v1
        with:
          publish: pnpm run release
@@ -6,7 +6,7 @@ on:
      - ".changeset/**"
      - "packages/**"
    branches:
-      - main
+      - canary

 concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
@@ -15,6 +15,7 @@ jobs:
  release:
    name: Release
    runs-on: ubuntu-latest
+    timeout-minutes: 30
    steps:
      - name: Checkout branch
        uses: actions/checkout@v4
@@ -22,12 +23,12 @@ jobs:
      - name: Install
        uses: ./.github/common-actions/install

-      - name: Build
-        run: pnpm build
-
      - name: Tests
        run: pnpm test

+      - name: Build
+        run: pnpm build
+
      - name: Create Release Pull Request or Publish to NPM
        id: changesets
        uses: changesets/action@v1
@@ -39,4 +40,15 @@ jobs:
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Create canary release
+        if: steps.changesets.outputs.published != 'true'
+        timeout-minutes: 15
+        run: |
+          git checkout canary
+          pnpm version:canary
+          pnpm release:canary
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -0,0 +1,42 @@
+name: Update Stats
+
+on:
+  schedule:
+    # Runs every Monday at 00:00 UTC
+    - cron: '0 0 * * 1'
+  # Allow manual trigger
+  workflow_dispatch:
+
+jobs:
+  update-stats:
+    name: Update Stats
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: Update search metadata
+        run: pnpm update:search-meta
+
+      - name: Update GitHub info
+        run: pnpm update:github-info
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v5
+        with:
+          commit-message: "chore(stats): update project statistics"
+          title: "chore(stats): 📊 Update project statistics"
+          body: |
+            This PR updates the project statistics including:
+            - Search metadata
+            - GitHub repository information
+            
+            This is an automated PR generated weekly.
+          branch: chore/update-stats
+          base: main
+          delete-branch: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -56,6 +56,7 @@ packages/**/*.backup.ts

 # ignore sitemap
 apps/**/sitemap.xml
+apps/**/sitemap-0.xml

 # turbo
 .turbo
@@ -10,5 +10,5 @@
  },
  "tailwindCSS.experimental.classRegex": [
    ["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"]
-  ]
+  ],
 }
@@ -22,10 +22,6 @@
    {
      "files": ["*.ts", "*.tsx"],
      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
    }
  ]
 }
@@ -11,7 +11,7 @@ interface DocsLayoutProps {
 export default function DocsLayout({children}: DocsLayoutProps) {
  return (
    <>
-      <main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
+      <main className="relative container mx-auto max-w-8xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
        <div className="grid grid-cols-12">
          <div className="hidden overflow-visible relative z-10 lg:block lg:col-span-2 mt-8 pr-4">
            <DocsSidebar routes={manifest.routes} />
@@ -0,0 +1,561 @@
+"use client";
+
+import {
+  RadioGroup,
+  Radio,
+  Button,
+  Accordion,
+  Tabs,
+  Textarea,
+  Input,
+  Tab,
+  Avatar,
+  Select,
+  SelectItem,
+  AccordionItem,
+  Pagination,
+  extendVariants,
+  PaginationItem,
+} from "@nextui-org/react";
+import {useFilter} from "@react-aria/i18n";
+import {useEffect, useMemo, useRef, useState} from "react";
+import {useSearchParams} from "next/navigation";
+
+import {SearchLinearIcon} from "@/components/icons";
+
+const MyRadioGroup = () => {
+  const [radio, setRadio] = useState("1");
+
+  return (
+    <RadioGroup value={radio} onValueChange={setRadio}>
+      <Radio value="1">Radio 1</Radio>
+      <Radio value="2">Radio 2</Radio>
+      <Radio value="3">Radio 3</Radio>
+      <Radio value="4">Radio 4</Radio>
+      <Radio value="5">Radio 5</Radio>
+      <Radio value="6">Radio 6</Radio>
+      <Radio value="7">Radio 7</Radio>
+      <Radio value="8">Radio 8</Radio>
+      <Radio value="9">Radio 9</Radio>
+      <Radio value="10">Radio 10</Radio>
+      <Radio value="11">Radio 11</Radio>
+      <Radio value="12">Radio 12</Radio>
+      <Radio value="13">Radio 13</Radio>
+      <Radio value="14">Radio 14</Radio>
+      <Radio value="15">Radio 15</Radio>
+      <Radio value="16">Radio 16</Radio>
+      <Radio value="17">Radio 17</Radio>
+      <Radio value="18">Radio 18</Radio>
+      <Radio value="19">Radio 19</Radio>
+      <Radio value="20">Radio 20</Radio>
+      <Radio value="21">Radio 21</Radio>
+      <Radio value="22">Radio 22</Radio>
+      <Radio value="23">Radio 23</Radio>
+      <Radio value="24">Radio 24</Radio>
+      <Radio value="25">Radio 25</Radio>
+      <Radio value="26">Radio 26</Radio>
+      <Radio value="27">Radio 27</Radio>
+      <Radio value="28">Radio 28</Radio>
+      <Radio value="29">Radio 29</Radio>
+      <Radio value="30">Radio 30</Radio>
+      <Radio value="31">Radio 31</Radio>
+      <Radio value="32">Radio 32</Radio>
+      <Radio value="33">Radio 33</Radio>
+      <Radio value="34">Radio 34</Radio>
+      <Radio value="35">Radio 35</Radio>
+      <Radio value="36">Radio 36</Radio>
+      <Radio value="37">Radio 37</Radio>
+      <Radio value="38">Radio 38</Radio>
+      <Radio value="39">Radio 39</Radio>
+      <Radio value="40">Radio 40</Radio>
+      <Radio value="41">Radio 41</Radio>
+      <Radio value="42">Radio 42</Radio>
+      <Radio value="43">Radio 43</Radio>
+      <Radio value="44">Radio 44</Radio>
+      <Radio value="45">Radio 45</Radio>
+      <Radio value="46">Radio 46</Radio>
+      <Radio value="47">Radio 47</Radio>
+      <Radio value="48">Radio 48</Radio>
+      <Radio value="49">Radio 49</Radio>
+      <Radio value="50">Radio 50</Radio>
+      <Radio value="51">Radio 51</Radio>
+      <Radio value="52">Radio 52</Radio>
+      <Radio value="53">Radio 53</Radio>
+      <Radio value="54">Radio 54</Radio>
+      <Radio value="55">Radio 55</Radio>
+      <Radio value="56">Radio 56</Radio>
+      <Radio value="57">Radio 57</Radio>
+      <Radio value="58">Radio 58</Radio>
+      <Radio value="59">Radio 59</Radio>
+      <Radio value="60">Radio 60</Radio>
+      <Radio value="61">Radio 61</Radio>
+      <Radio value="62">Radio 62</Radio>
+    </RadioGroup>
+  );
+};
+
+const MyInput = extendVariants(Input, {
+  variants: {
+    color: {
+      stone: {
+        inputWrapper: [
+          "bg-zinc-100",
+          "border",
+          "shadow",
+          "transition-colors",
+          "focus-within:bg-zinc-100",
+          "data-[hover=true]:border-zinc-600",
+          "data-[hover=true]:bg-zinc-100",
+          "group-data-[focus=true]:border-zinc-600",
+          // dark theme
+          "dark:bg-zinc-900",
+          "dark:border-zinc-800",
+          "dark:data-[hover=true]:bg-zinc-900",
+          "dark:focus-within:bg-zinc-900",
+        ],
+        input: [
+          "text-zinc-800",
+          "placeholder:text-zinc-600",
+          // dark theme
+          "dark:text-zinc-400",
+          "dark:placeholder:text-zinc-600",
+        ],
+      },
+    },
+    size: {
+      xs: {
+        inputWrapper: "h-6 min-h-6 px-1",
+        input: "text-tiny",
+      },
+      md: {
+        inputWrapper: "h-10 min-h-10",
+        input: "text-small",
+      },
+      xl: {
+        inputWrapper: "h-14 min-h-14",
+        input: "text-medium",
+      },
+    },
+    radius: {
+      xs: {
+        inputWrapper: "rounded",
+      },
+      sm: {
+        inputWrapper: "rounded-[4px]",
+      },
+    },
+    textSize: {
+      base: {
+        input: "text-base",
+      },
+    },
+    removeLabel: {
+      true: {
+        label: "hidden",
+      },
+      false: {},
+    },
+  },
+  defaultVariants: {
+    color: "stone",
+    textSize: "base",
+    removeLabel: true,
+  },
+});
+
+const MyButton2 = extendVariants(Button, {
+  variants: {
+    color: {
+      foreground:
+        "bg-foreground text-background data-[hover=true]:bg-foreground/90 data-[pressed=true]:bg-foreground/80",
+    },
+    isScalable: {
+      true: "scale-125",
+      false: "",
+    },
+    size: {
+      xl: "size--xl",
+      "2xl": "size--2xl",
+    },
+    mySize: {
+      lg: "px-12 py-6 text-lg",
+      xl: "px-12 py-6 text-xl",
+    },
+  },
+  defaultVariants: {
+    color: "foreground",
+  },
+});
+
+const usersData = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
+    email: "mia.robinson@example.com",
+  },
+];
+
+export default function NextUIPerf() {
+  const [textA, setTextA] = useState<string>("");
+  const [textB, setTextB] = useState<string>("");
+  const [textC, setTextC] = useState<string>("");
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [inputValue, setInputValue] = useState<string>();
+  const [selectedKey, setSelectedKey] = useState<string>("");
+
+  const searchParams = useSearchParams();
+
+  const page = Number(searchParams.get("page"));
+
+  let {startsWith} = useFilter({sensitivity: "base"});
+
+  const filteredItems = inputValue
+    ? usersData.filter((item) => startsWith(item.name, inputValue))
+    : usersData;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    isOpen && inputRef?.current?.focus();
+  }, [isOpen]);
+
+  const handleSelectionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedKey(e.target.value);
+  };
+
+  const topContent = useMemo(() => {
+    return (
+      <Input
+        ref={inputRef}
+        isClearable
+        aria-activedescendant={selectedKey}
+        aria-expanded={isOpen}
+        aria-label="Search user"
+        autoComplete="off"
+        autoCorrect="off"
+        className="z-10 sticky top-1"
+        placeholder="Search..."
+        spellCheck={false}
+        startContent={<SearchLinearIcon className="text-default-400" size={18} strokeWidth="2" />}
+        type="text"
+        onValueChange={setInputValue}
+      />
+    );
+  }, [inputRef, selectedKey, isOpen]);
+
+  return (
+    <div className="w-full p-24 gap-4 flex flex-col">
+      <Select
+        classNames={{
+          base: "max-w-xs",
+          listboxWrapper: "scroll-pb-6 scroll-pt-28",
+        }}
+        items={filteredItems}
+        label="Assigned to"
+        labelPlacement="outside"
+        listboxProps={{
+          topContent,
+          variant: "flat",
+          classNames: {
+            base: [
+              "before:content-[''] before:rounded-t-medium before:fixed before:w-full before:h-14 before:z-10",
+              "before:top-0 before:left-0 before:bg-gradient-to-b before:from-default-50",
+            ],
+          },
+        }}
+        placeholder="Select a user"
+        selectedKeys={[selectedKey]}
+        showScrollIndicators={false}
+        variant="flat"
+        onChange={handleSelectionChange}
+        onOpenChange={setIsOpen}
+      >
+        {(item) => (
+          <SelectItem key={item.id} textValue={item.name}>
+            <div className="flex gap-2 items-center">
+              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+              <div className="flex flex-col">
+                <span className="text-small">{item.name}</span>
+                <span className="text-tiny text-default-400">{item.email}</span>
+              </div>
+            </div>
+          </SelectItem>
+        )}
+      </Select>
+
+      <Accordion>
+        <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+          Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
+          reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
+          eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
+          ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit.
+          Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in
+          cupidatat voluptate eu officia. Ut laborum sunt nostrud magna. Ex magna esse cillum enim
+          incididunt pariatur qui veniam dolor. Exercitation id culpa et enim mollit duis duis
+          aliquip. Magna ullamco est cupidatat laboris irure pariatur aliquip duis aute cillum.
+          Officia irure do laboris ea nisi sunt reprehenderit laboris irure. Ex eiusmod in duis
+          veniam excepteur. Sunt et et laboris culpa. Mollit excepteur occaecat elit anim officia.
+          Laborum commodo proident cupidatat pariatur eu veniam id qui do culpa. Quis consectetur
+          adipisicing anim ex ea velit excepteur. Deserunt laboris ex aute sunt laborum tempor ea
+          enim dolore ut in. Id aliqua Lorem exercitation qui velit nostrud anim reprehenderit enim.
+          Nisi elit fugiat deserunt elit. Sit excepteur ipsum enim excepteur irure irure sint veniam
+          elit consequat ea id. Lorem ea qui sunt enim occaecat excepteur officia ex consequat
+          nostrud. Tempor sint Lorem est culpa do.
+        </AccordionItem>
+        <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+          Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
+          reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
+          eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
+          ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit.
+          Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in
+          cupidatat voluptate eu officia. Ut laborum sunt nostrud magna. Ex magna esse cillum enim
+        </AccordionItem>
+        <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+          Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
+          reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
+          eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
+          ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit.
+          Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in
+        </AccordionItem>
+      </Accordion>
+      <Tabs classNames={{panel: "flex flex-col gap-5"}} variant="underlined">
+        <Tab title="Test 1">
+          <Textarea defaultValue="ASdasd" label="Default value (uncontrolled)" />
+          <Input label="Text B Tab 1" value={textB} onValueChange={setTextB} />
+          <Textarea label="Text C Tab 1" value={textC} onValueChange={setTextC} />
+        </Tab>
+        <Tab title="Test 2">
+          <Textarea label="Text B Tab 2" value={textB} onValueChange={setTextB} />
+          <Textarea label="Text C Tab 2" value={textC} onValueChange={setTextC} />
+        </Tab>
+        <Tab title="Test 3">
+          <Textarea label="Text B Tab 3" value={textB} onValueChange={setTextB} />
+          <Textarea label="Text C Tab 3" value={textC} onValueChange={setTextC} />
+        </Tab>
+      </Tabs>
+
+      <h2>Outside</h2>
+      <Textarea label="Text A" placeholder="Text A" value={textA} onValueChange={setTextA} />
+      <Textarea label="Text B" placeholder="Text B" value={textB} onValueChange={setTextB} />
+      <Textarea label="Text C" placeholder="Text C" value={textC} onValueChange={setTextC} />
+
+      <MyRadioGroup />
+
+      <MyInput
+        isClearable
+        placeholder="Search..."
+        radius="md"
+        size="md"
+        startContent={<SearchLinearIcon className="text-zinc-500" size={16} />}
+      />
+
+      <Button>Click Me!</Button>
+
+      <MyButton2 color="primary">Press Me!</MyButton2>
+
+      <Pagination
+        showControls
+        initialPage={page ?? 1}
+        renderItem={({page, ...itemProps}) => {
+          return <PaginationItem href={`/examples/perf?page=${page}`} {...itemProps} />;
+        }}
+        total={10}
+      />
+    </div>
+  );
+}
@@ -1,561 +1,11 @@
-"use client";
+import {Suspense} from "react";

-import {
-  RadioGroup,
-  Radio,
-  Button,
-  Accordion,
-  Tabs,
-  Textarea,
-  Input,
-  Tab,
-  Avatar,
-  Select,
-  SelectItem,
-  AccordionItem,
-  Pagination,
-  extendVariants,
-  PaginationItem,
-} from "@nextui-org/react";
-import {useFilter} from "@react-aria/i18n";
-import {useEffect, useMemo, useRef, useState} from "react";
-import {useSearchParams} from "next/navigation";
-
-import {SearchLinearIcon} from "@/components/icons";
-
-const MyRadioGroup = () => {
-  const [radio, setRadio] = useState("1");
+import ClientPage from "./client-page";

+export default function PerfPage() {
  return (
-    <RadioGroup value={radio} onValueChange={setRadio}>
-      <Radio value="1">Radio 1</Radio>
-      <Radio value="2">Radio 2</Radio>
-      <Radio value="3">Radio 3</Radio>
-      <Radio value="4">Radio 4</Radio>
-      <Radio value="5">Radio 5</Radio>
-      <Radio value="6">Radio 6</Radio>
-      <Radio value="7">Radio 7</Radio>
-      <Radio value="8">Radio 8</Radio>
-      <Radio value="9">Radio 9</Radio>
-      <Radio value="10">Radio 10</Radio>
-      <Radio value="11">Radio 11</Radio>
-      <Radio value="12">Radio 12</Radio>
-      <Radio value="13">Radio 13</Radio>
-      <Radio value="14">Radio 14</Radio>
-      <Radio value="15">Radio 15</Radio>
-      <Radio value="16">Radio 16</Radio>
-      <Radio value="17">Radio 17</Radio>
-      <Radio value="18">Radio 18</Radio>
-      <Radio value="19">Radio 19</Radio>
-      <Radio value="20">Radio 20</Radio>
-      <Radio value="21">Radio 21</Radio>
-      <Radio value="22">Radio 22</Radio>
-      <Radio value="23">Radio 23</Radio>
-      <Radio value="24">Radio 24</Radio>
-      <Radio value="25">Radio 25</Radio>
-      <Radio value="26">Radio 26</Radio>
-      <Radio value="27">Radio 27</Radio>
-      <Radio value="28">Radio 28</Radio>
-      <Radio value="29">Radio 29</Radio>
-      <Radio value="30">Radio 30</Radio>
-      <Radio value="31">Radio 31</Radio>
-      <Radio value="32">Radio 32</Radio>
-      <Radio value="33">Radio 33</Radio>
-      <Radio value="34">Radio 34</Radio>
-      <Radio value="35">Radio 35</Radio>
-      <Radio value="36">Radio 36</Radio>
-      <Radio value="37">Radio 37</Radio>
-      <Radio value="38">Radio 38</Radio>
-      <Radio value="39">Radio 39</Radio>
-      <Radio value="40">Radio 40</Radio>
-      <Radio value="41">Radio 41</Radio>
-      <Radio value="42">Radio 42</Radio>
-      <Radio value="43">Radio 43</Radio>
-      <Radio value="44">Radio 44</Radio>
-      <Radio value="45">Radio 45</Radio>
-      <Radio value="46">Radio 46</Radio>
-      <Radio value="47">Radio 47</Radio>
-      <Radio value="48">Radio 48</Radio>
-      <Radio value="49">Radio 49</Radio>
-      <Radio value="50">Radio 50</Radio>
-      <Radio value="51">Radio 51</Radio>
-      <Radio value="52">Radio 52</Radio>
-      <Radio value="53">Radio 53</Radio>
-      <Radio value="54">Radio 54</Radio>
-      <Radio value="55">Radio 55</Radio>
-      <Radio value="56">Radio 56</Radio>
-      <Radio value="57">Radio 57</Radio>
-      <Radio value="58">Radio 58</Radio>
-      <Radio value="59">Radio 59</Radio>
-      <Radio value="60">Radio 60</Radio>
-      <Radio value="61">Radio 61</Radio>
-      <Radio value="62">Radio 62</Radio>
-    </RadioGroup>
-  );
-};
-
-const MyInput = extendVariants(Input, {
-  variants: {
-    color: {
-      stone: {
-        inputWrapper: [
-          "bg-zinc-100",
-          "border",
-          "shadow",
-          "transition-colors",
-          "focus-within:bg-zinc-100",
-          "data-[hover=true]:border-zinc-600",
-          "data-[hover=true]:bg-zinc-100",
-          "group-data-[focus=true]:border-zinc-600",
-          // dark theme
-          "dark:bg-zinc-900",
-          "dark:border-zinc-800",
-          "dark:data-[hover=true]:bg-zinc-900",
-          "dark:focus-within:bg-zinc-900",
-        ],
-        input: [
-          "text-zinc-800",
-          "placeholder:text-zinc-600",
-          // dark theme
-          "dark:text-zinc-400",
-          "dark:placeholder:text-zinc-600",
-        ],
-      },
-    },
-    size: {
-      xs: {
-        inputWrapper: "h-6 min-h-6 px-1",
-        input: "text-tiny",
-      },
-      md: {
-        inputWrapper: "h-10 min-h-10",
-        input: "text-small",
-      },
-      xl: {
-        inputWrapper: "h-14 min-h-14",
-        input: "text-medium",
-      },
-    },
-    radius: {
-      xs: {
-        inputWrapper: "rounded",
-      },
-      sm: {
-        inputWrapper: "rounded-[4px]",
-      },
-    },
-    textSize: {
-      base: {
-        input: "text-base",
-      },
-    },
-    removeLabel: {
-      true: {
-        label: "hidden",
-      },
-      false: {},
-    },
-  },
-  defaultVariants: {
-    color: "stone",
-    textSize: "base",
-    removeLabel: true,
-  },
-});
-
-const MyButton2 = extendVariants(Button, {
-  variants: {
-    color: {
-      foreground:
-        "bg-foreground text-background data-[hover=true]:bg-foreground/90 data-[pressed=true]:bg-foreground/80",
-    },
-    isScalable: {
-      true: "scale-125",
-      false: "",
-    },
-    size: {
-      xl: "size--xl",
-      "2xl": "size--2xl",
-    },
-    mySize: {
-      lg: "px-12 py-6 text-lg",
-      xl: "px-12 py-6 text-xl",
-    },
-  },
-  defaultVariants: {
-    color: "foreground",
-  },
-});
-
-const usersData = [
-  {
-    id: 1,
-    name: "Tony Reichert",
-    role: "CEO",
-    team: "Management",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
-    email: "tony.reichert@example.com",
-  },
-  {
-    id: 2,
-    name: "Zoey Lang",
-    role: "Tech Lead",
-    team: "Development",
-    status: "paused",
-    age: "25",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
-    email: "zoey.lang@example.com",
-  },
-  {
-    id: 3,
-    name: "Jane Fisher",
-    role: "Sr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
-    email: "jane.fisher@example.com",
-  },
-  {
-    id: 4,
-    name: "William Howard",
-    role: "C.M.",
-    team: "Marketing",
-    status: "vacation",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
-    email: "william.howard@example.com",
-  },
-  {
-    id: 5,
-    name: "Kristen Copper",
-    role: "S. Manager",
-    team: "Sales",
-    status: "active",
-    age: "24",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
-    email: "kristen.cooper@example.com",
-  },
-  {
-    id: 6,
-    name: "Brian Kim",
-    role: "P. Manager",
-    team: "Management",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
-    email: "brian.kim@example.com",
-    status: "active",
-  },
-  {
-    id: 7,
-    name: "Michael Hunt",
-    role: "Designer",
-    team: "Design",
-    status: "paused",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
-    email: "michael.hunt@example.com",
-  },
-  {
-    id: 8,
-    name: "Samantha Brooks",
-    role: "HR Manager",
-    team: "HR",
-    status: "active",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
-    email: "samantha.brooks@example.com",
-  },
-  {
-    id: 9,
-    name: "Frank Harrison",
-    role: "F. Manager",
-    team: "Finance",
-    status: "vacation",
-    age: "33",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
-    email: "frank.harrison@example.com",
-  },
-  {
-    id: 10,
-    name: "Emma Adams",
-    role: "Ops Manager",
-    team: "Operations",
-    status: "active",
-    age: "35",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
-    email: "emma.adams@example.com",
-  },
-  {
-    id: 11,
-    name: "Brandon Stevens",
-    role: "Jr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
-    email: "brandon.stevens@example.com",
-  },
-  {
-    id: 12,
-    name: "Megan Richards",
-    role: "P. Manager",
-    team: "Product",
-    status: "paused",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
-    email: "megan.richards@example.com",
-  },
-  {
-    id: 13,
-    name: "Oliver Scott",
-    role: "S. Manager",
-    team: "Security",
-    status: "active",
-    age: "37",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
-    email: "oliver.scott@example.com",
-  },
-  {
-    id: 14,
-    name: "Grace Allen",
-    role: "M. Specialist",
-    team: "Marketing",
-    status: "active",
-    age: "30",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
-    email: "grace.allen@example.com",
-  },
-  {
-    id: 15,
-    name: "Noah Carter",
-    role: "IT Specialist",
-    team: "I. Technology",
-    status: "paused",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
-    email: "noah.carter@example.com",
-  },
-  {
-    id: 16,
-    name: "Ava Perez",
-    role: "Manager",
-    team: "Sales",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
-    email: "ava.perez@example.com",
-  },
-  {
-    id: 17,
-    name: "Liam Johnson",
-    role: "Data Analyst",
-    team: "Analysis",
-    status: "active",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
-    email: "liam.johnson@example.com",
-  },
-  {
-    id: 18,
-    name: "Sophia Taylor",
-    role: "QA Analyst",
-    team: "Testing",
-    status: "active",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
-    email: "sophia.taylor@example.com",
-  },
-  {
-    id: 19,
-    name: "Lucas Harris",
-    role: "Administrator",
-    team: "Information Technology",
-    status: "paused",
-    age: "32",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
-    email: "lucas.harris@example.com",
-  },
-  {
-    id: 20,
-    name: "Mia Robinson",
-    role: "Coordinator",
-    team: "Operations",
-    status: "active",
-    age: "26",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
-    email: "mia.robinson@example.com",
-  },
-];
-
-export default function NextUIPerf() {
-  const [textA, setTextA] = useState<string>("");
-  const [textB, setTextB] = useState<string>("");
-  const [textC, setTextC] = useState<string>("");
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [inputValue, setInputValue] = useState<string>();
-  const [selectedKey, setSelectedKey] = useState<string>("");
-
-  const searchParams = useSearchParams();
-
-  const page = Number(searchParams.get("page"));
-
-  let {startsWith} = useFilter({sensitivity: "base"});
-
-  const filteredItems = inputValue
-    ? usersData.filter((item) => startsWith(item.name, inputValue))
-    : usersData;
-
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    isOpen && inputRef?.current?.focus();
-  }, [isOpen]);
-
-  const handleSelectionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedKey(e.target.value);
-  };
-
-  const topContent = useMemo(() => {
-    return (
-      <Input
-        ref={inputRef}
-        isClearable
-        aria-activedescendant={selectedKey}
-        aria-expanded={isOpen}
-        aria-label="Search user"
-        autoComplete="off"
-        autoCorrect="off"
-        className="z-10 sticky top-1"
-        placeholder="Search..."
-        spellCheck={false}
-        startContent={<SearchLinearIcon className="text-default-400" size={18} strokeWidth="2" />}
-        type="text"
-        onValueChange={setInputValue}
-      />
-    );
-  }, [inputRef, selectedKey, isOpen]);
-
-  return (
-    <div className="w-full p-24 gap-4 flex flex-col">
-      <Select
-        classNames={{
-          base: "max-w-xs",
-          listboxWrapper: "scroll-pb-6 scroll-pt-28",
-        }}
-        items={filteredItems}
-        label="Assigned to"
-        labelPlacement="outside"
-        listboxProps={{
-          topContent,
-          variant: "flat",
-          classNames: {
-            base: [
-              "before:content-[''] before:rounded-t-medium before:fixed before:w-full before:h-14 before:z-10",
-              "before:top-0 before:left-0 before:bg-gradient-to-b before:from-default-50",
-            ],
-          },
-        }}
-        placeholder="Select a user"
-        selectedKeys={[selectedKey]}
-        showScrollIndicators={false}
-        variant="flat"
-        onChange={handleSelectionChange}
-        onOpenChange={setIsOpen}
-      >
-        {(item) => (
-          <SelectItem key={item.id} textValue={item.name}>
-            <div className="flex gap-2 items-center">
-              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
-              <div className="flex flex-col">
-                <span className="text-small">{item.name}</span>
-                <span className="text-tiny text-default-400">{item.email}</span>
-              </div>
-            </div>
-          </SelectItem>
-        )}
-      </Select>
-
-      <Accordion>
-        <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-          Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
-          reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
-          eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
-          ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit.
-          Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in
-          cupidatat voluptate eu officia. Ut laborum sunt nostrud magna. Ex magna esse cillum enim
-          incididunt pariatur qui veniam dolor. Exercitation id culpa et enim mollit duis duis
-          aliquip. Magna ullamco est cupidatat laboris irure pariatur aliquip duis aute cillum.
-          Officia irure do laboris ea nisi sunt reprehenderit laboris irure. Ex eiusmod in duis
-          veniam excepteur. Sunt et et laboris culpa. Mollit excepteur occaecat elit anim officia.
-          Laborum commodo proident cupidatat pariatur eu veniam id qui do culpa. Quis consectetur
-          adipisicing anim ex ea velit excepteur. Deserunt laboris ex aute sunt laborum tempor ea
-          enim dolore ut in. Id aliqua Lorem exercitation qui velit nostrud anim reprehenderit enim.
-          Nisi elit fugiat deserunt elit. Sit excepteur ipsum enim excepteur irure irure sint veniam
-          elit consequat ea id. Lorem ea qui sunt enim occaecat excepteur officia ex consequat
-          nostrud. Tempor sint Lorem est culpa do.
-        </AccordionItem>
-        <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-          Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
-          reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
-          eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
-          ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit.
-          Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in
-          cupidatat voluptate eu officia. Ut laborum sunt nostrud magna. Ex magna esse cillum enim
-        </AccordionItem>
-        <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-          Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
-          reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
-          eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
-          ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit.
-          Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in
-        </AccordionItem>
-      </Accordion>
-      <Tabs classNames={{panel: "flex flex-col gap-5"}} variant="underlined">
-        <Tab title="Test 1">
-          <Textarea defaultValue="ASdasd" label="Default value (uncontrolled)" />
-          <Input label="Text B Tab 1" value={textB} onValueChange={setTextB} />
-          <Textarea label="Text C Tab 1" value={textC} onValueChange={setTextC} />
-        </Tab>
-        <Tab title="Test 2">
-          <Textarea label="Text B Tab 2" value={textB} onValueChange={setTextB} />
-          <Textarea label="Text C Tab 2" value={textC} onValueChange={setTextC} />
-        </Tab>
-        <Tab title="Test 3">
-          <Textarea label="Text B Tab 3" value={textB} onValueChange={setTextB} />
-          <Textarea label="Text C Tab 3" value={textC} onValueChange={setTextC} />
-        </Tab>
-      </Tabs>
-
-      <h2>Outside</h2>
-      <Textarea label="Text A" placeholder="Text A" value={textA} onValueChange={setTextA} />
-      <Textarea label="Text B" placeholder="Text B" value={textB} onValueChange={setTextB} />
-      <Textarea label="Text C" placeholder="Text C" value={textC} onValueChange={setTextC} />
-
-      <MyRadioGroup />
-
-      <MyInput
-        isClearable
-        placeholder="Search..."
-        radius="md"
-        size="md"
-        startContent={<SearchLinearIcon className="text-zinc-500" size={16} />}
-      />
-
-      <Button>Click Me!</Button>
-
-      <MyButton2 color="primary">Press Me!</MyButton2>
-
-      <Pagination
-        showControls
-        initialPage={page ?? 1}
-        renderItem={({page, ...itemProps}) => {
-          return <PaginationItem href={`/examples/perf?page=${page}`} {...itemProps} />;
-        }}
-        total={10}
-      />
-    </div>
+    <Suspense fallback={<div>Loading...</div>}>
+      <ClientPage />
+    </Suspense>
  );
 }
@@ -1,6 +1,6 @@
 import "@/styles/globals.css";
 import "@/styles/sandpack.css";
-import {Metadata} from "next";
+import {Metadata, Viewport} from "next";
 import {clsx} from "@nextui-org/shared-utils";

 import {Providers} from "./providers";
@@ -8,7 +8,7 @@ import {Providers} from "./providers";
 import {Cmdk} from "@/components/cmdk";
 import manifest from "@/config/routes.json";
 import {siteConfig} from "@/config/site";
-import {fontSans} from "@/config/fonts";
+import {fonts} from "@/config/fonts";
 import {Navbar} from "@/components/navbar";
 import {Footer} from "@/components/footer";
 import {ProBanner} from "@/components/pro-banner";
@@ -33,10 +33,6 @@ export const metadata: Metadata = {
    "UI Framework",
    "UI Design System",
  ],
-  themeColor: [
-    {media: "(prefers-color-scheme: light)", color: "white"},
-    {media: "(prefers-color-scheme: dark)", color: "black"},
-  ],
  icons: {
    icon: "/favicon.ico",
    shortcut: "/favicon-32x32.png",
@@ -47,26 +43,41 @@ export const metadata: Metadata = {
  openGraph: siteConfig.openGraph,
  authors: [
    {
-      name: "jrgarciadev",
-      url: "https://jrgarciadev.com",
+      name: "getnextui",
+      url: "https://x.com/getnextui",
    },
  ],
-  creator: "jrgarciadev",
+  creator: "getnextui",
  alternates: {
    canonical: "https://nextui.org",
    types: {
      "application/rss+xml": [{url: "https://nextui.org/feed.xml", title: "NextUI RSS Feed"}],
    },
  },
-  viewport:
-    "viewport-fit=cover, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",
+};
+
+export const viewport: Viewport = {
+  themeColor: [
+    {color: "#f4f4f5", media: "(prefers-color-scheme: light)"},
+    {color: "#111111", media: "(prefers-color-scheme: dark)"},
+  ],
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
 };

 export default function RootLayout({children}: {children: React.ReactNode}) {
  return (
    <html suppressHydrationWarning dir="ltr" lang="en">
      <head />
-      <body className={clsx("min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
+      <body
+        className={clsx(
+          "min-h-screen bg-background font-sans antialiased",
+          fonts.sans.variable,
+          fonts.mono.variable,
+        )}
+      >
        <Providers themeProps={{attribute: "class", defaultTheme: "dark"}}>
          <div className="relative flex flex-col" id="app-container">
            <ProBanner />
@@ -1,4 +1,5 @@
 import {Spacer} from "@nextui-org/spacer";
+import {Suspense} from "react";

 import {Hero} from "@/components/marketing/hero";
 import {FeaturesGrid} from "@/components/marketing/features-grid";
@@ -9,26 +10,12 @@ import {Customization} from "@/components/marketing/customization";
 import {LastButNotLeast} from "@/components/marketing/last-but-not-least";
 import {InstallBanner} from "@/components/marketing/install-banner";
 import {Community} from "@/components/marketing/community";
-import {Support} from "@/components/marketing/support";
+import Support from "@/components/marketing/support";
 import landingContent from "@/content/landing";
-import {getAllSponsors} from "@/utils/get-all-sponsors";
 import {Sponsors} from "@/components/marketing/sponsors";
-
-async function getData() {
-  try {
-    const sponsors = await getAllSponsors();
-
-    return {
-      sponsors,
-    };
-  } catch (error) {
-    throw new Error("Failed to fetch data");
-  }
-}
+import {NextUIProSection} from "@/components/marketing/nextui-pro-section";

 export default async function Home() {
-  const data = await getData();
-
  return (
    <main className="container mx-auto max-w-7xl px-6 flex-grow">
      <section className="flex flex-col items-center justify-center">
@@ -39,8 +26,11 @@ export default async function Home() {
        <A11yOtb />
        <DarkMode />
        <Customization />
+        <NextUIProSection />
        <LastButNotLeast />
-        <Support sponsors={data.sponsors} />
+        <Suspense fallback={<div>Loading...</div>}>
+          <Support />
+        </Suspense>
        <Spacer y={24} />
        <InstallBanner />
        <Community />
@@ -5,7 +5,7 @@ import type {ReactNode} from "react";
 import * as React from "react";
 import {NextUIProvider} from "@nextui-org/react";
 import {ThemeProvider as NextThemesProvider} from "next-themes";
-import {ThemeProviderProps} from "next-themes/dist/types";
+import {ThemeProviderProps} from "next-themes";
 import {useRouter} from "next/navigation";
 import {useEffect} from "react";
 import posthog from "posthog-js";
@@ -23,7 +23,7 @@ export function Providers({children, themeProps}: ProvidersProps) {

  const ProviderWrapper = ({children}: {children: ReactNode}) => {
    useEffect(() => {
-      if (typeof window !== "undefined") {
+      if (typeof window !== "undefined" && __PROD__) {
        posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
          api_host: "/ingest",
          person_profiles: "identified_only",
@@ -1,3 +1,5 @@
+"use client";
+
 import React, {useCallback, useEffect} from "react";
 import Script from "next/script";

@@ -5,7 +7,7 @@ import carbonOptimize from "./carbon-optimize";

 import {loadScript} from "@/utils/scripts";
 import {useIsMounted} from "@/hooks/use-is-mounted";
-import {__PROD__} from "@/utils";
+import {__PROD__, __ENABLE_ADS__} from "@/utils";

 const EA_PROVIDER_RATIO = 0.85;

@@ -94,7 +96,7 @@ export const CarbonAd: React.FC<unknown> = () => {
    };
  }, [isMounted]);

-  if (!__PROD__) return null;
+  if (!__PROD__ || !__ENABLE_ADS__) return null;

  return (
    <>
@@ -34,6 +34,7 @@ const BlogPostCard = (post: BlogPost) => {
          transition={{duration: 0.3}}
        >
          <Card
+            disableRipple
            isBlurred
            as={NextLink}
            className="p-2 h-full border-transparent text-start bg-white/5 dark:bg-default-400/10 backdrop-blur-lg backdrop-saturate-[1.8]"
@@ -1,6 +1,7 @@
 import {FC} from "react";
 import {Button, ButtonProps} from "@nextui-org/react";
 import {useClipboard} from "@nextui-org/use-clipboard";
+import {clsx} from "@nextui-org/shared-utils";

 import {CheckLinearIcon, CopyLinearIcon} from "@/components/icons";

@@ -8,7 +9,7 @@ export interface CopyButtonProps extends ButtonProps {
  value?: string;
 }

-export const CopyButton: FC<CopyButtonProps> = ({value, ...buttonProps}) => {
+export const CopyButton: FC<CopyButtonProps> = ({value, className, ...buttonProps}) => {
  const {copy, copied} = useClipboard();

  const handleCopy = () => {
@@ -18,19 +19,22 @@ export const CopyButton: FC<CopyButtonProps> = ({value, ...buttonProps}) => {
  return (
    <Button
      isIconOnly
-      className="absolute z-50 right-3 top-8 border-1 border-transparent bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100 before:rounded-lg"
+      className={clsx(
+        "absolute z-50 right-3 text-zinc-300 top-8 border-1 border-transparent bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100 before:rounded-lg",
+        className,
+      )}
      size="sm"
      variant="bordered"
      onPress={handleCopy}
      {...buttonProps}
    >
      <CheckLinearIcon
-        className="absolute opacity-0 scale-50 text-zinc-300 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+        className="absolute opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
        data-visible={copied}
        size={16}
      />
      <CopyLinearIcon
-        className="absolute opacity-0 scale-50 text-zinc-300 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+        className="absolute opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
        data-visible={!copied}
        size={16}
      />
@@ -27,24 +27,23 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
      {...otherProps}
    >
      <CardBody>
-        <div className="grid grid-cols-6 md:grid-cols-12 gap-6 md:gap-4 items-center justify-center">
+        <div className="md:max-h-[200px] grid grid-cols-6 md:grid-cols-12 gap-6 md:gap-4 items-center justify-center">
          <div className="relative col-span-6 md:col-span-4">
            <Image
              alt="Album cover"
              as={NextImage}
              className="object-cover"
-              height={300}
+              height={160}
              shadow="md"
              src="/images/album-cover.png"
              width={240}
            />
          </div>
-
          <div className="flex flex-col col-span-6 md:col-span-8">
            <div className="flex justify-between items-start">
              <div className="flex flex-col gap-0">
-                <p className="font-semibold text-foreground/90">Daily Mix</p>
-                <p className="text-sm text-foreground/80">12 Tracks</p>
+                <p className="text-sm font-semibold text-foreground">Daily Mix</p>
+                <p className="text-xs text-foreground/80">12 Tracks</p>
                <p className="text-lg font-medium mt-2">Frontend Radio</p>
              </div>
              <Button
@@ -1,15 +1,14 @@
 "use client";

-import {useState, FC} from "react";
+import {useState} from "react";
 import {Card, CardHeader, Button, Avatar, CardBody, CardFooter} from "@nextui-org/react";
 import {clsx} from "@nextui-org/shared-utils";
-import NextImage from "next/image";

 interface UserTwitterCardProps {
  className?: string;
 }

-export const UserTwitterCard: FC<UserTwitterCardProps> = ({className}) => {
+export const UserTwitterCard = ({className}: UserTwitterCardProps) => {
  const [isFollowed, setIsFollowed] = useState(false);

  return (
@@ -18,7 +17,6 @@ export const UserTwitterCard: FC<UserTwitterCardProps> = ({className}) => {
        <div className="flex gap-5">
          <Avatar
            isBordered
-            ImgComponent={NextImage}
            alt="Zoey Lang"
            imgProps={{
              width: 40,
@@ -109,6 +109,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
      <DynamicReactLiveDemo
        className={className}
        code={code}
+        files={files}
        gradientColor={gradientColor}
        height={previewHeight}
        isCentered={isPreviewCentered}
@@ -1,15 +1,19 @@
 import React from "react";
 import {LivePreview, LiveProvider, LiveError} from "react-live";
 import {clsx} from "@nextui-org/shared-utils";
-import * as Components from "@nextui-org/react";
+import * as NextUI from "@nextui-org/react";
 import * as intlDateUtils from "@internationalized/date";
 import * as reactAriaI18n from "@react-aria/i18n";
+import * as reactHookFormBase from "react-hook-form";
+import {SandpackFiles} from "@codesandbox/sandpack-react/types";

 import {BgGridContainer} from "@/components/bg-grid-container";
 import {GradientBox, GradientBoxProps} from "@/components/gradient-box";
+import {CopyButton} from "@/components/copy-button";

 export interface ReactLiveDemoProps {
  code: string;
+  files: SandpackFiles;
  noInline?: boolean;
  height?: string | number;
  isCentered?: boolean;
@@ -19,14 +23,26 @@ export interface ReactLiveDemoProps {
  overflow?: "auto" | "visible" | "hidden";
 }

+// 🚨 Do not pass react-hook-form to scope, it will break the live preview since
+// it also has a "Form" component that will override the one from @nextui-org/react
+const reactHookForm = {
+  useForm: reactHookFormBase.useForm,
+  Controller: reactHookFormBase.Controller,
+};
+
 export const scope = {
-  ...Components,
+  React,
+  ...NextUI,
  ...intlDateUtils,
  ...reactAriaI18n,
+  ...reactHookForm,
 } as Record<string, unknown>;

+const DEFAULT_FILE = "/App.jsx";
+
 export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
  code,
+  files,
  isGradientBox,
  gradientColor = "orange",
  isCentered = false,
@@ -36,8 +52,16 @@ export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
 }) => {
  const content = (
    <>
+      {files?.[DEFAULT_FILE] && (
+        <div className="absolute top-[-28px] right-[-8px] z-50">
+          <CopyButton
+            className="before:hidden opacity-0 group-hover/code-demo:opacity-100 transition-opacity text-zinc-400"
+            value={files?.[DEFAULT_FILE] as string}
+          />
+        </div>
+      )}
      <LivePreview
-        className={clsx("live-preview flex h-full w-full not-prose", {
+        className={clsx("live-preview flex h-full w-full not-prose ", {
          "justify-center items-center": isCentered,
        })}
        style={{height}}
@@ -58,12 +82,12 @@ export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
          color={gradientColor}
          to="top-right"
        >
-          <div className="max-w-full py-4 px-2 w-full h-full scrollbar-hide overflow-x-scroll">
+          <div className="group/code-demo max-w-full py-4 px-2 w-full h-full scrollbar-hide overflow-x-scroll">
            {content}
          </div>
        </GradientBox>
      ) : (
-        <BgGridContainer className={className}>{content}</BgGridContainer>
+        <BgGridContainer className={clsx(className, "group/code-demo")}>{content}</BgGridContainer>
      )}
    </LiveProvider>
  );
@@ -1,6 +1,6 @@
 import {FileCode} from "./types";

-const importRegex = /^(import)\s(?!type(of\s|\s)(?!from)).*?$/gm;
+const importRegex = /^(import\s+(?!type\s+\{)[\s\S]*?;)/gm;

 const exportDefaultRegex = /export\s+default\s+function\s+\w+\s*\(\s*\)\s*\{/;

@@ -31,7 +31,7 @@ export const transformCode = (
      // replace match with const Name = () => (
      return `const ${compName} = () => {`;
    })
-    .replace("export", "");
+    .replace(/export/g, "");

  // add render(<App/>) to cleanedCode if has const App = () => {
  if (cleanedCode.includes(`const App = () => {`)) {
@@ -1,7 +1,13 @@
+"use client";
+
+import type {Language, PrismTheme} from "prism-react-renderer";
+
+import {useIntersectionObserver} from "usehooks-ts";
 import React, {forwardRef, useEffect} from "react";
 import {clsx, dataAttr, getUniqueID} from "@nextui-org/shared-utils";
-import BaseHighlight, {Language, PrismTheme, defaultProps} from "prism-react-renderer";
+import BaseHighlight, {defaultProps} from "prism-react-renderer";
 import {debounce, omit} from "@nextui-org/shared-utils";
+import {cn} from "@nextui-org/react";

 import defaultTheme from "@/libs/prism-theme";

@@ -55,6 +61,149 @@ const calculateLinesToHighlight = (meta?: string) => {
  };
 };

+const calculateHeight = (codeString: string) => {
+  const lines = codeString.split("\n").length;
+
+  return lines * 24;
+};
+
+const CodeBlockHighlight = ({
+  codeString,
+  language,
+  codeLang,
+  theme,
+  showLines,
+  removeIndent,
+  hideScrollBar,
+  preRef,
+  isMultiLine,
+  shouldHighlightLine,
+  highlightStyle,
+  className: classNameProp,
+  ...props
+}: CodeblockProps & {
+  codeLang: Language;
+  isMultiLine: boolean;
+  shouldHighlightLine: (index: number) => boolean;
+  highlightStyle: HighlightStyle[];
+  preRef: React.Ref<HTMLElement>;
+}) => {
+  const height = calculateHeight(codeString);
+
+  const [intersectionRef, isVisible] = useIntersectionObserver({
+    threshold: 0,
+  });
+
+  return (
+    <div
+      ref={intersectionRef}
+      style={{
+        height: isVisible ? "auto" : `${height}px`,
+      }}
+    >
+      {isVisible ? (
+        <BaseHighlight
+          {...defaultProps}
+          code={codeString}
+          language={codeLang}
+          theme={theme}
+          {...props}
+        >
+          {({className, style, tokens, getLineProps, getTokenProps}) => (
+            <pre
+              ref={(element) => {
+                // Merge the refs
+                if (typeof preRef === "function") {
+                  preRef(element);
+                } else if (preRef) {
+                  // @ts-ignore
+                  preRef.current = element;
+                }
+              }}
+              className={clsx(
+                className,
+                classNameProp,
+                `language-${codeLang}`,
+                "max-w-full contents",
+                {
+                  "flex-col": isMultiLine,
+                  "overflow-x-scroll scrollbar-hide": hideScrollBar,
+                },
+              )}
+              data-language={language}
+              style={style}
+            >
+              {tokens.map((line, i) => {
+                const lineProps = getLineProps({line, key: i});
+
+                return (
+                  <div
+                    {...omit(lineProps, ["key"])}
+                    key={`${i}-${getUniqueID("line-wrapper")}`}
+                    className={clsx(
+                      lineProps.className,
+                      removeIndent ? "pr-4" : "px-4",
+                      "relative [&>span]:relative [&>span]:z-10",
+                      {
+                        "px-2": showLines,
+                      },
+                      {
+                        "before:to-code-background before:absolute before:left-0 before:z-0 before:h-full before:w-full before:bg-gradient-to-r before:from-white/10 before:content-[''] before:pointer-events-none":
+                          shouldHighlightLine(i),
+                      },
+                    )}
+                    data-deleted={dataAttr(highlightStyle?.[i] === "deleted")}
+                    data-inserted={dataAttr(highlightStyle?.[i] === "inserted")}
+                  >
+                    {showLines && (
+                      <span
+                        className={cn(
+                          "mr-6 select-none text-xs opacity-30",
+                          i + 1 >= 10 ? "mr-4" : "",
+                          i + 1 >= 100 ? "mr-2" : "",
+                          i + 1 >= 1000 ? "mr-0" : "",
+                        )}
+                      >
+                        {i + 1}
+                      </span>
+                    )}
+
+                    {line.map((token, key) => {
+                      const props = getTokenProps({token, key}) || {};
+
+                      return (
+                        <span
+                          {...omit(props, ["key"])}
+                          key={`${key}-${getUniqueID("line")}`}
+                          className={className}
+                          style={{
+                            ...props.style,
+                            ...(highlightStyleToken.some((t) => {
+                              const content = token.content.trim();
+
+                              const regex = t instanceof RegExp ? t : new RegExp(t);
+
+                              return regex.test(content);
+                            })
+                              ? {color: "rgb(var(--code-function))"}
+                              : {}),
+                          }}
+                        />
+                      );
+                    })}
+                  </div>
+                );
+              })}
+            </pre>
+          )}
+        </BaseHighlight>
+      ) : (
+        <div className={clsx(classNameProp, "w-full bg-code-background rounded-lg")} />
+      )}
+    </div>
+  );
+};
+
 const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
  (
    {
@@ -134,80 +283,21 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
    }, []);

    return (
-      <BaseHighlight
-        {...defaultProps}
-        code={codeString}
-        language={codeLang}
+      <CodeBlockHighlight
+        className={classNameProp}
+        codeLang={codeLang}
+        codeString={codeString}
+        hideScrollBar={hideScrollBar}
+        highlightStyle={highlightStyle}
+        isMultiLine={isMultiLine}
+        language={language}
+        preRef={ref}
+        removeIndent={removeIndent}
+        shouldHighlightLine={shouldHighlightLine}
+        showLines={showLines}
        theme={theme}
        {...props}
-      >
-        {({className, style, tokens, getLineProps, getTokenProps}) => (
-          <div className="w-full" data-language={language}>
-            <pre
-              ref={ref}
-              className={clsx(className, classNameProp, "flex max-w-full", {
-                "flex-col": isMultiLine,
-                "scrollbar-hide overflow-x-scroll": hideScrollBar,
-              })}
-              style={style}
-              translate="no"
-            >
-              {tokens.map((line, i) => {
-                const lineProps = getLineProps({line, key: i});
-
-                return (
-                  <div
-                    {...omit(lineProps, ["key"])}
-                    key={`${i}-${getUniqueID("line-wrapper")}`}
-                    className={clsx(
-                      lineProps.className,
-                      removeIndent ? "pr-4" : "px-4",
-                      "relative [&>span]:relative [&>span]:z-10",
-                      {
-                        "px-2": showLines,
-                      },
-                      {
-                        "before:content-[''] before:w-full before:h-full before:absolute before:z-0 before:left-0 before:bg-gradient-to-r before:from-white/10 before:to-code-background":
-                          shouldHighlightLine(i),
-                      },
-                    )}
-                    data-deleted={dataAttr(highlightStyle?.[i] === "deleted")}
-                    data-inserted={dataAttr(highlightStyle?.[i] === "inserted")}
-                  >
-                    {showLines && (
-                      <span className="select-none text-xs mr-6 opacity-30">{i + 1}</span>
-                    )}
-                    {line.map((token, key) => {
-                      // Bun has no color style by default in the code block, so hack add in here
-                      const props = getTokenProps({token, key}) || {};
-
-                      return (
-                        <span
-                          {...omit(props, ["key"])}
-                          key={`${key}-${getUniqueID("line")}`}
-                          className={className}
-                          style={{
-                            ...props.style,
-                            ...(highlightStyleToken.some((t) => {
-                              const content = token.content.trim();
-
-                              const regex = t instanceof RegExp ? t : new RegExp(t);
-
-                              return regex.test(content);
-                            })
-                              ? {color: "rgb(var(--code-function))"}
-                              : {}),
-                          }}
-                        />
-                      );
-                    })}
-                  </div>
-                );
-              })}
-            </pre>
-          </div>
-        )}
-      </BaseHighlight>
+      />
    );
  },
 );
@@ -0,0 +1,209 @@
+import type Highlight from "prism-react-renderer";
+
+export type TransformTokens = Parameters<Highlight["props"]["children"]>[0]["tokens"];
+
+export type TransformTokensTypes = TransformTokens[0][0] & {
+  folderContent?: TransformTokens;
+  summaryContent?: TransformTokens[0];
+  class?: string;
+  index?: number;
+  open?: boolean;
+};
+
+const startFlag = ["{", "["];
+const endFlag = ["}", "]"];
+const isElementStartRegex = /^\s*</;
+const isElementEndRegex = /^\s*<\//;
+
+/**
+ * Transform tokens from `prism-react-renderer` to wrap them in folder structure
+ *
+ * @example
+ * transformTokens(tokens) -> wrap tokens in folder structure
+ */
+export function transformTokens(tokens: TransformTokens, folderLine = 10) {
+  const result: TransformTokens = [];
+  let lastIndex = 0;
+  let startElementName = "";
+
+  tokens.forEach((token, index) => {
+    if (index < lastIndex) {
+      return;
+    }
+    token.forEach((t) => {
+      (t as TransformTokensTypes).index = index;
+    });
+    result.push(token);
+
+    const lineContent = getLineContent(token);
+    const {isStartTag, isEndTag} = checkIsElement(lineContent);
+
+    // If it has startElementName means it is within the element range
+    if (startElementName) {
+      if (isEndTag) {
+        // Judge whether it is the end tag of the element then reset startElementName
+        const {endElementName} = getElementName(lineContent);
+
+        if (endElementName === startElementName) {
+          startElementName = "";
+        }
+      }
+
+      return;
+    } else if (isStartTag) {
+      const {startElementName: elementName, endElementName} = getElementName(lineContent);
+
+      if (!endElementName) {
+        startElementName = elementName;
+
+        return;
+      }
+    }
+
+    let startToken: TransformTokens[0][0] = null as any;
+
+    token.forEach((t) => {
+      if (startFlag.includes(t.content)) {
+        startToken = t;
+      }
+    });
+
+    const isFolder = checkIsFolder(token);
+
+    if (isFolder && startToken) {
+      const nextLineContent = tokens.slice(index + 1, index + 2).reduce((acc, line) => {
+        return acc + getLineContent(line);
+      }, "");
+      const isNextLineObjectFolder = checkIsObjectContent(nextLineContent);
+      const isArrayFolder = lineContent.trim().endsWith("[");
+
+      if (isNextLineObjectFolder || isArrayFolder) {
+        const endIndex = findEndIndex(tokens, index + 1);
+
+        // Greater than or equal to folderLine then will folder otherwise it will show directly
+        if (endIndex !== -1 && endIndex - index >= folderLine) {
+          lastIndex = endIndex;
+          const folder = tokens.slice(index + 1, endIndex);
+          const endToken = tokens[endIndex];
+
+          (endToken[0] as TransformTokensTypes).class = "first-custom-folder";
+
+          const ellipsisToken: TransformTokensTypes = {
+            types: ["ellipsis"],
+            content: "",
+            class: "custom-folder ellipsis-token",
+          };
+          const copyContent: TransformTokensTypes = {
+            types: ["copy"],
+            content: "",
+            folderContent: folder,
+            class: "custom-folder copy-token",
+          };
+
+          endToken.forEach((t, _, arr) => {
+            let className = (t as TransformTokensTypes).class || "";
+
+            className += " custom-folder";
+            if (t.content.trim() === "" && (arr.length === 3 || arr.length === 4)) {
+              // Add length check to sure it's added to } token
+              className += " empty-token";
+            }
+            (t as TransformTokensTypes).class = className;
+          });
+
+          startToken.types = ["folderStart"];
+          (startToken as TransformTokensTypes).folderContent = folder;
+          (startToken as TransformTokensTypes).summaryContent = [
+            ...token,
+            ellipsisToken,
+            copyContent,
+            ...endToken,
+          ];
+          (startToken as TransformTokensTypes).index = index;
+          // isShowFolder && ((startToken as TransformTokensTypes).open = true);
+
+          result.splice(result.length - 1, 1, [startToken]);
+
+          return;
+        }
+      }
+    }
+  });
+
+  return result;
+}
+
+function checkIsFolder(token: TransformTokens[0]) {
+  const stack: string[] = [];
+
+  for (const t of token) {
+    if (startFlag.includes(t.content)) {
+      stack.push(t.content);
+    } else if (endFlag.includes(t.content)) {
+      stack.pop();
+    }
+  }
+
+  return stack.length !== 0;
+}
+
+function findEndIndex(tokens: TransformTokens, startIndex: number) {
+  const stack: string[] = ["flag"];
+
+  for (let i = startIndex; i < tokens.length; i++) {
+    const token = tokens[i];
+
+    for (const line of token) {
+      const transformLine = line.content.replace(/\$/g, "");
+
+      if (startFlag.includes(transformLine)) {
+        stack.push("flag");
+      } else if (endFlag.includes(transformLine)) {
+        stack.pop();
+      }
+
+      if (stack.length === 0) {
+        return i;
+      }
+    }
+  }
+
+  return -1;
+}
+
+function checkIsElement(lineContent: string) {
+  return {
+    isStartTag: isElementStartRegex.test(lineContent),
+    isEndTag: isElementEndRegex.test(lineContent),
+  };
+}
+
+function getElementName(lineContent: string) {
+  const startElementName = lineContent.match(/^\s*<([a-zA-Z.]+)/);
+  const endElementName = lineContent.match(/^\s*<\/([a-zA-Z.]+)>/);
+
+  return {
+    startElementName: startElementName?.[1] || (lineContent.includes("<>") ? "<>" : ""),
+    endElementName: endElementName?.[1] || (lineContent.includes("</>") ? "</>" : ""),
+  };
+}
+
+function getLineContent(token: TransformTokens[0]) {
+  return token.reduce((acc, t) => acc + t.content, "");
+}
+
+function checkIsObjectContent(lineContent: string) {
+  lineContent = lineContent.trim();
+  // first: match { a }
+  // second: match { a: b }
+  // third: match { a (b) }
+  // fourth: match /** */
+  const isObjectContent = /^([\w]+,?$)|([\w\[.\]]+:)|([\w]+\s?\(.*?\)$)|(^\/\*\*)/.test(
+    lineContent,
+  );
+  const hasEqual = /\s=\s/.test(lineContent);
+  const hasFunction = lineContent.includes("function");
+  const hasVariable = /var|let|const/.test(lineContent);
+
+  return isObjectContent && !hasEqual && !hasFunction && !hasVariable;
+}
@@ -1,3 +1,5 @@
+"use client";
+
 import {Tabs, Tab, Snippet, Code} from "@nextui-org/react";
 import {Key, useState} from "react";

@@ -97,9 +99,10 @@ export const PackageManagers = ({
        })}
      </Tabs>
      {showGlobalInstallWarning && (
-        <Blockquote className="my-2" color="warning">
+        <Blockquote className="my-2 text-small" color="warning">
          The above command is for individual installation only. You may skip this step if{" "}
-          <Code>@nextui-org/react</Code> is already installed globally.
+          <Code className="px-1 py-0.5 text-tiny font-mono">@nextui-org/react</Code> is already
+          installed globally.
        </Blockquote>
      )}
    </>
@@ -28,10 +28,6 @@ import {getRoutePaths} from "./utils";

 import {Route} from "@/libs/docs/page";
 import {TreeKeyboardDelegate} from "@/utils/tree-keyboard-delegate";
-import {FbFeedbackButton} from "@/components/featurebase/fb-feedback-button";
-import {FbChangelogButton} from "@/components/featurebase/fb-changelog-button";
-import {FbRoadmapLink} from "@/components/featurebase/fb-roadmap-link";
-import {openFeedbackWidget} from "@/utils/featurebase";
 import emitter from "@/libs/emitter";

 export interface Props<T> extends Omit<ItemProps<T>, "title">, Route {
@@ -121,28 +117,11 @@ function TreeItem<T>(props: TreeItemProps<T>) {

  const {focusProps, isFocused, isFocusVisible} = useFocusRing();

-  const renderFeaturebaseComponent = (key: string) => {
-    if (key === "roadmap")
-      return <FbRoadmapLink className={cn} innerClassName="opacity-80 dark:opacity-60" />;
-    if (key === "changelog")
-      return (
-        <NextUILink as={Link} className={cn} color="foreground" href="#">
-          <FbChangelogButton />
-        </NextUILink>
-      );
-
-    return (
-      <NextUILink as={Link} className={cn} color="foreground" href="#" onClick={openFeedbackWidget}>
-        <FbFeedbackButton />
-      </NextUILink>
-    );
-  };
-
  const renderComponent = () => {
    if (hasChildNodes) {
      return (
        <span className="flex items-center gap-3">
-          <span>{rendered}</span>
+          <span className="font-medium sm:text-sm">{rendered}</span>
          <ChevronIcon
            className={clsx("transition-transform", {
              "-rotate-90": isExpanded,
@@ -152,14 +131,18 @@ function TreeItem<T>(props: TreeItemProps<T>) {
      );
    }

-    if (typeof key === "string" && ["changelog", "feedback", "roadmap"].includes(key)) {
-      return renderFeaturebaseComponent(key);
-    }
-
    return (
-      <NextUILink as={Link} className={clsx(cn)} color="foreground" href={paths.pathname}>
+      <NextUILink
+        as={item.props?.comingSoon ? "div" : Link}
+        className={clsx(cn, {
+          "pointer-events-none": item.props?.comingSoon,
+        })}
+        color="foreground"
+        href={item.props?.comingSoon ? "#" : paths.pathname}
+      >
        <span
          className={clsx(
+            "sm:text-sm",
            isSelected
              ? "text-primary font-medium dark:text-foreground"
              : "opacity-80 dark:opacity-60",
@@ -172,7 +155,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
        </span>
        {isUpdated && (
          <Chip
-            className="ml-1 py-1 text-tiny text-default-400 bg-default-100/50"
+            className="ml-1 py-1 font-medium text-tiny text-default-500 dark:text-default-400 bg-default-100 dark:bg-default-100/50"
            color="default"
            size="sm"
            variant="flat"
@@ -181,12 +164,22 @@ function TreeItem<T>(props: TreeItemProps<T>) {
          </Chip>
        )}
        {isNew && (
-          <Chip className="ml-1 py-1 text-tiny" color="primary" size="sm" variant="flat">
+          <Chip
+            className="font-medium ml-1 py-1 text-tiny"
+            color="primary"
+            size="sm"
+            variant="flat"
+          >
            New
          </Chip>
        )}
        {item.props?.comingSoon && (
-          <Chip className="ml-1 py-1 text-tiny" color="default" size="sm" variant="flat">
+          <Chip
+            className="font-medium ml-1 py-1 text-tiny"
+            color="secondary"
+            size="sm"
+            variant="flat"
+          >
            Coming soon
          </Chip>
        )}
@@ -201,8 +194,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
      aria-expanded={dataAttr(hasChildNodes ? isExpanded : undefined)}
      aria-selected={dataAttr(isSelected)}
      className={clsx(
-        "flex flex-col gap-3outline-none w-full tap-highlight-transparent",
-
+        "flex flex-col outline-none w-full tap-highlight-transparent",
        hasChildNodes ? "mb-4" : "first:mt-4",
        // focus ring
        ...dataFocusVisibleClasses,
@@ -211,7 +203,12 @@ function TreeItem<T>(props: TreeItemProps<T>) {
      data-focused={isFocused}
      role="treeitem"
    >
-      <div className="flex items-center gap-3 cursor-pointer" {...pressProps}>
+      <div
+        className={clsx("flex items-center gap-3 cursor-pointer", {
+          "pointer-events-none": item.props?.comingSoon,
+        })}
+        {...(item.props?.comingSoon ? {} : pressProps)}
+      >
        <Spacer x={spaceLeft} />
        {renderComponent()}
        {/* Workaround to avoid scrollbar overlapping */}
@@ -261,7 +258,7 @@ function Tree<T extends object>(props: CollectionBase<T> & Expandable & Multiple
  return (
    <ScrollArea
      ref={ref}
-      className="h-full lg:max-h-[calc(100vh_-_64px)]"
+      className="h-full max-w-[90%] lg:max-h-[calc(100vh_-_64px)]"
      role="tree"
      {...collectionProps}
    >
@@ -77,7 +77,7 @@ export const DocsToc: FC<DocsTocProps> = ({headings}) => {
        }, transparent 100%)`,
      }}
    >
-      <p className="text-sm">On this page</p>
+      <p className="text-sm font-medium">On this page</p>
      <ul className="scrollbar-hide flex flex-col gap-2">
        {headings.map(
          (heading, i) =>
@@ -115,7 +115,7 @@ export const DocsToc: FC<DocsTocProps> = ({headings}) => {
          <Divider />
          <Spacer y={2} />
          <a
-            className="flex gap-2 items-center text-sm text-default-500 dark:text-foreground/30 hover:text-foreground/80 pl-4 transition-opacity"
+            className="flex gap-2 items-center text-small text-default-500 dark:text-foreground/30 hover:text-foreground/80 pl-4 transition-opacity"
            href={`#${firstId}`}
          >
            Back to top
@@ -1,47 +0,0 @@
-"use client";
-
-import {useEffect} from "react";
-import {usePostHog} from "posthog-js/react";
-
-type Props = {
-  className?: string;
-};
-
-// ref: https://developers.featurebase.app/install/changelog-widget/install
-export const FbChangelogButton = ({className}: Props) => {
-  const posthog = usePostHog();
-
-  useEffect(() => {
-    const win = window as any;
-
-    if (typeof win.Featurebase !== "function") {
-      win.Featurebase = function () {
-        // eslint-disable-next-line prefer-rest-params
-        (win.Featurebase.q = win.Featurebase.q || []).push(arguments);
-      };
-    }
-    win.Featurebase("initialize_changelog_widget", {
-      organization: process.env.NEXT_PUBLIC_FB_FEEDBACK_ORG,
-      theme: "dark",
-      usersName: "",
-      fullscreenPopup: true,
-      alwaysShow: true,
-    });
-  }, []);
-
-  const fbButtonOnClick = () => {
-    (window as any).Featurebase("manually_open_changelog_popup");
-
-    posthog.capture("Featurebase - Changelog", {
-      name: "featurebase-changelog",
-      action: "press",
-      category: "featurebase",
-    });
-  };
-
-  return (
-    <button className={className} onClick={fbButtonOnClick}>
-      Changelog <span id="fb-update-badge" />
-    </button>
-  );
-};
@@ -1,43 +0,0 @@
-"use client";
-
-import {useEffect} from "react";
-import {usePostHog} from "posthog-js/react";
-
-type Props = {
-  className?: string;
-};
-
-// ref: https://developers.featurebase.app/install/feedback-widget/setup
-export const FbFeedbackButton = ({className}: Props) => {
-  const posthog = usePostHog();
-
-  useEffect(() => {
-    const win = window as any;
-
-    if (typeof win.Featurebase !== "function") {
-      win.Featurebase = function () {
-        // eslint-disable-next-line prefer-rest-params
-        (win.Featurebase.q = win.Featurebase.q || []).push(arguments);
-      };
-    }
-    win.Featurebase("initialize_feedback_widget", {
-      organization: process.env.NEXT_PUBLIC_FB_FEEDBACK_ORG,
-      theme: "dark",
-      email: "",
-    });
-  }, []);
-
-  const fbButtonOnClick = () => {
-    posthog.capture("Featurebase - Feedback", {
-      name: "featurebase-feedback",
-      action: "press",
-      category: "featurebase",
-    });
-  };
-
-  return (
-    <button data-featurebase-feedback className={className} onClick={fbButtonOnClick}>
-      Feedback
-    </button>
-  );
-};
@@ -1,8 +1,11 @@
 "use client";

 import {usePathname} from "next/navigation";
+import {Link} from "@nextui-org/react";

 import {getCurrentYear} from "@/utils/time";
+import {XIcon, GithubIcon, DiscordIcon} from "@/components/icons";
+import {siteConfig} from "@/config/site";

 export const Footer = () => {
  const pathname = usePathname();
@@ -11,12 +14,45 @@ export const Footer = () => {
    return null;
  }

+  const isDocs = pathname.includes("/docs");
+
  return (
    <footer className="container mx-auto max-w-7xl pb-12 px-12">
      <div className="flex flex-col justify-center items-center gap-1">
        <p className="text-sm text-default-400">
          © {getCurrentYear()} NextUI Inc. All rights reserved.
        </p>
+        {isDocs ? (
+          <div className="flex items-center gap-1">
+            <Link
+              isExternal
+              aria-label="Discord"
+              className="p-1"
+              href={siteConfig.links.discord}
+              rel="noopener noreferrer"
+            >
+              <DiscordIcon className="text-default-600 dark:text-default-500" />
+            </Link>
+            <Link
+              isExternal
+              aria-label="X"
+              className="p-1"
+              href={siteConfig.links.twitter}
+              rel="noopener noreferrer"
+            >
+              <XIcon className="text-default-600 dark:text-default-500" />
+            </Link>
+            <Link
+              isExternal
+              aria-label="Github"
+              className="p-1"
+              href={siteConfig.links.github}
+              rel="noopener noreferrer"
+            >
+              <GithubIcon className="text-default-600 dark:text-default-500" />
+            </Link>
+          </div>
+        ) : null}
      </div>
    </footer>
  );
@@ -0,0 +1,33 @@
+import React from "react";
+
+export const InfoCircle = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}: {
+  size?: number;
+  width?: number;
+  height?: number;
+  [key: string]: any;
+}) => (
+  <svg
+    fill="none"
+    height={size || height}
+    viewBox="0 0 24 24"
+    width={size || width}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path d="M12 17V11" stroke="currentColor" strokeLinecap="round" strokeWidth="1.5" />
+    <path
+      d="M12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z"
+      fill="currentColor"
+    />
+  </svg>
+);
@@ -11,7 +11,7 @@ export const MoonIcon = ({size = 24, width, height, ...props}: IconSvgProps) =>
    {...props}
  >
    <path
-      d="M20.742,13.045c-0.677,0.18-1.376,0.271-2.077,0.271c-2.135,0-4.14-0.83-5.646-2.336c-2.008-2.008-2.799-4.967-2.064-7.723 c0.092-0.345-0.007-0.713-0.259-0.965C10.444,2.04,10.077,1.938,9.73,2.034C8.028,2.489,6.476,3.382,5.241,4.616 c-3.898,3.898-3.898,10.243,0,14.143c1.889,1.889,4.401,2.93,7.072,2.93c2.671,0,5.182-1.04,7.07-2.929 c1.236-1.237,2.13-2.791,2.583-4.491c0.092-0.345-0.008-0.713-0.26-0.965C21.454,13.051,21.085,12.951,20.742,13.045z M17.97,17.346c-1.511,1.511-3.52,2.343-5.656,2.343c-2.137,0-4.146-0.833-5.658-2.344c-3.118-3.119-3.118-8.195,0-11.314 c0.602-0.602,1.298-1.102,2.06-1.483c-0.222,2.885,0.814,5.772,2.89,7.848c2.068,2.069,4.927,3.12,7.848,2.891 C19.072,16.046,18.571,16.743,17.97,17.346z"
+      d="M21.25 12C21.25 14.4533 20.2754 16.806 18.5407 18.5407C16.806 20.2754 14.4533 21.25 12 21.25V22.75C17.937 22.75 22.75 17.937 22.75 12H21.25ZM12 21.25C9.54675 21.25 7.19397 20.2754 5.45926 18.5407C3.72455 16.806 2.75 14.4533 2.75 12H1.25C1.25 17.937 6.063 22.75 12 22.75V21.25ZM2.75 12C2.75 9.54675 3.72455 7.19397 5.45926 5.45926C7.19397 3.72455 9.54675 2.75 12 2.75V1.25C6.063 1.25 1.25 6.063 1.25 12H2.75ZM15.5 14.25C13.975 14.25 12.5125 13.6442 11.4341 12.5659C10.3558 11.4875 9.75 10.025 9.75 8.5H8.25C8.25 10.4228 9.01384 12.2669 10.3735 13.6265C11.7331 14.9862 13.5772 15.75 15.5 15.75V14.25ZM20.425 11.469C19.9133 12.3176 19.191 13.0197 18.3281 13.5069C17.4652 13.9942 16.491 14.2501 15.5 14.25V15.75C16.7494 15.7504 17.9777 15.4279 19.0657 14.8138C20.1537 14.1997 21.0646 13.3148 21.71 12.245L20.425 11.469ZM9.75 8.5C9.74986 7.50903 10.0058 6.53483 10.4931 5.67193C10.9803 4.80902 11.6824 4.08669 12.531 3.575L11.755 2.291C10.6854 2.93628 9.80058 3.84701 9.18649 4.93486C8.57239 6.02271 8.2498 7.25078 8.25 8.5H9.75ZM12 2.75C11.9497 2.74903 11.9002 2.73811 11.8542 2.71785C11.8082 2.6976 11.7666 2.66842 11.732 2.632C11.6898 2.58965 11.6613 2.53568 11.65 2.477C11.646 2.446 11.648 2.356 11.755 2.291L12.531 3.575C13.034 3.271 13.196 2.714 13.137 2.276C13.075 1.821 12.717 1.25 12 1.25V2.75ZM21.71 12.245C21.644 12.352 21.554 12.354 21.523 12.35C21.4643 12.3387 21.4103 12.3102 21.368 12.268C21.3316 12.2334 21.3024 12.1918 21.2821 12.1458C21.2619 12.0998 21.251 12.0503 21.25 12H22.75C22.75 11.283 22.179 10.925 21.724 10.863C21.286 10.804 20.729 10.966 20.425 11.469L21.71 12.245Z"
      fill="currentColor"
    />
  </svg>
@@ -16,3 +16,29 @@ export const SunFilledIcon = ({size = 24, width, height, ...props}: IconSvgProps
    </g>
  </svg>
 );
+
+export const SunLinearIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M12 2V4M12 20V22M4 12H2M22 12H20M19.778 4.223L17.556 6.254M4.222 4.223L6.444 6.254M6.444 17.556L4.222 19.778M19.778 19.777L17.556 17.555"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeWidth="1.5"
+    />
+  </svg>
+);
@@ -16,7 +16,7 @@ const styles = tv({
    iconWrapper:
      "flex justify-center p-2 rounded-full items-center bg-secondary-100/80 text-pink-500",
    title: "text-base font-semibold",
-    description: "font-normal text-base text-default-500",
+    description: "font-normal text-medium text-default-500",
  },
 });

@@ -107,7 +107,7 @@ export const FloatingComponents: React.FC<{}> = () => {
          <Tooltip
            className="text-sm animate-[levitate_14s_ease_infinite]"
            color="secondary"
-            content="Developers love Next.js"
+            content="Build beautiful apps faster"
            isOpen={!isTablet}
            placement="top"
            style={{
@@ -33,15 +33,18 @@ export const Hero = () => {
        <div className="flex justify-center w-full md:hidden">
          <Chip
            as={NextLink}
-            className="transition-colors cursor-pointer bg-default-100/50 hover:bg-default-100 border-default-200/80 dark:border-default-100/80"
-            color="default"
-            href="/blog/v2.3.0"
-            variant="dot"
-            onClick={() => handlePressAnnouncement("New version v2.4.0", "/blog/v2.4.0")}
+            className="bg-primary-100/50 border-1 hover:bg-primary-100/80 border-primary-200/50 cursor-pointer"
+            classNames={{
+              content: "font-semibold text-primary-500 dark:text-primary-600 text-xs ",
+            }}
+            color="primary"
+            href="/blog/v2.6.0"
+            variant="flat"
+            onClick={() => handlePressAnnouncement("New version v2.6.0", "/blog/v2.6.0")}
          >
-            New version v2.4.0&nbsp;
+            New version v2.6.0&nbsp;
            <span aria-label="emoji" role="img">
-              🚀
+              🔥
            </span>
          </Chip>
        </div>
@@ -25,7 +25,7 @@ const bannerSuggestions = [
    title: "NextUI + Next.js",
    description: (
      <>
-        NextUI is fully compatible with the new Next.js 13 <Code>app/</Code> directory structure.
+        NextUI is fully compatible with the new Next.js <Code>app/</Code> directory structure.
      </>
    ),
    icon: <NextJsIcon className="text-pink-500" />,
@@ -0,0 +1,79 @@
+"use client";
+
+import type {ReactNode} from "react";
+import type {ScrollShadowProps} from "@nextui-org/react";
+
+import {Children, cloneElement} from "react";
+import {ScrollShadow} from "@nextui-org/react";
+import {cn} from "@nextui-org/react";
+
+interface MarqueeProps {
+  className?: string;
+  reverse?: boolean;
+  shadow?: boolean;
+  duration?: number;
+  pauseOnHover?: boolean;
+  vertical?: boolean;
+  children?: ReactNode;
+  [key: string]: unknown;
+}
+
+export const Marquee = ({
+  className,
+  reverse,
+  duration = 40,
+  shadow = false,
+  pauseOnHover = false,
+  vertical = false,
+  children,
+  ...props
+}: MarqueeProps) => {
+  const shadowProps: ScrollShadowProps = {
+    isEnabled: shadow,
+    offset: -20,
+    size: 300,
+    orientation: "vertical",
+    visibility: "both",
+  };
+
+  const Wrapper = shadow ? ScrollShadow : "div";
+
+  const componentProps = shadow ? {...props, ...shadowProps} : props;
+
+  return (
+    <Wrapper
+      {...componentProps}
+      className={cn(
+        "flex [--gap:1rem]",
+        {
+          "w-full": !vertical,
+          "overflow-y-hidden": vertical,
+          "overflow-x-hidden": !vertical,
+          "max-h-[calc(100vh_-_200px)]": vertical,
+        },
+        className,
+      )}
+      style={{
+        // @ts-ignore
+        "--duration": `${duration}s`,
+      }}
+    >
+      <div
+        className={cn("flex w-max items-stretch gap-[--gap]", {
+          "flex-col": vertical,
+          "h-full": vertical,
+          "animate-scrolling-banner": !vertical,
+          "animate-scrolling-banner-vertical": vertical,
+          "[animation-direction:reverse]": reverse,
+          "hover:[animation-play-state:paused]": pauseOnHover,
+        })}
+      >
+        {Children.map(children, (child) =>
+          child && typeof child === "object" && "type" in child ? cloneElement(child) : child,
+        )}
+      </div>
+    </Wrapper>
+  );
+};
+
+export default Marquee;
@@ -0,0 +1,182 @@
+"use client";
+
+import {Button, Chip} from "@nextui-org/react";
+import {useEffect, useState} from "react";
+import {useTheme} from "next-themes";
+
+import {sectionWrapper, title, titleWrapper, subtitle} from "../primitives";
+
+import Marquee from "./marquee";
+
+import {useIsMobile} from "@/hooks/use-media-query";
+
+export const NextUIProSection = () => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const isMobile = useIsMobile();
+  const {theme} = useTheme();
+  const isDarkMode = theme === "dark";
+
+  let imgSrc: string;
+
+  if (isDarkMode) {
+    imgSrc = isMobile
+      ? "/images/nextuipro-section-background@mobile.webp"
+      : "/images/nextuipro-section-background.webp";
+  } else {
+    imgSrc = isMobile
+      ? "/images/nextuipro-section-background-light@mobile.webp"
+      : "/images/nextuipro-section-background-light.webp";
+  }
+
+  const mobileClassName: string = isDarkMode
+    ? "h-full w-full bg-[radial-gradient(at_40%_80%,_rgba(255,255,255,_0)_5%,_rgba(0,0,0,_0.8)_50%,_rgba(0,0,0,1)_100%)]"
+    : "h-full w-full bg-[radial-gradient(at_40%_80%,_rgba(0,0,0,_0)_5%,_rgba(255,255,255,_0.8)_50%,_rgba(255,255,255,1)_100%)]";
+
+  const webClassName: string = isDarkMode
+    ? "h-full w-full bg-[radial-gradient(at_80%_50%,_rgba(255,255,255,_0)_20%,_rgba(0,0,0,_0.8)_40%,_rgba(0,0,0,1)_100%)]"
+    : "h-full w-full bg-[radial-gradient(at_80%_50%,_rgba(0,0,0,_0)_20%,_rgba(255,255,255,_0.9)_40%,_rgba(255,255,255,1)_100%)]";
+
+  if (!mounted) return null;
+
+  const CheckmarkIcon = () => (
+    <svg fill="none" height="11" viewBox="0 0 13 11" width="13" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1 6.4L4.14286 10L12 1"
+        stroke="#006FEE"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+
+  return (
+    <section className={sectionWrapper({class: "mt-16 lg:mt-44 overflow-hidden"})}>
+      <div className="flex flex-col gap-8 min-h-[480px]">
+        <div className="z-30 flex w-screen h-full flex-col items-start justify-center leading-8 pt-4">
+          <Chip
+            classNames={{
+              base: "ml-0.5 transition-colors bg-gradient-to-br from-cyan-600 to-blue-600",
+              content: "text-tiny font-semibold",
+            }}
+            color="primary"
+            size="sm"
+          >
+            PRO
+          </Chip>
+          <div className={titleWrapper({class: "mt-2 inline md:block"})}>
+            <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+              Ship&nbsp;
+            </h1>
+            <h1
+              className={title({
+                size: "lg",
+                color: "blue",
+                class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]",
+              })}
+            >
+              faster&nbsp;
+            </h1>
+            <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+              with&nbsp;
+            </h1>
+            <div className="flex flex-col sm:flex-row">
+              <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+                beautiful&nbsp;
+              </h1>
+              <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+                components
+              </h1>
+            </div>
+          </div>
+          <p className={subtitle({class: "pr-12 text-foreground-500"})}>
+            Premade templates of over 210+ beautiful and responsive components, professionally
+            created by the team behind NextUI.
+          </p>
+          <div className="mt-4 text-foreground-600 font-medium">
+            <div className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              210+ Components
+            </div>
+            <div className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              Lifetime Access
+            </div>
+            <div className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              Free Updates
+            </div>
+            <div className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              Figma Files Included
+            </div>
+          </div>
+          <div className="mt-4">
+            <Button
+              as={"a"}
+              className="px-6 flex items-center"
+              color="primary"
+              href="https://nextui.pro?utm_source=nextui.org&utm_medium=nextui-homepage-section"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Explore NextUI Pro
+              <svg
+                fill="none"
+                height="21"
+                viewBox="0 0 20 21"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12.0254 5.44189L17.0837 10.5002L12.0254 15.5586"
+                  stroke="white"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeMiterlimit="10"
+                  strokeWidth="1.5"
+                />
+                <path
+                  d="M2.91602 10.5H16.941"
+                  stroke="white"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeMiterlimit="10"
+                  strokeWidth="1.5"
+                />
+              </svg>
+            </Button>
+          </div>
+        </div>
+        <div className="overflow-hidden">
+          <Marquee
+            vertical
+            className="h-78 hidden md:flex w-screen mt-4 md:absolute md:top-0 md:inset-0 isolate md:max-h-dvh"
+            duration={isMobile ? 240 : 60}
+          >
+            <img
+              alt="Hero Background"
+              className="w-full"
+              height={3255}
+              loading="lazy"
+              src={imgSrc}
+              width={1920}
+            />
+          </Marquee>
+          <div className="absolute md:hidden inset-0 pointer-events-none top-0 z-20">
+            <div className={mobileClassName} />
+          </div>
+
+          <div className="absolute hidden md:block md:inset-0 md:pointer-events-none md:top-0 md:z-20">
+            <div className={webClassName} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
@@ -0,0 +1,211 @@
+"use client";
+
+import {FC, useMemo, useRef} from "react";
+import {Avatar, AvatarProps, Button, Spacer, Tooltip} from "@nextui-org/react";
+import {clamp} from "@nextui-org/shared-utils";
+import {usePostHog} from "posthog-js/react";
+
+import {sectionWrapper, titleWrapper, title, subtitle} from "../primitives";
+
+import {FeaturesGrid} from "./features-grid";
+
+import {OpenCollectiveIcon, PatreonIcon, HeartBoldIcon, PlusLinearIcon} from "@/components/icons";
+import {Sponsor, SPONSOR_TIERS, SPONSOR_COLORS, getTier} from "@/libs/docs/sponsors";
+import {SonarPulse} from "@/components/sonar-pulse";
+import {useIsMobile} from "@/hooks/use-media-query";
+
+export interface SupportProps {
+  sponsors: Sponsor[];
+}
+
+const supportAccounts = [
+  {
+    title: "Open Collective",
+    description: "Sponsor the NextUI maintainers.",
+    icon: <OpenCollectiveIcon className="text-pink-500" />,
+    href: "https://opencollective.com/nextui",
+    isExternal: true,
+  },
+  {
+    title: "Patreon",
+    description: "Sponsor the creator, Junior Garcia.",
+    icon: <PatreonIcon className="text-pink-500" />,
+    href: "https://www.patreon.com/jrgarciadev?fan_landing=true",
+    isExternal: true,
+  },
+];
+
+const SONAR_PULSE_SIZE = 80;
+const SONAR_PULSE_CIRCLES_COUNT = 4;
+const SONAR_PULSE_RADIUS = 130;
+
+const getSponsorName = (sponsor: Sponsor) => {
+  if (!sponsor.name) {
+    return "";
+  }
+
+  return sponsor.name.slice(0, 2).toUpperCase();
+};
+
+const getSponsorSize = (sponsor: Sponsor, isMobile: boolean) => {
+  let size: AvatarProps["size"] = "md";
+  const tier = sponsor.tier || getTier(sponsor.totalAmountDonated);
+
+  switch (tier) {
+    case SPONSOR_TIERS.BRONZE:
+      size = isMobile ? "sm" : "md";
+      break;
+    case SPONSOR_TIERS.SILVER:
+      size = isMobile ? "sm" : "md";
+      break;
+    case SPONSOR_TIERS.GOLD:
+      size = isMobile ? "md" : "lg";
+      break;
+    case SPONSOR_TIERS.PLATINUM:
+      size = isMobile ? "md" : "lg";
+      break;
+    default:
+      size = isMobile ? "sm" : "md";
+  }
+
+  return size;
+};
+
+const getSponsorColor = (sponsor: Sponsor) => {
+  const tier = sponsor.tier || getTier(sponsor.totalAmountDonated);
+
+  return SPONSOR_COLORS[tier] || "default";
+};
+
+const getSponsorAvatarStyles = (index: number, sponsors: Sponsor[] = []) => {
+  const angle = (index * 360) / sponsors.length;
+  const radius = SONAR_PULSE_RADIUS;
+
+  // position the avatar randomly inside the sonar pulse
+  const randomRadius = clamp(Math.floor((index + 1) * radius), radius * 0.4, radius);
+
+  const x = randomRadius * Math.cos((angle * Math.PI) / 180);
+  const y = randomRadius * Math.sin((angle * Math.PI) / 180);
+
+  return {
+    transform: `translate(${x}px, ${y}px)`,
+  };
+};
+
+export const Support: FC<SupportProps> = ({sponsors = []}) => {
+  const sonarRef = useRef(null);
+  const isMobile = useIsMobile();
+  const posthog = usePostHog();
+
+  const handleExternalLinkClick = (href: string) => {
+    if (!href) return;
+    window.open(href, "_blank");
+  };
+
+  const handleBecomeSponsor = () => {
+    posthog.capture("Support - Become a sponsor", {
+      action: "click",
+      category: "landing-page",
+    });
+
+    handleExternalLinkClick(supportAccounts[0].href);
+  };
+  const renderSponsors = useMemo(() => {
+    if (!sponsors.length) return null;
+
+    return (
+      <div
+        className="absolute rounded-full bg-transparent"
+        style={{
+          width: `${SONAR_PULSE_RADIUS}px`,
+          top: SONAR_PULSE_RADIUS / 6,
+          left: SONAR_PULSE_RADIUS / 6,
+        }}
+      >
+        {sponsors.map((sponsor, index) => (
+          <Avatar
+            key={`${sponsor.MemberId}-${index}`}
+            isBordered
+            showFallback
+            className="absolute cursor-pointer bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-200"
+            color={getSponsorColor(sponsor) as AvatarProps["color"]}
+            name={getSponsorName(sponsor)}
+            size={getSponsorSize(sponsor, isMobile)}
+            src={sponsor.image}
+            style={getSponsorAvatarStyles(index, sponsors)}
+            onClick={() => handleExternalLinkClick(sponsor["website"] || sponsor["profile"])}
+          />
+        ))}
+      </div>
+    );
+  }, [isMobile, sponsors]);
+
+  return (
+    <section className={sectionWrapper({class: "flex flex-col items-center z-20 mt-16 lg:mt-44"})}>
+      <div className="max-w-4xl flex flex-col gap-8">
+        <div>
+          <div className={titleWrapper({class: "text-center items-center"})}>
+            <div className="flex md:inline-flex flex-col md:flex-row items-center">
+              <h1 className={title({size: "lg"})}>Support NextUI&nbsp;</h1>
+              <HeartBoldIcon
+                className="text-pink-500 animate-heartbeat"
+                size={50}
+                style={{
+                  animationDuration: "2.5s",
+                }}
+              />
+            </div>
+          </div>
+          <p
+            className={subtitle({class: "md:w-full text-center flex justify-center items-center"})}
+          >
+            Using NextUI in a profit-making product, as a freelancer, or for fun projects? Your
+            contributions will help to make NextUI better.
+          </p>
+          <Spacer y={12} />
+          <FeaturesGrid
+            classNames={{
+              base: "lg:grid-cols-2",
+            }}
+            features={supportAccounts}
+          />
+          <div
+            ref={sonarRef}
+            className="relative mt-32 md:mt-60 w-full flex items-center justify-center"
+          >
+            <SonarPulse
+              circlesCount={SONAR_PULSE_CIRCLES_COUNT}
+              color="#7928CA"
+              icon={
+                <Tooltip
+                  showArrow
+                  color="secondary"
+                  content={"Become a sponsor"}
+                  offset={10}
+                  radius="full"
+                >
+                  <Button
+                    isIconOnly
+                    aria-label="Become a sponsor"
+                    className="z-50 w-auto h-auto bg-gradient-to-b from-[#FF1CF7] to-[#7928CA]"
+                    radius="full"
+                    onPress={handleBecomeSponsor}
+                  >
+                    <PlusLinearIcon
+                      className="flex items-center justify-center rounded-full text-white"
+                      size={54}
+                    />
+                  </Button>
+                </Tooltip>
+              }
+              playState="running"
+              size={SONAR_PULSE_SIZE}
+            >
+              {renderSponsors}
+            </SonarPulse>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
@@ -1,211 +1,21 @@
-"use client";
+import {Support as SupportClient} from "./support-client";

-import {FC, useMemo, useRef} from "react";
-import {Avatar, AvatarProps, Button, Spacer, Tooltip} from "@nextui-org/react";
-import {clamp} from "@nextui-org/shared-utils";
-import {usePostHog} from "posthog-js/react";
+import {getAllSponsors} from "@/utils/get-all-sponsors";

-import {sectionWrapper, titleWrapper, title, subtitle} from "../primitives";
+async function getData() {
+  try {
+    const sponsors = await getAllSponsors();

-import {FeaturesGrid} from "./features-grid";
-
-import {OpenCollectiveIcon, PatreonIcon, HeartBoldIcon, PlusLinearIcon} from "@/components/icons";
-import {Sponsor, SPONSOR_TIERS, SPONSOR_COLORS, getTier} from "@/libs/docs/sponsors";
-import {SonarPulse} from "@/components/sonar-pulse";
-import {useIsMobile} from "@/hooks/use-media-query";
-
-export interface SupportProps {
-  sponsors: Sponsor[];
+    return {
+      sponsors,
+    };
+  } catch (error) {
+    throw new Error("Failed to fetch data");
+  }
 }

-const supportAccounts = [
-  {
-    title: "Open Collective",
-    description: "Sponsor the NextUI maintainers.",
-    icon: <OpenCollectiveIcon className="text-pink-500" />,
-    href: "https://opencollective.com/nextui",
-    isExternal: true,
-  },
-  {
-    title: "Patreon",
-    description: "Sponsor the creator, Junior Garcia.",
-    icon: <PatreonIcon className="text-pink-500" />,
-    href: "https://www.patreon.com/jrgarciadev?fan_landing=true",
-    isExternal: true,
-  },
-];
+export default async function Support() {
+  const data = await getData();

-const SONAR_PULSE_SIZE = 80;
-const SONAR_PULSE_CIRCLES_COUNT = 4;
-const SONAR_PULSE_RADIUS = 130;
-
-const getSponsorName = (sponsor: Sponsor) => {
-  if (!sponsor.name) {
-    return "";
-  }
-
-  return sponsor.name.slice(0, 2).toUpperCase();
-};
-
-const getSponsorSize = (sponsor: Sponsor, isMobile: boolean) => {
-  let size: AvatarProps["size"] = "md";
-  const tier = sponsor.tier || getTier(sponsor.totalAmountDonated);
-
-  switch (tier) {
-    case SPONSOR_TIERS.BRONZE:
-      size = isMobile ? "sm" : "md";
-      break;
-    case SPONSOR_TIERS.SILVER:
-      size = isMobile ? "sm" : "md";
-      break;
-    case SPONSOR_TIERS.GOLD:
-      size = isMobile ? "md" : "lg";
-      break;
-    case SPONSOR_TIERS.PLATINUM:
-      size = isMobile ? "md" : "lg";
-      break;
-    default:
-      size = isMobile ? "sm" : "md";
-  }
-
-  return size;
-};
-
-const getSponsorColor = (sponsor: Sponsor) => {
-  const tier = sponsor.tier || getTier(sponsor.totalAmountDonated);
-
-  return SPONSOR_COLORS[tier] || "default";
-};
-
-const getSponsorAvatarStyles = (index: number, sponsors: Sponsor[] = []) => {
-  const angle = (index * 360) / sponsors.length;
-  const radius = SONAR_PULSE_RADIUS;
-
-  // position the avatar randomly inside the sonar pulse
-  const randomRadius = clamp(Math.floor((index + 1) * radius), radius * 0.4, radius);
-
-  const x = randomRadius * Math.cos((angle * Math.PI) / 180);
-  const y = randomRadius * Math.sin((angle * Math.PI) / 180);
-
-  return {
-    transform: `translate(${x}px, ${y}px)`,
-  };
-};
-
-export const Support: FC<SupportProps> = ({sponsors = []}) => {
-  const sonarRef = useRef(null);
-  const isMobile = useIsMobile();
-  const posthog = usePostHog();
-
-  const handleExternalLinkClick = (href: string) => {
-    if (!href) return;
-    window.open(href, "_blank");
-  };
-
-  const handleBecomeSponsor = () => {
-    posthog.capture("Support - Become a sponsor", {
-      action: "click",
-      category: "landing-page",
-    });
-
-    handleExternalLinkClick(supportAccounts[0].href);
-  };
-  const renderSponsors = useMemo(() => {
-    if (!sponsors.length) return null;
-
-    return (
-      <div
-        className="absolute rounded-full bg-transparent"
-        style={{
-          width: `${SONAR_PULSE_RADIUS}px`,
-          top: SONAR_PULSE_RADIUS / 6,
-          left: SONAR_PULSE_RADIUS / 6,
-        }}
-      >
-        {sponsors.map((sponsor, index) => (
-          <Avatar
-            key={`${sponsor.MemberId}-${index}`}
-            isBordered
-            showFallback
-            className="absolute cursor-pointer bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-200"
-            color={getSponsorColor(sponsor) as AvatarProps["color"]}
-            name={getSponsorName(sponsor)}
-            size={getSponsorSize(sponsor, isMobile)}
-            src={sponsor.image}
-            style={getSponsorAvatarStyles(index, sponsors)}
-            onClick={() => handleExternalLinkClick(sponsor["website"] || sponsor["profile"])}
-          />
-        ))}
-      </div>
-    );
-  }, [isMobile, sponsors]);
-
-  return (
-    <section className={sectionWrapper({class: "flex flex-col items-center z-20 mt-16 lg:mt-44"})}>
-      <div className="max-w-4xl flex flex-col gap-8">
-        <div>
-          <div className={titleWrapper({class: "text-center items-center"})}>
-            <div className="flex md:inline-flex flex-col md:flex-row items-center">
-              <h1 className={title({size: "lg"})}>Support NextUI&nbsp;</h1>
-              <HeartBoldIcon
-                className="text-pink-500 animate-heartbeat"
-                size={50}
-                style={{
-                  animationDuration: "2.5s",
-                }}
-              />
-            </div>
-          </div>
-          <p
-            className={subtitle({class: "md:w-full text-center flex justify-center items-center"})}
-          >
-            Using NextUI in a profit-making product, as a freelancer, or for fun projects? Your
-            contributions will help to make NextUI better.
-          </p>
-          <Spacer y={12} />
-          <FeaturesGrid
-            classNames={{
-              base: "lg:grid-cols-2",
-            }}
-            features={supportAccounts}
-          />
-          <div
-            ref={sonarRef}
-            className="relative mt-32 md:mt-60 w-full flex items-center justify-center"
-          >
-            <SonarPulse
-              circlesCount={SONAR_PULSE_CIRCLES_COUNT}
-              color="#7928CA"
-              icon={
-                <Tooltip
-                  showArrow
-                  color="secondary"
-                  content={"Become a sponsor"}
-                  offset={10}
-                  radius="full"
-                >
-                  <Button
-                    isIconOnly
-                    aria-label="Become a sponsor"
-                    className="z-50 w-auto h-auto bg-gradient-to-b from-[#FF1CF7] to-[#7928CA]"
-                    radius="full"
-                    onPress={handleBecomeSponsor}
-                  >
-                    <PlusLinearIcon
-                      className="flex items-center justify-center rounded-full text-white"
-                      size={54}
-                    />
-                  </Button>
-                </Tooltip>
-              }
-              playState="running"
-              size={SONAR_PULSE_SIZE}
-            >
-              {renderSponsors}
-            </SonarPulse>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
+  return <SupportClient sponsors={data.sponsors} />;
+}
@@ -6,6 +6,7 @@ import NextImage from "next/image";
 import {usePostHog} from "posthog-js/react";

 import {ThemeSwitch} from "./theme-switch";
+import {InfoCircle} from "./icons/info-circle";

 import {Sandpack} from "@/components/sandpack";
 import {CarbonAd} from "@/components/ads/carbon-ad";
@@ -13,6 +14,15 @@ import * as DocsComponents from "@/components/docs/components";
 import * as BlogComponents from "@/components/blog/components";
 import {Codeblock} from "@/components/docs/components";
 import {VirtualAnchor, virtualAnchorEncode} from "@/components/virtual-anchor";
+import {
+  Table as StaticTable,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
+  TableColumnHeader,
+  TableRoot,
+} from "@/components/static-table";

 const Table: React.FC<{children?: React.ReactNode}> = ({children}) => {
  return (
@@ -97,15 +107,20 @@ const LinkedHeading: React.FC<LinkedHeadingProps> = ({

 const List: React.FC<{children?: React.ReactNode}> = ({children}) => {
  return (
-    <ul className="list-disc flex flex-col gap-2 ml-4 mt-2 [&>li>strong]:text-pink-500 dark:[&>li>strong]:text-cyan-600">
+    <ul className="list-disc flex flex-col gap-2 ml-4 mt-2 [&>li>strong]:text-foreground [&>li>strong]:font-medium">
      {children}
    </ul>
  );
 };

-const InlineCode = ({children}: {children?: React.ReactNode}) => {
+const InlineCode = ({children, className}: {children?: React.ReactNode; className?: string}) => {
  return (
-    <Components.Code className="font-normal text-default-700 bg-default-200/50 dark:bg-default-100/60 px-2 py-0.5">
+    <Components.Code
+      className={clsx(
+        'p-0 relative before:content-["`"] after:content-["`"] font-semibold font-mono text-small rounded-md text-default-900 dark:text-default-500 bg-transparent',
+        className,
+      )}
+    >
      {children}
    </Components.Code>
  );
@@ -153,16 +168,21 @@ const Code = ({
        });
      }}
    >
-      <Codeblock codeString={codeString} language={language} metastring={meta} />
+      <Codeblock
+        className="sp-editor"
+        codeString={codeString}
+        language={language}
+        metastring={meta}
+      />
    </Components.Snippet>
  );
 };

 const Link = ({href, children}: {href?: string; children?: React.ReactNode}) => {
-  const isExternal = href?.startsWith("http");
+  const isExternal = href?.startsWith("http") || href?.startsWith("https");
  const posthog = usePostHog();

-  const handlePress = () => {
+  const handleClick = () => {
    posthog.capture("MDXComponents - Click", {
      category: "docs",
      action: "click",
@@ -170,18 +190,123 @@ const Link = ({href, children}: {href?: string; children?: React.ReactNode}) =>
    });
  };

+  const externalProps = isExternal ? {target: "_blank", rel: "noopener noreferrer"} : {};
+
  return (
    <Components.Link
+      className="relative hover:opacity-100 text-foreground font-bold after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:rounded-full after:h-[1px] after:bg-primary-400 dark:after:bg-default-300 hover:after:h-[2px]"
+      disableAnimation={true}
      href={href}
-      isExternal={isExternal}
-      showAnchorIcon={isExternal}
-      onPress={handlePress}
+      {...externalProps}
+      onClick={handleClick}
    >
      {children}
    </Components.Link>
  );
 };

+const InlineCodeChip = ({children}: {children?: React.ReactNode}) => {
+  return (
+    <InlineCode className="before:hidden after:hidden text-tiny rounded-md text-default-600 bg-default-100 dark:bg-default-100/80 px-1.5 py-0.5">
+      {children}
+    </InlineCode>
+  );
+};
+
+interface APITableProps {
+  data: {
+    attribute: string;
+    type: string;
+    description: string;
+    default?: string;
+  }[];
+}
+
+export const APITable: React.FC<APITableProps> = ({data}) => {
+  return (
+    <TableRoot className="overflow-x-auto overflow-y-hidden">
+      <StaticTable aria-label="API table" className="w-full" layout="auto">
+        <TableHeader>
+          <TableRow>
+            <TableColumnHeader>Prop</TableColumnHeader>
+            <TableColumnHeader>Type</TableColumnHeader>
+            <TableColumnHeader>Default</TableColumnHeader>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data.map((item, index) => (
+            <TableRow key={index} className="[&>td]:px-2 [&>td]:py-1.5 [&>td]:first:pt-4">
+              <TableCell className="flex items-center gap-1 font-mono text-small whitespace-nowrap">
+                <InlineCodeChip>{item.attribute}</InlineCodeChip>
+                {item.description && (
+                  <>
+                    {/* Desktop tooltip */}
+                    <Components.Tooltip
+                      classNames={{
+                        content: "max-w-[240px]",
+                      }}
+                      content={item.description}
+                      delay={0}
+                      placement="top"
+                    >
+                      <div className="flex items-center gap-1 cursor-default hidden sm:block">
+                        <InfoCircle className="text-default-400" size={16} />
+                      </div>
+                    </Components.Tooltip>
+                    {/* Mobile popover */}
+                    <Components.Popover placement="top">
+                      <Components.PopoverTrigger>
+                        <button className="flex items-center gap-1 sm:hidden outline-none">
+                          <InfoCircle className="text-default-400" size={16} />
+                        </button>
+                      </Components.PopoverTrigger>
+                      <Components.PopoverContent className="max-w-[240px]">
+                        {item.description}
+                      </Components.PopoverContent>
+                    </Components.Popover>
+                  </>
+                )}
+              </TableCell>
+              <TableCell className="font-mono text-small whitespace-nowrap text-primary">
+                <InlineCodeChip>
+                  <div className="flex max-w-[300px] flex-wrap text-wrap">{item.type}</div>
+                </InlineCodeChip>
+              </TableCell>
+              <TableCell className="font-mono text-small whitespace-nowrap">
+                {item.default && item.default !== "-" ? (
+                  <InlineCodeChip>
+                    {item.default !== "true" && item.default !== "false"
+                      ? `"${item.default}"`
+                      : item.default}
+                  </InlineCodeChip>
+                ) : (
+                  <svg
+                    aria-hidden="true"
+                    className="text-default-400"
+                    fill="none"
+                    focusable="false"
+                    height="15"
+                    viewBox="0 0 15 15"
+                    width="15"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      clipRule="evenodd"
+                      d="M2 7.5C2 7.22386 2.22386 7 2.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H2.5C2.22386 8 2 7.77614 2 7.5Z"
+                      fill="currentColor"
+                      fillRule="evenodd"
+                    />
+                  </svg>
+                )}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </StaticTable>
+    </TableRoot>
+  );
+};
+
 export const MDXComponents = {
  /**
   * Next.js components
@@ -211,9 +336,7 @@ export const MDXComponents = {
  h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => <LinkedHeading as="h2" {...props} />,
  h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => <LinkedHeading as="h3" {...props} />,
  h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => <LinkedHeading as="h4" {...props} />,
-  strong: (props: React.HTMLAttributes<HTMLElement>) => (
-    <strong className="font-medium" {...props} />
-  ),
+  strong: (props: React.HTMLAttributes<HTMLElement>) => <strong {...props} />,
  table: Table,
  thead: Thead,
  tr: Trow,
@@ -234,5 +357,6 @@ export const MDXComponents = {
      {...props}
    />
  ),
+  APITable,
  // Block,
 } as unknown as Record<string, React.ReactNode>;
@@ -1,5 +1,5 @@
-/* eslint-disable react/display-name */
 "use client";
+
 import type {MDXComponents as MDXComponentsType} from "mdx/types";

 import {useMDXComponent} from "next-contentlayer2/hooks";
@@ -17,6 +17,7 @@ import {
  DropdownItem,
  DropdownTrigger,
  Chip,
+  Divider,
 } from "@nextui-org/react";
 import {dataFocusVisibleClasses} from "@nextui-org/theme";
 import {ChevronDownIcon, LinkIcon} from "@nextui-org/shared-icons";
@@ -30,15 +31,17 @@ import {usePress} from "@react-aria/interactions";
 import {useFocusRing} from "@react-aria/focus";
 import {usePostHog} from "posthog-js/react";

+import {FbRoadmapLink} from "./featurebase/fb-roadmap-link";
+
 import {currentVersion} from "@/utils/version";
 import {siteConfig} from "@/config/site";
 import {Route} from "@/libs/docs/page";
 import {LargeLogo, SmallLogo, ThemeSwitch} from "@/components";
-import {XIcon, GithubIcon, DiscordIcon, SearchLinearIcon} from "@/components/icons";
+import {GithubIcon, SearchLinearIcon} from "@/components/icons";
 import {useIsMounted} from "@/hooks/use-is-mounted";
 import {DocsSidebar} from "@/components/docs/sidebar";
 import {useCmdkStore} from "@/components/cmdk";
-import {FbRoadmapLink} from "@/components/featurebase/fb-roadmap-link";
+import githubInfo from "@/config/github-info.json";

 export interface NavbarProps {
  routes: Route[];
@@ -94,22 +97,26 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
  const searchButton = (
    <Button
      aria-label="Quick search"
-      className="text-sm font-normal text-default-500 bg-default-400/20 dark:bg-default-500/20"
+      className="border-1 px-3 border-default-200 rounded-full text-small font-normal text-default-500 bg-transparent"
      endContent={
-        <Kbd className="hidden py-0.5 px-2 lg:inline-block" keys={commandKey}>
+        <Kbd
+          className="hidden text-xs rounded-full py-0.5 px-1.5 lg:inline-block"
+          keys={commandKey}
+        >
          K
        </Kbd>
      }
      startContent={
        <SearchLinearIcon
          className="text-base text-default-400 pointer-events-none flex-shrink-0"
-          size={18}
+          size={16}
          strokeWidth={2}
        />
      }
+      variant="bordered"
      onPress={handleOpenCmdk}
    >
-      Quick Search...
+      Search
    </Button>
  );

@@ -117,7 +124,10 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
    return null;
  }

-  const navLinkClasses = clsx(link({color: "foreground"}), "data-[active=true]:text-primary");
+  const navLinkClasses = clsx(
+    link({color: "foreground"}),
+    "data-[active=true]:text-primary data-[active=true]:font-semibold",
+  );

  const handleVersionChange = (key: Key) => {
    if (key === "v1") {
@@ -142,13 +152,17 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
      className={clsx({
        "z-[100001]": isMenuOpen,
      })}
+      classNames={{
+        base: "bg-white/[.90] dark:bg-black/[.65]",
+        wrapper: "max-w-8xl",
+      }}
      isMenuOpen={isMenuOpen}
      maxWidth="xl"
      position="sticky"
      onMenuOpenChange={setIsMenuOpen}
    >
      <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
-        <NavbarBrand as="li" className="gap-3 max-w-fit">
+        <NavbarBrand as="li" className="gap-x-3 max-w-fit">
          <NextLink
            aria-label="Home"
            className="flex justify-start items-center gap-2 tap-highlight-transparent transition-opacity active:opacity-50"
@@ -165,7 +179,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
                  <motion.div animate={{opacity: 1}} exit={{opacity: 0}} initial={{opacity: 0}}>
                    <DropdownTrigger>
                      <Button
-                        className="hidden text-xs h-6 w-[74px] py-1 min-w-fit sm:flex gap-0.5 bg-default-400/20 dark:bg-default-500/20"
+                        className="min-w-[74px] max-w-[74px] hidden font-medium text-default-500 text-xs h-6 w-[74px] py-1 min-w-fit sm:flex gap-0.5 bg-default-400/20 dark:bg-default-500/20"
                        endContent={<ChevronDownIcon className="text-tiny" />}
                        radius="full"
                        size="sm"
@@ -192,8 +206,68 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
          ) : (
            <div className="w-[74px]" />
          )}
+          <Chip
+            as={NextLink}
+            className="hidden sm:flex bg-primary-100/50 border-1 hover:bg-primary-100/80 border-primary-200/50 cursor-pointer"
+            classNames={{
+              content: "font-semibold text-primary-500 dark:text-primary-600 text-xs ",
+            }}
+            color="primary"
+            href="/blog/v2.6.0"
+            variant="flat"
+            onClick={() => handlePressNavbarItem("New version v2.6.0", "/blog/v2.6.0")}
+          >
+            New version v2.6.0&nbsp;
+            <span aria-label="emoji" role="img">
+              🔥
+            </span>
+          </Chip>
        </NavbarBrand>
-        <ul className="hidden lg:flex gap-4 justify-start items-center">
+      </NavbarContent>
+
+      <NavbarContent className="flex w-full gap-2 sm:hidden " justify="end">
+        <NavbarItem className="flex h-full items-center">
+          <Link
+            isExternal
+            aria-label="Github"
+            className="p-1"
+            href={siteConfig.links.github}
+            onPress={() => handlePressNavbarItem("Github", siteConfig.links.github)}
+          >
+            <GithubIcon className="text-default-600 dark:text-default-500" />
+          </Link>
+        </NavbarItem>
+        <NavbarItem className="flex h-full items-center">
+          <ThemeSwitch
+            classNames={{
+              wrapper: "!text-default-500 dark:!text-default-500",
+            }}
+          />
+        </NavbarItem>
+        <NavbarItem className="flex h-full items-center">
+          <button
+            className={clsx(
+              "transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-none",
+              // focus ring
+              ...dataFocusVisibleClasses,
+            )}
+            data-focus-visible={isFocusVisible}
+            {...focusProps}
+            {...pressProps}
+          >
+            <SearchLinearIcon className="mt-px text-default-600 dark:text-default-500" size={20} />
+          </button>
+        </NavbarItem>
+        <NavbarItem className="w-10 h-full">
+          <NavbarMenuToggle
+            aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+            className="w-full h-full pt-1"
+          />
+        </NavbarItem>
+      </NavbarContent>
+
+      <NavbarContent className="hidden sm:flex basis-1/5 sm:basis-full" justify="end">
+        <ul className="hidden lg:flex gap-4 pr-2 justify-start items-center [&>li>a]:text-sm [&>li>a]:font-medium">
          <NavbarItem>
            <NextLink
              className={navLinkClasses}
@@ -238,122 +312,30 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
              Figma
            </NextLink>
          </NavbarItem>
-          {/* hide feedback and changelog at this moment */}
-          {/* <NavbarItem>
-            <NextLink className={navLinkClasses} color="foreground" href="#">
-              <FbChangelogButton key="changelog" userName="" />
-            </NextLink>
-          </NavbarItem>
-          <NavbarItem>
-            <NextLink className={navLinkClasses} color="foreground" href="#">
-              <FbFeedbackButton key="feedback" userEmail="" />
-            </NextLink>
-          </NavbarItem> */}
          <NavbarItem>
            <FbRoadmapLink className={navLinkClasses} />
          </NavbarItem>
-          {/* <NavbarItem>
-            <Chip
-              as={NextLink}
-              className="hover:bg-default-100 border-default-200/80 dark:border-default-100/80 transition-colors cursor-pointer"
-              color="secondary"
-              href="/blog/v2.2.0"
-              variant="dot"
-              onClick={() => handlePressNavbarItem("Introducing v2.2.0", "/blog/v2.2.0")}
-            >
-              Introducing v2.2.0&nbsp;
-              <span aria-label="rocket emoji" role="img">
-                🚀
-              </span>
-            </Chip>
-          </NavbarItem> */}
        </ul>
-      </NavbarContent>
-
-      <NavbarContent className="flex w-full gap-2 sm:hidden" justify="end">
-        <NavbarItem className="flex h-full items-center">
+        <Divider className="h-7 hidden lg:flex" orientation="vertical" />
+        <NavbarItem className="hidden sm:flex gap-2">
+          {searchButton}
          <Link
            isExternal
            aria-label="Github"
-            className="p-1"
-            href="https://github.com/nextui-org/nextui"
-            onClick={() => handlePressNavbarItem("Github", "https://github.com/nextui-org/nextui")}
-          >
-            <GithubIcon className="text-default-600 dark:text-default-500" />
-          </Link>
-        </NavbarItem>
-        <NavbarItem className="flex h-full items-center">
-          <ThemeSwitch />
-        </NavbarItem>
-        <NavbarItem className="flex h-full items-center">
-          <button
-            className={clsx(
-              "transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-none",
-              // focus ring
-              ...dataFocusVisibleClasses,
-            )}
-            data-focus-visible={isFocusVisible}
-            {...focusProps}
-            {...pressProps}
-          >
-            <SearchLinearIcon className="mt-px text-default-600 dark:text-default-500" size={20} />
-          </button>
-        </NavbarItem>
-        <NavbarItem className="w-10 h-full">
-          <NavbarMenuToggle
-            aria-label={isMenuOpen ? "Close menu" : "Open menu"}
-            className="w-full h-full pt-1"
-          />
-        </NavbarItem>
-      </NavbarContent>
-
-      <NavbarContent className="hidden sm:flex basis-1/5 sm:basis-full" justify="end">
-        <NavbarItem className="hidden sm:flex">
-          <Chip
-            as={NextLink}
-            className="bg-default-100/50 hover:bg-default-100 border-default-200/80 dark:border-default-100/80 transition-colors cursor-pointer"
-            color="default"
-            href="/blog/v2.4.0"
-            variant="dot"
-            onClick={() => handlePressNavbarItem("New version v2.4.0", "/blog/v2.4.0")}
-          >
-            New version v2.4.0&nbsp;
-            <span aria-label="emoji" role="img">
-              🚀
-            </span>
-          </Chip>
-        </NavbarItem>
-        <NavbarItem className="hidden sm:flex">
-          <Link
-            isExternal
-            aria-label="X"
-            className="p-1"
-            href={siteConfig.links.twitter}
-            onPress={() => handlePressNavbarItem("Twitter", siteConfig.links.twitter)}
-          >
-            <XIcon className="text-default-600 dark:text-default-500" />
-          </Link>
-          <Link
-            isExternal
-            aria-label="Discord"
-            className="p-1"
-            href={siteConfig.links.discord}
-            onPress={() => handlePressNavbarItem("Discord", siteConfig.links.discord)}
-          >
-            <DiscordIcon className="text-default-600 dark:text-default-500" />
-          </Link>
-          <Link
-            isExternal
-            aria-label="Github"
-            className="p-1"
+            className="flex gap-0.5 items-center h-10 px-2 border-1 border-default-200 rounded-full text-default-600 dark:text-default-500"
            href={siteConfig.links.github}
            onPress={() => handlePressNavbarItem("Github", siteConfig.links.github)}
          >
-            <GithubIcon className="text-default-600 dark:text-default-500" />
+            <GithubIcon />
+            <span className="text-xs font-medium">{githubInfo.stars.formatted}</span>
          </Link>
-          <ThemeSwitch />
+          <ThemeSwitch
+            className="border-1 border-default-200 rounded-full h-full min-w-10 min-h-10 flex items-center justify-center"
+            classNames={{
+              wrapper: "!text-default-400 dark:!text-default-500",
+            }}
+          />
        </NavbarItem>
-        <NavbarItem className="hidden lg:flex">{searchButton}</NavbarItem>
        {/* <NavbarItem className="hidden md:flex">
          <Button
            isExternal
@@ -18,7 +18,7 @@ export const title = tv({
    },
    size: {
      sm: "text-3xl lg:text-4xl",
-      md: "text-[2.5rem] lg:text-5xl",
+      md: "text-[clamp(1rem,10vw,2rem)] sm:text-[clamp(1rem,10vw,3rem)] lg:text-5xl",
      lg: "text-4xl lg:text-6xl",
      xl: "text-5xl md:text-6xl lg:text-7xl",
    },
@@ -5,13 +5,13 @@ import {useClipboard} from "@nextui-org/use-clipboard";

 import {CopyLinearIcon} from "@/components/icons";

-export const CopyButton = () => {
+export const CopyButton = ({code: codeProp}: {code?: string}) => {
  const {copy, copied} = useClipboard();

  const {sandpack} = useSandpack();

  const copyHandler = () => {
-    const code = sandpack.files[sandpack.activeFile].code;
+    const code = codeProp ?? sandpack.files[sandpack.activeFile].code;

    copy(code);
  };
@@ -29,7 +29,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({template, onC
      aria-label="Language selector"
      classNames={{
        base: "absolute z-10 right-3 bottom-4",
-        cursor: "bg-zinc-400 dark:bg-zinc-700",
+        cursor: "bg-default-600 dark:bg-default-300",
        tabList:
          "bg-transparent relative before:bg-white/5 before:w-full before:rounded-lg before:h-full before:content-[''] before:block before:z-1 before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100",
      }}
@@ -5,11 +5,6 @@ import Script from "next/script";
 export function ScriptProviders() {
  return (
    <>
-      <Script
-        id="featurebase-sdk"
-        src="https://do.featurebase.app/js/sdk.js"
-        strategy={"beforeInteractive"}
-      />
      <Script
        defer
        data-modal-disclaimer="This is a custom LLM for NextUI with access to all developer docs (nextui.org/docs) and GitHub Issues and PRs (github.com/nextui-org/nextui)."
@@ -0,0 +1,73 @@
+import type {ComponentProps, FC} from "react";
+
+import {cn, table} from "@nextui-org/theme";
+
+const tableSlots = table();
+
+export const TableRoot: FC<ComponentProps<"div">> = ({children, className, ...props}) => {
+  return (
+    <div {...props} className={tableSlots.base({className})}>
+      {children}
+    </div>
+  );
+};
+
+export const Table: FC<
+  ComponentProps<"table"> & {
+    layout?: "fixed" | "auto";
+  }
+> = ({children, className, layout = "auto", ...props}) => {
+  return (
+    <table {...props} className={tableSlots.table({className, layout})}>
+      {children}
+    </table>
+  );
+};
+
+export const TableHeader: FC<ComponentProps<"thead">> = ({children, className, ...props}) => {
+  return (
+    <thead {...props} className={tableSlots.thead({className})}>
+      {children}
+    </thead>
+  );
+};
+
+export const TableBody: FC<ComponentProps<"tbody">> = ({children, className, ...props}) => {
+  return (
+    <tbody {...props} className={tableSlots.tbody({className})}>
+      {children}
+    </tbody>
+  );
+};
+
+export const TableRow: FC<ComponentProps<"tr">> = ({children, className, ...props}) => {
+  return (
+    <tr {...props} className={tableSlots.tr({className})}>
+      {children}
+    </tr>
+  );
+};
+
+export const TableColumnHeader: FC<ComponentProps<"th">> = ({children, className, ...props}) => {
+  return (
+    <td {...props} className={tableSlots.th({className})}>
+      {children}
+    </td>
+  );
+};
+
+export const TableCell: FC<ComponentProps<"td">> = ({children, className, ...props}) => {
+  return (
+    <td {...props} className={tableSlots.td({class: cn("p-0", className)})}>
+      {children}
+    </td>
+  );
+};
+
+export const TableColumn: FC<ComponentProps<"th">> = ({children, className, ...props}) => {
+  return (
+    <th {...props} className={tableSlots.th({class: cn("p-0", className)})}>
+      {children}
+    </th>
+  );
+};
@@ -1,6 +1,6 @@
 "use client";

-import {FC} from "react";
+import {FC, ChangeEvent} from "react";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {SwitchProps, useSwitch} from "@nextui-org/react";
 import {useTheme} from "next-themes";
@@ -8,7 +8,7 @@ import {clsx} from "@nextui-org/shared-utils";
 import {useIsSSR} from "@react-aria/ssr";
 import {usePostHog} from "posthog-js/react";

-import {SunFilledIcon, MoonFilledIcon} from "@/components/icons";
+import {SunLinearIcon, MoonIcon} from "@/components/icons";

 export interface ThemeSwitchProps {
  className?: string;
@@ -20,20 +20,29 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
  const isSSR = useIsSSR();
  const posthog = usePostHog();

-  const onChange = () => {
-    theme === "light" ? setTheme("dark") : setTheme("light");
+  const initialTheme = isSSR ? "light" : theme;
+
+  const handleThemeChange = (
+    e?: ChangeEvent<HTMLInputElement> | React.MouseEvent | React.KeyboardEvent,
+  ) => {
+    e?.preventDefault();
+    e?.stopPropagation();
+
+    const newTheme = theme === "light" ? "dark" : "light";
+
+    setTheme(newTheme);

    posthog.capture("ThemeChange", {
      action: "click",
      category: "theme",
-      data: theme === "light" ? "dark" : "light",
+      data: newTheme,
    });
  };

  const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} = useSwitch({
-    isSelected: theme === "light",
-    "aria-label": `Switch to ${theme === "light" ? "dark" : "light"} mode`,
-    onChange,
+    isSelected: initialTheme === "light",
+    "aria-label": `Switch to ${initialTheme === "light" ? "dark" : "light"} mode`,
+    onChange: handleThemeChange as (event: ChangeEvent<HTMLInputElement>) => void,
  });

  return (
@@ -44,6 +53,12 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
          className,
          classNames?.base,
        ),
+        onClick: handleThemeChange,
+        onKeyDown: (e: React.KeyboardEvent) => {
+          if (e.key === "Enter" || e.key === " ") {
+            handleThemeChange(e);
+          }
+        },
      })}
    >
      <VisuallyHidden>
@@ -59,8 +74,8 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
              "rounded-lg",
              "flex items-center justify-center",
              "group-data-[selected=true]:bg-transparent",
-              "!text-default-600 dark:!text-default-500",
-              "pt-px",
+              "!text-default-600 dark:!text-default-300",
+              "pt-0",
              "px-0",
              "mx-0",
            ],
@@ -68,7 +83,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
          ),
        })}
      >
-        {!isSelected || isSSR ? <SunFilledIcon size={22} /> : <MoonFilledIcon size={22} />}
+        {!isSelected || isSSR ? <SunLinearIcon size={22} /> : <MoonIcon size={22} />}
      </div>
    </Component>
  );
@@ -1,27 +1,73 @@
-import {Inter} from "next/font/google";
+import localFont from "next/font/local";

-export const fontSans = Inter({
-  variable: "--font-sans",
-  adjustFontFallback: true,
-  display: "optional",
-  fallback: [
-    "ui-sans-serif",
-    "system-ui",
-    "-apple-system",
-    "BlinkMacSystemFont",
-    '"Segoe UI"',
-    "Roboto",
-    '"Helvetica Neue"',
-    "Arial",
-    '"Noto Sans"',
-    "sans-serif",
-    '"Apple Color Emoji"',
-    '"Segoe UI Emoji"',
-    '"Segoe UI Symbol"',
-    '"Noto Color Emoji"',
+const fontSans = localFont({
+  src: [
+    {
+      path: "../public/assets/fonts/Inter-Light.woff2",
+      style: "normal",
+      weight: "300",
+    },
+    {
+      path: "../public/assets/fonts/Inter-Regular.woff2",
+      style: "normal",
+      weight: "400",
+    },
+    {
+      path: "../public/assets/fonts/Inter-Medium.woff2",
+      style: "normal",
+      weight: "500",
+    },
+    {
+      path: "../public/assets/fonts/Inter-SemiBold.woff2",
+      style: "normal",
+      weight: "600",
+    },
+    {
+      path: "../public/assets/fonts/Inter-Bold.woff2",
+      style: "normal",
+      weight: "700",
+    },
+    {
+      path: "../public/assets/fonts/Inter-ExtraBold.woff2",
+      style: "normal",
+      weight: "800",
+    },
+    {
+      path: "../public/assets/fonts/Inter-Black.woff2",
+      style: "normal",
+      weight: "900",
+    },
  ],
-  preload: true,
-  style: "normal",
-  subsets: ["latin"],
-  weight: ["400", "500", "700"],
+  variable: "--font-sans",
 });
+
+const fontMono = localFont({
+  src: [
+    {
+      path: "../public/assets/fonts/FiraCode-Regular.woff2",
+      style: "normal",
+      weight: "400",
+    },
+    {
+      path: "../public/assets/fonts/FiraCode-Medium.woff2",
+      style: "normal",
+      weight: "500",
+    },
+    {
+      path: "../public/assets/fonts/FiraCode-SemiBold.woff2",
+      style: "normal",
+      weight: "600",
+    },
+    {
+      path: "../public/assets/fonts/FiraCode-Bold.woff2",
+      style: "normal",
+      weight: "700",
+    },
+  ],
+  variable: "--font-mono",
+});
+
+export const fonts = {
+  mono: fontMono,
+  sans: fontSans,
+};
@@ -0,0 +1,6 @@
+{
+  "stars": { "raw": 22002, "formatted": "22K" },
+  "forks": 1536,
+  "subscribers": 85,
+  "openIssues": 433
+}
@@ -12,6 +12,12 @@
          "keywords": "introduction, nextui",
          "path": "/docs/guide/introduction.mdx"
        },
+        {
+          "key": "design-principles",
+          "title": "Design Principles",
+          "keywords": "design principles, nextui",
+          "path": "/docs/guide/design-principles.mdx"
+        },
        {
          "key": "installation",
          "title": "Installation",
@@ -22,26 +28,21 @@
          "key": "cli",
          "title": "CLI",
          "keywords": "cli, command line interface",
-          "path": "/docs/guide/cli.mdx",
-          "newPost": true
-        },
-        {
-          "key": "design-principles",
-          "title": "Design Principles",
-          "keywords": "design principles, nextui",
-          "path": "/docs/guide/design-principles.mdx"
+          "path": "/docs/guide/cli.mdx"
        },
        {
          "key": "routing",
          "title": "Routing",
          "keywords": "client side routing, routing, browser routing, nextui, next.js router, react router, remix router",
-          "path": "/docs/guide/routing.mdx"
+          "path": "/docs/guide/routing.mdx",
+          "updated": true
        },
        {
-          "key": "form",
+          "key": "forms",
          "title": "Forms",
          "keywords": "forms, form validation, nextui",
-          "path": "/docs/guide/form.mdx"
+          "path": "/docs/guide/forms.mdx",
+          "newPost": true
        },
        {
          "key": "upgrade-to-v2",
@@ -149,14 +150,15 @@
          "key": "autocomplete",
          "title": "Autocomplete",
          "keywords": "autocomplete, auto suggest, search, typeahead",
-          "path": "/docs/components/autocomplete.mdx"
+          "path": "/docs/components/autocomplete.mdx",
+          "updated": true
        },
        {
          "key": "alert",
          "title": "Alert",
          "keywords": "alert, notification, message",
          "path": "/docs/components/alert.mdx",
-          "isNew": true
+          "newPost": true
        },
        {
          "key": "avatar",
@@ -168,8 +170,7 @@
          "key": "badge",
          "title": "Badge",
          "keywords": "badge, markers, status indication, count display",
-          "path": "/docs/components/badge.mdx",
-          "updated": true
+          "path": "/docs/components/badge.mdx"
        },
        {
          "key": "breadcrumbs",
@@ -181,14 +182,14 @@
          "key": "button",
          "title": "Button",
          "keywords": "button, interactive, action trigger, click events",
-          "path": "/docs/components/button.mdx"
+          "path": "/docs/components/button.mdx",
+          "updated": true
        },
        {
          "key": "calendar",
          "title": "Calendar",
          "keywords": "calendar, date picker, month picker, year picker",
-          "path": "/docs/components/calendar.mdx",
-          "newPost": true
+          "path": "/docs/components/calendar.mdx"
        },
        {
          "key": "card",
@@ -207,7 +208,8 @@
          "key": "checkbox-group",
          "title": "Checkbox Group",
          "keywords": "checkbox group, binary choice, selection control, toggle",
-          "path": "/docs/components/checkbox-group.mdx"
+          "path": "/docs/components/checkbox-group.mdx",
+          "updated": true
        },
        {
          "key": "chip",
@@ -231,22 +233,19 @@
          "key": "date-input",
          "title": "Date Input",
          "keywords": "date-input, time, input, timezone",
-          "path": "/docs/components/date-input.mdx",
-          "newPost": true
+          "path": "/docs/components/date-input.mdx"
        },
        {
          "key": "date-picker",
          "title": "Date Picker",
          "keywords": "date-picker, time, input, timezone",
-          "path": "/docs/components/date-picker.mdx",
-          "newPost": true
+          "path": "/docs/components/date-picker.mdx"
        },
        {
          "key": "date-range-picker",
          "title": "Date Range Picker",
          "keywords": "date-range-picker, date-picker, time, input, timezone",
-          "path": "/docs/components/date-range-picker.mdx",
-          "newPost": true
+          "path": "/docs/components/date-range-picker.mdx"
        },
        {
          "key": "divider",
@@ -267,6 +266,13 @@
          "path": "/docs/components/drawer.mdx",
          "newPost": true
        },
+        {
+          "key": "form",
+          "title": "Form",
+          "keywords": "forms, form validation, nextui",
+          "path": "/docs/components/form.mdx",
+          "newPost": true
+        },
        {
          "key": "image",
          "title": "Image",
@@ -277,7 +283,15 @@
          "key": "input",
          "title": "Input",
          "keywords": "input, text box, form field, data entry",
-          "path": "/docs/components/input.mdx"
+          "path": "/docs/components/input.mdx",
+          "updated": true
+        },
+        {
+          "key": "input-otp",
+          "title": "Input OTP",
+          "keywords": "input, otp, auth, verification code",
+          "path": "/docs/components/input-otp.mdx",
+          "newPost": true
        },
        {
          "key": "kbd",
@@ -295,7 +309,8 @@
          "key": "listbox",
          "title": "Listbox",
          "keywords": "listbox, selection, option list, multiple choice",
-          "path": "/docs/components/listbox.mdx"
+          "path": "/docs/components/listbox.mdx",
+          "updated": true
        },
        {
          "key": "modal",
@@ -332,14 +347,14 @@
          "key": "radio-group",
          "title": "Radio Group",
          "keywords": "radio group, selection set, option selection, exclusive choices",
-          "path": "/docs/components/radio-group.mdx"
+          "path": "/docs/components/radio-group.mdx",
+          "updated": true
        },
        {
          "key": "range-calendar",
          "title": "Range Calendar",
          "keywords": "range calendar, date picker, month picker, year picker",
-          "path": "/docs/components/range-calendar.mdx",
-          "newPost": true
+          "path": "/docs/components/range-calendar.mdx"
        },
        {
          "key": "scroll-shadow",
@@ -351,14 +366,14 @@
          "key": "select",
          "title": "Select",
          "keywords": "select, selection, option list, multiple choice",
-          "path": "/docs/components/select.mdx"
+          "path": "/docs/components/select.mdx",
+          "updated": true
        },
        {
          "key": "skeleton",
          "title": "Skeleton",
          "keywords": "skeleton, loading state, placeholder, content preview",
-          "path": "/docs/components/skeleton.mdx",
-          "updated": true
+          "path": "/docs/components/skeleton.mdx"
        },
        {
          "key": "slider",
@@ -388,7 +403,8 @@
          "key": "switch",
          "title": "Switch",
          "keywords": "switch, toggle, binary input, on/off control",
-          "path": "/docs/components/switch.mdx"
+          "path": "/docs/components/switch.mdx",
+          "updated": true
        },
        {
          "key": "table",
@@ -400,28 +416,33 @@
          "key": "tabs",
          "title": "Tabs",
          "keywords": "tabs, section navigation, categorized content, tabbed interface",
-          "path": "/docs/components/tabs.mdx",
-          "updated": true
+          "path": "/docs/components/tabs.mdx"
+        },
+        {
+          "key": "toast",
+          "title": "Toast",
+          "keywords": "toast, notification, message",
+          "path": "/docs/components/toast.mdx",
+          "comingSoon": true
        },
        {
          "key": "textarea",
          "title": "Textarea",
          "keywords": "textarea, multi-line text input, large text field, form control",
-          "path": "/docs/components/textarea.mdx"
+          "path": "/docs/components/textarea.mdx",
+          "updated": true
        },
        {
          "key": "time-input",
          "title": "Time Input",
          "keywords": "timeinput, time, input, timezone",
-          "path": "/docs/components/time-input.mdx",
-          "newPost": true
+          "path": "/docs/components/time-input.mdx"
        },
        {
          "key": "tooltip",
          "title": "Tooltip",
          "keywords": "tooltip, hint, descriptive message, hover info",
-          "path": "/docs/components/tooltip.mdx",
-          "updated": true
+          "path": "/docs/components/tooltip.mdx"
        },
        {
          "key": "user",
@@ -494,4 +515,4 @@
      ]
    }
  ]
-}
+}
@@ -0,0 +1,751 @@
+---
+title: "NextUI v2.6.0 🔥"
+description: "4 new components Form, Drawer, Input OTP and Alert, React 19 & Next.js 15 support, and lots of bug fixes and improvements."
+date: "2024-12-06"
+image: "/blog/v2.6.0.jpg"
+tags: ["nextui", "v2.6.0", "release", "bug fixes", "improvements", "animations"]
+author:
+  name: "Junior Garcia"
+  username: "@jrgarciadev"
+  link: "https://x.com/jrgarciadev"
+  avatar: "/avatars/junior-garcia.jpeg"
+---
+
+import {formContent} from "@/content/components/form";
+import {drawerContent} from "@/content/components/drawer";
+import {inputOtpContent} from "@/content/components/input-otp";
+import {alertContent} from "@/content/components/alert";
+import {autocompleteContent} from "@/content/components/autocomplete";
+import {modalContent} from "@/content/components/modal";
+
+<img
+  src="/blog/v2.6.0_2x.jpg"
+  width={700}
+  height={350}
+  alt="NextUI v2.6.0"
+  className="w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
+/>
+
+NextUI version **v2.6.0** comes with 4 new components **Form**, **Drawer**, **Input OTP** and **Alert**, React 19 & Next.js 15 support, and lots of bug fixes and improvements.
+
+## What's New in v2.6.0?
+
+- [Form Component](#form-component) - A form component with built-in validation, submission handling, and accessibility features.
+- [Drawer Component](#drawer-component) - A sliding panel component with multiple placement options and focus management.
+- [Input OTP Component](#input-otp-component) - An accessible one-time password input with focus management.
+- [Alert Component](#alert-component) - A component for displaying messages with accessibility and keyboard navigation support.
+- [Collection-based components Virtualization](#collection-based-components-virtualization) - Performance improvements for large datasets in Select, Autocomplete & Listbox components.
+- [React 19 Support & Library Upgrades](#react-19-support--library-upgrades) - Support for React 19 and upgrades to various dependencies.
+- [New use-theme hook](#new-use-theme-hook) - A new hook for runtime theme management.
+- [Draggable Modal](#draggable-modal) - Support for draggable modal functionality.
+- [Router Improvements](#router-improvements) - Enhanced routing capabilities and TypeScript support.
+- [API Improvements](#api-improvements) - New features and props across multiple components.
+- [What's Next?](#whats-next) - Upcoming features and improvements.
+- [Breaking Changes](#-breaking-changes) - Important changes that may affect existing implementations.
+- [Release Changes](#release-changes) - Detailed list of features, documentation updates, bug fixes and enhancements.
+
+<Spacer y={4} />
+
+Upgrade today by running one of the following commands:
+
+<Spacer y={4} />
+
+<PackageManagers
+  commands={{
+    cli: "nextui upgrade",
+    npm: "npx nextui-cli@latest upgrade",
+  }}
+/>
+
+<Spacer y={4} />
+
+## Form Component
+
+Built on [React Aria's Form](https://react-spectrum.adobe.com/react-aria/forms.html#forms) component, the [Form](/docs/components/forms) component provides accessible form handling with built-in submission, validation and error management.
+
+<Spacer y={4} />
+
+<CodeDemo title="Usage" showEditor={false} files={formContent.demo} />
+
+### Built-in Validation
+
+You can use native HTML validation attributes or create custom validation rules.
+
+```tsx
+import {Button, Form, Input} from "@nextui-org/react";
+
+function Example() {
+  return (
+    <Form validationBehavior="native">
+      <Input
+        isRequired
+        errorMessage="Please enter a valid email"
+        label="Email"
+        name="email"
+        type="email"
+      />
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}
+```
+
+<Spacer y={4} />
+
+<CodeDemo title="Usage" showEditor={false} files={formContent.usage} />
+
+### Real-time Validation
+
+You can validate the form data while users are typing.
+
+```tsx
+function Example() {
+  const [password, setPassword] = React.useState("");
+  const errors = [];
+
+  if (password.length < 4) {
+    errors.push("Password must be 4 characters or more.");
+  }
+  if ((password.match(/[A-Z]/g) || []).length < 1) {
+    errors.push("Password must include at least 1 upper case letter");
+  }
+  if ((password.match(/[^a-z]/gi) || []).length < 1) {
+    errors.push("Password must include at least 1 symbol.");
+  }
+
+  return (
+    <Input
+      errorMessage={() => (
+        <ul>
+          {errors.map((error, i) => (
+            <li key={i}>{error}</li>
+          ))}
+        </ul>
+      )}
+      isInvalid={errors.length > 0}
+      label="Password"
+      labelPlacement="outside"
+      placeholder="Enter your password"
+      value={password}
+      variant="bordered"
+      onValueChange={setPassword}
+    />
+  );
+}
+```
+
+<Spacer y={4} />
+
+<CodeDemo title="Real-time Validation" showEditor={false} files={formContent.realTimeValidation} />
+
+### Server Integration
+
+The Form components works seamlessly with React Server Actions.
+
+```tsx
+"use client";
+
+import {useActionState} from "react";
+import {Button, Form, Input} from "@nextui-org/react";
+
+export function AddForm() {
+  const [{errors}, formAction] = useActionState(createTodo, {
+    errors: {},
+  });
+
+  return (
+    <Form action={formAction} validationErrors={errors}>
+      <Input name="todo" label="Task" />
+      <Button type="submit">Add</Button>
+    </Form>
+  );
+}
+```
+
+### Form Libraries Support
+
+You can also use popular form libraries like `react-hook-form` and `formik`.
+
+```tsx
+import {Controller, useForm} from "react-hook-form";
+import {Button, Form, Input} from "@nextui-org/react";
+
+function Example() {
+  const {handleSubmit, control} = useForm({
+    defaultValues: {
+      name: "",
+    },
+  });
+
+  return (
+    <Form onSubmit={handleSubmit((data) => console.log(data))}>
+      <Controller
+        control={control}
+        name="name"
+        rules={{required: "Name is required"}}
+        render={({field, fieldState}) => (
+          <Input
+            {...field}
+            label="Name"
+            isInvalid={fieldState.invalid}
+            errorMessage={fieldState.error?.message}
+          />
+        )}
+      />
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}
+```
+
+### Accessibility Built-in
+
+The `Form` component automatically handles ARIA attributes and keyboard navigation, making your forms usable by everyone:
+
+```tsx
+function Example() {
+  return (
+    <Form>
+      <Input
+        label="Username"
+        description="Choose a unique username"
+        isRequired
+        errorMessage="Username is required"
+        // Automatically adds aria-required, aria-invalid, and aria-describedby
+      />
+      <Input
+        label="Password"
+        type="password"
+        description="Must be at least 8 characters"
+        // Help text is automatically linked via aria-describedby
+      />
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}
+```
+
+### Schema validation
+
+The `Form` component supports errors from schema validation libraries like [Zod](https://zod.dev/).
+You can use Zod's `flatten` method to get error messages for each field and return them as part of the server response.
+
+```tsx {14}
+// In your server.
+import {z} from "zod";
+
+const schema = z.object({
+  name: z.string().min(1),
+  age: z.coerce.number().positive(),
+});
+
+function handleRequest(formData: FormData) {
+  const result = schema.safeParse(Object.fromEntries(formData));
+
+  if (!result.success) {
+    return {
+      errors: result.error.flatten().fieldErrors,
+    };
+  }
+
+  // Do something with the validated data.
+
+  return {
+    errors: {},
+  };
+}
+```
+
+<Spacer y={4} />
+
+```tsx {13}
+// In your client.
+import {useFormState} from "react";
+import {Button, Form, Input} from "@nextui-org/react";
+
+import {handleRequest} from "./server";
+
+function Example() {
+  const [formState, formAction] = useFormState(handleRequest, {
+    errors: {},
+  });
+
+  return (
+    <Form action={formAction} validationErrors={formState.errors}>
+      <Input isRequired label="Name" name="name" />
+      <Input isRequired label="Age" name="age" type="number" />
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}
+```
+
+### Key Features
+
+- **Server Integration**: Works seamlessly with React Server Actions
+- **Schema Validation**: Supports Zod schema validation
+- **Form Libraries Support**: Supports popular form libraries like `react-hook-form` and `formik`
+- **Accessibility**: Built-in accessibility features including ARIA attributes and keyboard navigation
+
+Check out our [Forms documentation](/docs/components/forms) for a deep dive into all the features and capabilities.
+
+<Spacer y={4} />
+
+## Drawer Component
+
+The new [Drawer](/docs/components/drawer) component displays a sliding panel from the screen edge with supplementary content, featuring built-in accessibility, focus management, and keyboard navigation.
+
+```tsx
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  Button,
+  useDisclosure,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+
+  return (
+    <>
+      <Button
+        color="primary"
+        endContent={
+          <svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M5.75 1.25a.75.75 0 1 0-1.5 0v.823l-.392.044c-.9.121-1.658.38-2.26.982s-.861 1.36-.982 2.26C.5 6.225.5 7.328.5 8.695v.11l.117 3.337c.121.9.38 1.658.982 2.26s1.36.861 2.26.982c.867.117 1.969.117 3.337.117h1.658l3.337-.117c.9-.121 1.658-.38 2.26-.982s.861-1.36.982-2.26c.117-.867.117-1.969.117-3.337v-.11l-.117-3.337c-.121-.9-.38-1.658-.982-2.26s-1.36-.861-2.26-.982l-.44-.048V1.25a.75.75 0 0 0-1.5 0v.756L8.853 2H7.195q-.78-.002-1.445.006zm4.5 3v-.744L8.798 3.5H7.25l-1.5.007v.743a.75.75 0 1 1-1.5 0v-.67l-.192.023c-.734.099-1.122.279-1.399.556s-.457.665-.556 1.399C2.002 6.313 2 7.315 2 8.75l.103 3.192c.099.734.279 1.122.556 1.399s.665.457 1.399.556c.755.101 1.756.103 3.192.103h1.548l3.192-.103c.734-.099 1.122-.279 1.399-.556s.457-.665.556-1.399c.102-.755.103-1.757.103-3.192l-.103-3.192c-.099-.734-.279-1.122-.556-1.399s-.665-.457-1.399-.556l-.241-.028v.675a.75.75 0 0 1-1.5 0zm-5 3.5a.75.75 0 1 1-1.5 0 .75.75 0 1 1 1.5 0m0 3.5a.75.75 0 1 1-1.5 0 .75.75 0 1 1 1.5 0M8 8.5A.75.75 0 1 0 8 7a.75.75 0 1 0 0 1.5m.75 2.75a.75.75 0 1 1-1.5 0 .75.75 0 1 1 1.5 0M11.5 8.5a.75.75 0 1 0 0-1.5.75.75 0 1 0 0 1.5m.75 2.75a.75.75 0 1 1-1.5 0 .75.75 0 1 1 1.5 0"
+              fill="currentColor"
+              fillRule="evenodd"
+            />
+          </svg>
+        }
+        variant="flat"
+        onPress={onOpen}
+      >
+        See Event
+      </Button>
+      <Drawer isOpen={isOpen} onOpenChange={onOpenChange}>
+        <DrawerContent>
+          {(onClose) => (
+            <>
+              <DrawerHeader>Drawer Title</DrawerHeader>
+              <DrawerBody>{/* Drawer content goes here */}</DrawerBody>
+              <DrawerFooter>{/* Drawer footer content goes here */}</DrawerFooter>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}
+```
+
+<Spacer y={4} />
+
+<CodeDemo title="Drawer Usage" showEditor={false} files={drawerContent.customStyles} />
+
+### Key Features
+
+- **Multiple Placements**: Can be positioned on any edge of the screen (left, right, top, bottom)
+- **Customizable Sizes**: Comes with preset sizes from xs to 5xl, plus full-width option
+- **Backdrop Options**: Supports transparent, opaque, or blur backdrop styles
+- **Focus Management**: Automatically handles focus trapping and restoration
+- **Keyboard Navigation**: Built-in support for Esc key dismissal and keyboard navigation
+- **Form Validation**: Supports built-in validation states and custom validation rules for form inputs
+
+See the [Drawer documentation](/docs/components/drawer) for more details and examples.
+
+<Spacer y={4} />
+
+## Input OTP Component
+
+The [Input OTP](/docs/components/input-otp) component provides an accessible way to enter one-time passwords with built-in focus management and keyboard navigation. It is built on top of the [input-otp](https://github.com/guilhermerodz/input-otp) library by [@guilherme_rodz](https://twitter.com/guilherme_rodz).
+
+```tsx
+import {Button, InputOtp, Form} from "@nextui-org/react";
+
+export default function App() {
+  const [otp, setOtp] = React.useState("");
+
+  return (
+    <Form
+      className="flex w-full flex-col items-start gap-4"
+      onSubmit={(e) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        const otp = formData.get("otp");
+
+        setOtp(otp);
+      }}
+    >
+      <InputOtp
+        isRequired
+        aria-label="OTP input field"
+        length={4}
+        name="otp"
+        placeholder="Enter code"
+        validationBehavior="native"
+      />
+      <Button size="sm" type="submit" variant="bordered">
+        Submit
+      </Button>
+      {otp && <div className="text-small text-default-500">OTP submitted: {otp}</div>}
+    </Form>
+  );
+}
+```
+
+<Spacer y={4} />
+
+<CodeDemo title="Input OTP Usage" showEditor={false} files={inputOtpContent.required} />
+
+### Key Features
+
+- **Focus Management**: Automatically handles focus trapping and restoration
+- **Keyboard Navigation**: Built-in support for Esc key dismissal and keyboard navigation
+- **Customizable Animations**: Supports custom motion animations through Framer Motion
+- **Form Integration**: Seamlessly works with form elements while maintaining proper focus management
+
+See the [Input OTP documentation](/docs/components/input-otp) for more details and examples.
+
+<Spacer y={4} />
+
+## Alert Component
+
+The [Alert](/docs/components/alert) component allows users to display messages to the user. It's built with accessibility in mind and includes features like focus management, keyboard navigation, and screen reader support.
+
+```tsx
+import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Alert
+      color="success"
+      variant="faded"
+      title="This is an alert"
+      description="Thanks for subscribing to our newsletter!"
+    />
+  );
+}
+```
+
+<Spacer y={4} />
+
+<CodeDemo title="Alert Usage" showEditor={false} files={alertContent.controlled} />
+
+### Key Features
+
+- **Focus Management**: Automatically handles focus trapping and restoration
+- **Keyboard Navigation**: Built-in support for Esc key dismissal and keyboard navigation
+- **Customizable Animations**: Supports custom motion animations through Framer Motion
+- **Form Integration**: Seamlessly works with form elements while maintaining proper focus management
+
+See the [Alert documentation](/docs/components/alert) for more details and examples.
+
+<Spacer y={4} />
+
+## Collection-based components Virtualization
+
+[Select](/docs/components/select), [Autocomplete](/docs/components/autocomplete) & [Listbox](/docs/components/listbox) components now support virtualization to improve performance on large collections.
+
+<CodeDemo title="Virtualization" highlightedLines="41" files={autocompleteContent.virtualization} />
+
+> **Note**: The virtualization strategy is based on the [@tanstack/react-virtual](https://tanstack.com/virtual/latest) package, which provides efficient rendering of large lists by only rendering items that are visible in the viewport.
+
+See the [Autocomplete documentation](/docs/components/autocomplete) for more details and examples.
+
+<Spacer y={4} />
+
+## React 19 Support & Library Upgrades
+
+- In preparation for [React 19](https://react.dev/blog/2024/12/05/react-19), NextUI is now compatible with React 19 RC and Next.js 15.
+- React Aria packages upgrades and fixes the exact versions of React Aria, React Flow, React Hook Form, React Router, React Server, React Use, Tanstack Query, Tanstack Virtual, and Tanstack Table
+- Framer Motion is now **only** added to the final bundle when the animations are enabled and we also added support for [Framer motion v12](https://motion.dev/blog/framer-motion-is-now-independent-introducing-motion)
+
+<Spacer y={4} />
+
+## New use-theme hook
+
+We created our own `use-theme` hook that replaces `use-dark-theme` hook to allow users to change the theme at runtime.
+
+```jsx
+// App.tsx or App.jsx
+import React from "react";
+import {useTheme} from "@nextui-org/use-theme";
+
+export default function App() {
+  const {theme} = useTheme();
+
+  return (
+    <main className={`${theme} text-foreground bg-background`}>
+      <App />
+    </main>
+  );
+}
+```
+
+<Spacer y={4} />
+
+```jsx
+// components/ThemeSwitcher.tsx
+import {useTheme} from "@nextui-org/use-theme";
+
+export const ThemeSwitcher = () => {
+  const {theme, setTheme} = useTheme();
+
+  return (
+    <div>
+      The current theme is: {theme}
+      <button onClick={() => setTheme("light")}>Light Mode</button>
+      <button onClick={() => setTheme("dark")}>Dark Mode</button>
+    </div>
+  );
+};
+```
+
+See the [Dark Mode documentation](/docs/customization/dark-mode) for more details and examples.
+
+<Spacer y={4} />
+
+## Draggable Modal
+
+Added support for draggable modals.
+
+<CodeDemo title="Draggable Modal" showEditor={false} files={modalContent.draggable} />
+
+<Spacer y={4} />
+
+> **Note**: The modal is draggable only from the header part.
+
+## Router Improvements
+
+NextUI now provides enhanced routing capabilities with better TypeScript support and integration with popular routing solutions:
+
+- **Path Type Safety**: All router-based components now support path intellisense when using TypeScript
+- **Router Options Support**: Added `routerOptions` prop to all link components for controlling navigation behavior
+- **Enhanced Router Configuration**: Global type configuration for router options through TypeScript:
+
+```tsx
+// Example with Next.js App Router
+declare module "@react-types/shared" {
+  interface RouterConfig {
+    routerOptions: NonNullable<Parameters<ReturnType<typeof useRouter>["push"]>[1]>;
+  }
+}
+```
+
+- **Improved Base Path Support**: Better handling of base paths through the new `useHref` prop in `NextUIProvider`
+- **Framework-specific Optimizations**: Built-in support for Next.js (both App and Pages Router), React Router, Remix, and TanStack Router
+
+See the [Routing documentation](/docs/guides/routing) for more details.
+
+<Spacer y={4} />
+
+## API Improvements
+
+### NextUIProvider
+
+- `useHref` (added) - Converts a router-specific href to a native href for use on DOM elements. For example, if your router accepts relative paths or custom link formats, useHref will generate the full native href based on the RouterProvider's configuration.
+- `navigate` (modified) - `((path: Href, routerOptions?: RouterOptions) => void) | undefined` - we added the router options
+- `reduceMotion` (added) - Controls the motion preferences for the entire application, allowing developers to respect user settings for reduced motion. The available options are:
+
+### DatePicker
+
+- `selectorButtonPlacement` (added) - Controls the placement of selector buttons
+- `showMonthAndYearPickers` (added) - Controls visibility of month and year picker dropdowns
+
+### Tabs
+
+- `tabRef` (added) - Allows accessing the underlying tab element via ref
+
+### Popover
+
+- `shouldCloseOnScroll` (added) - Controls whether popover should close when scrolling
+
+### Table
+
+- `isKeyboardNavigationDisabled` (added) - Disables keyboard navigation in tables
+
+### Textarea
+
+- `isClearable` (added) - Adds clear button functionality to textarea
+
+### Select
+
+- `hideEmptyContent` (added) - Controls visibility of empty content message
+- Added virtualization support for improved performance with large datasets
+
+### Autocomplete & Listbox
+
+- Added virtualization support for improved performance with large datasets
+
+### Modal
+
+- Added support for draggable modals (draggable from header)
+
+See the [NextUIProvider documentation](/docs/api-references/nextui-provider) for more details.
+
+<Spacer y={4} />
+
+## What's Next?
+
+- **Rebranding** - We're preparing a rebranding of NextUI to ensure long-term sustainability and avoid potential naming conflicts
+- **Update NextUI Pro** - We're working on a new version of NextUI Pro that will be compatible with Next.js 15 and React 19. Follow progress [here](https://feedback.nextui.pro/roadmap)
+- **Tailwind CSS v4** support - Read more [here](https://tailwindcss.com/docs/v4-beta)
+- **React 19** internal APIs migration - Read more [here](https://react.dev/blog/2024/12/05/react-19)
+- **Toast** component - Follow progress [here](https://nextuioss.featurebase.app/roadmap)
+- **Rating** component - Follow progress [here](https://nextuioss.featurebase.app/roadmap)
+- **File Upload** component - Follow progress [here](https://nextuioss.featurebase.app/roadmap)
+- **Upgrade** to the latest React Aria - Read more [here](https://react-spectrum.adobe.com/releases/2024-11-20.html)
+- **Complete Figma components** - Follow progress [here](https://nextuioss.featurebase.app/roadmap)
+
+## 🚨 Breaking Changes
+
+We try to keep the breaking changes to a minimum, but sometimes it's necessary to make changes to the API to improve the developer experience.
+
+#### Table Theme Group Data Selectors
+
+The nested group selectors for table themes have been updated to require explicit element selectors. You'll need to add `/tr` or `/th` to custom styles for group-data.
+
+Before:
+
+```css
+group-data-[disabled=true]: text-foreground-300;
+```
+
+After:
+
+```css
+group-data-[disabled=true]/tr: text-foreground-300;
+```
+
+#### Circular Progress Theme Location
+
+The circular progress Tailwind variants have been moved from `circular-progress` to `progress`. You'll need to update your Tailwind CSS configuration:
+
+Before:
+
+```js
+"./node_modules/@nextui-org/theme/dist/components/circular-progress.js";
+```
+
+After:
+
+```js
+"./node_modules/@nextui-org/theme/dist/components/progress.js";
+```
+
+<Spacer y={4} />
+
+## Release Changes
+
+**Features**:
+
+- Added Alert component by [@jrgarciadev](https://github.com/jrgarciadev) and [@abhinav700](https://github.com/abhinav700) in [PR #3982](https://github.com/nextui-org/nextui/pull/3982), [PR #3680](https://github.com/nextui-org/nextui/pull/3680), [PR #4071](https://github.com/nextui-org/nextui/pull/4071), and [PR #4073](https://github.com/nextui-org/nextui/pull/4073)
+- Added Draggable modal by [@jrgarciadev](https://github.com/jrgarciadev) and [@wzc520pyfm](https://github.com/wzc520pyfm) in [PR #3983](https://github.com/nextui-org/nextui/pull/3983) and [PR #2818](https://github.com/nextui-org/nextui/pull/2818)
+- Added Drawer component by [@jrgarciadev](https://github.com/jrgarciadev) and [@1111mp](https://github.com/1111mp) in [PR #3986](https://github.com/nextui-org/nextui/pull/3986), [PR #2223](https://github.com/nextui-org/nextui/pull/2223) and [PR #4057](https://github.com/nextui-org/nextui/pull/4057)
+- Added InputOTP component by [@macci001](https://github.com/macci001) in [PR #4052](https://github.com/nextui-org/nextui/pull/4052)
+- Added Form component by [@ryo-manba](https://github.com/ryo-manba) in [PR #3036](https://github.com/nextui-org/nextui/pull/3036)
+- Added `selectorButtonPlacement` prop to date-picker by [@ryo-manba](https://github.com/ryo-manba) in [PR #3248](https://github.com/nextui-org/nextui/pull/3248)
+- Added `tabRef` prop to tabs by [@winchesHe](https://github.com/winchesHe) in [PR #3974](https://github.com/nextui-org/nextui/pull/3974)
+- Added `shouldCloseOnScroll` prop to popover by [@awesome-pro](https://github.com/awesome-pro) in [PR #3595](https://github.com/nextui-org/nextui/pull/3595)
+- Added `showMonthAndYearPickers` prop to date-range-picker and range-calendar by [@ryo-manba](https://github.com/ryo-manba) in [PR #3302](https://github.com/nextui-org/nextui/pull/3302)
+- Added `use-theme` hook by [@wingkwong](https://github.com/wingkwong) in [PR #3169](https://github.com/nextui-org/nextui/pull/3169)
+- Added `isKeyboardNavigationDisabled` prop in Table by [@macci001](https://github.com/macci001) in [PR #3735](https://github.com/nextui-org/nextui/pull/3735)
+- Added `reducedMotion` to Provider by [@ryo-manba](https://github.com/ryo-manba) in [PR #3470](https://github.com/nextui-org/nextui/pull/3470)
+- Added `isClearable` to Textarea by [@jrgarciadev](https://github.com/jrgarciadev) and [@IsDyh01](https://github.com/IsDyh01) in [PR #4172](https://github.com/nextui-org/nextui/pull/4172) and [PR #3477](https://github.com/nextui-org/nextui/pull/3477)
+- Added `hideEmptyContent` to Select by [@Peterl561](https://github.com/Peterl561) in [PR #4219](https://github.com/nextui-org/nextui/pull/4219)
+
+**Documentation**:
+
+- Improved performance by implementing `useIntersectionObserver` for code blocks - now they only load when visible in viewport
+- Enhanced readability with style changes to provide more space and better visual hierarchy
+- Revamped API Table design:
+  - Moved descriptions into tooltips that appear right after titles
+  - Decreased font size for better scanning
+  - Improved color scheme for better contrast
+- Fixed broken links by [@wingkwong](https://github.com/wingkwong) in [PR #3796](https://github.com/nextui-org/nextui/pull/3796)
+- Fixed canary storybook links by [@wingkwong](https://github.com/wingkwong) in [PR #4030](https://github.com/nextui-org/nextui/pull/4030)
+- Fixed typos in dark mode page by [@wingkwong](https://github.com/wingkwong) in [PR #3823](https://github.com/nextui-org/nextui/pull/3823)
+- Fixed types for classNames and itemClasses by [@wingkwong](https://github.com/wingkwong) in [PR #4209](https://github.com/nextui-org/nextui/pull/4209)
+- Fixed typos in landing page by [@PentSec](https://github.com/PentSec) in [PR #3928](https://github.com/nextui-org/nextui/pull/3928)
+- Fixed typos in date picker page by [@dperconti](https://github.com/dperconti) in [PR #3516](https://github.com/nextui-org/nextui/pull/3516)
+- Fixed incorrect highlighted line in Select page by [@Choneas](https://github.com/Choneas) in [PR #3838](https://github.com/nextui-org/nextui/pull/3838)
+- Fixed unexpected translation in code block by [@nnmax](https://github.com/nnmax) in [PR #3878](https://github.com/nextui-org/nextui/pull/3878)
+- Fixed yarn command in installation page by [@AzpektDev](https://github.com/AzpektDev) in [PR #4132](https://github.com/nextui-org/nextui/pull/4132)
+- Added ethical ads by [@jrgarciadev](https://github.com/jrgarciadev) in [PR #3803](https://github.com/nextui-org/nextui/pull/3803)
+- Added Form guide by [@ryo-manba](https://github.com/ryo-manba) in [PR #3882](https://github.com/nextui-org/nextui/pull/3882)
+- Enhanced overall DX for all pages by [@wingkwong](https://github.com/wingkwong) in [PR #4055](https://github.com/nextui-org/nextui/pull/4055)
+- Supported virtualization for Autocomplete by [@jrgarciadev](https://github.com/jrgarciadev) and [@vinroger](https://github.com/vinroger) in [PR #4094](https://github.com/nextui-org/nextui/pull/4094) and [PR #3444](https://github.com/nextui-org/nextui/pull/3444)
+- Supported virtualization for Select by [@vinroger](https://github.com/vinroger) in [PR #4203](https://github.com/nextui-org/nextui/pull/4203)
+- Supported virtualization for Listbox by [@vinroger](https://github.com/vinroger) in [PR #4206](https://github.com/nextui-org/nextui/pull/4206)
+- Optimized code fold by [@winchesHe](https://github.com/winchesHe) in [PR #4202](https://github.com/nextui-org/nextui/pull/4202)
+- Synced API from nextui-cli v0.3.5 by [@winchesHe](https://github.com/winchesHe) in [PR #4173](https://github.com/nextui-org/nextui/pull/4173)
+
+**Bug Fixes**:
+
+- Fixed avatar flashing issues by [@jrgarciadev](https://github.com/jrgarciadev) and [@rkkautsar](https://github.com/rkkautsar) in [PR #3987](https://github.com/nextui-org/nextui/pull/3987) and [PR #3444](https://github.com/nextui-org/nextui/pull/3444)
+- Fixed image ReferenceError in SSR by [@wingkwong](https://github.com/wingkwong) in [PR #4122](https://github.com/nextui-org/nextui/pull/4122)
+- Fixed navigate parameters by [@wingkwong](https://github.com/wingkwong) in [PR #4163](https://github.com/nextui-org/nextui/pull/4163)
+- Fixed missing peer / dev dependency for framer-motion by [@wingkwong](https://github.com/wingkwong) in [PR #4161](https://github.com/nextui-org/nextui/pull/4161)
+- Fixed menu item classNames by [@winchesHe](https://github.com/winchesHe) in [PR #4156](https://github.com/nextui-org/nextui/pull/4156)
+- Fixed controlled IsInvalid prop by [@chirokas](https://github.com/chirokas) in [PR #4082](https://github.com/nextui-org/nextui/pull/4082)
+- Fixed inert value with boolean type for React 19 by [@wingkwong](https://github.com/wingkwong) in [PR #4039](https://github.com/nextui-org/nextui/pull/4039)
+- Fixed typecheck errors by [@wingkwong](https://github.com/wingkwong) in [PR #4171](https://github.com/nextui-org/nextui/pull/4171)
+- Fixed tw nested group by [@wingkwong](https://github.com/wingkwong) in [PR #3909](https://github.com/nextui-org/nextui/pull/3909)
+- Fixed select styles consistent with input by [@macci001](https://github.com/macci001) in [PR #3881](https://github.com/nextui-org/nextui/pull/3881)
+- Fixed missing li tag when href is specified by [@macci001](https://github.com/macci001) in [PR #4168](https://github.com/nextui-org/nextui/pull/4168)
+- Fixed sliding issue caused by the helper wrapper by [@mstfblci](https://github.com/mstfblci) in [PR #3966](https://github.com/nextui-org/nextui/pull/3966)
+- Fixed element.ref warning in React 19 by [@jrgarciadev](https://github.com/jrgarciadev) in [PR #4003](https://github.com/nextui-org/nextui/pull/4003)
+- Fixed image load on NextJS by [@jrgarciadev](https://github.com/jrgarciadev) in [PR #3998](https://github.com/nextui-org/nextui/pull/3998)
+- Fixed squish textarea label by [@Peterl561](https://github.com/Peterl561) in [PR #4197](https://github.com/nextui-org/nextui/pull/4197)
+- Fixed forwardRef render functions by [@winchesHe](https://github.com/winchesHe) in [PR #4198](https://github.com/nextui-org/nextui/pull/4198)
+- Fixed collection based components ref by [@jrgarciadev](https://github.com/jrgarciadev) in [PR #4207](https://github.com/nextui-org/nextui/pull/4207)
+- Fixed data-slot for select error message by [@jubar](https://github.com/jubar) in [PR #4214](https://github.com/nextui-org/nextui/pull/4214)
+- Fixed selection functionality on touch by [@macci001](https://github.com/macci001) in [PR #4220](https://github.com/nextui-org/nextui/pull/4220)
+- Fixed cursor position when hidden on init by [@Peterl561](https://github.com/Peterl561) in [PR #4222](https://github.com/nextui-org/nextui/pull/4222)
+
+**Enhancements**:
+
+- Automatically focus first non-disabled item by [@juliesaia](https://github.com/juliesaia) in [PR #2186](https://github.com/nextui-org/nextui/pull/2186)
+- Refactored RTL-specific styles by [@macci001](https://github.com/macci001) in [PR #3868](https://github.com/nextui-org/nextui/pull/3868)
+- Upgraded React Aria and Support NextJS 15 by [@ryo-manba](https://github.com/ryo-manba) in [PR #3732](https://github.com/nextui-org/nextui/pull/3732)
+- Upgraded tailwind-merge version by [@wingkwong](https://github.com/wingkwong) in [PR #3657](https://github.com/nextui-org/nextui/pull/3657)
+- Upgraded Storybook to v8 by [@winchesHe](https://github.com/winchesHe) in [PR #3946](https://github.com/nextui-org/nextui/pull/3946)
+- Optimized performance by [@wingkwong](https://github.com/wingkwong) in [PR #3523](https://github.com/nextui-org/nextui/pull/3523)
+- Applied `useMenu` and `useMenuItem` from `@react-aria` by [@wingkwong](https://github.com/wingkwong) in [PR #3261](https://github.com/nextui-org/nextui/pull/3261)
+- Revised label font size for lg by [@wingkwong](https://github.com/wingkwong) in [PR #4141](https://github.com/nextui-org/nextui/pull/4141)
+- Improved Form component by [@jrgarciadev](https://github.com/jrgarciadev) in [PR #4224](https://github.com/nextui-org/nextui/pull/4224)
+
+**Chore**:
+
+- Added git hook to auto update dependencies by [@winchesHe](https://github.com/winchesHe) in [PR #3365](https://github.com/nextui-org/nextui/pull/3365)
+- Added pre-release workflow by [@wingkwong](https://github.com/wingkwong) in [PR #2910](https://github.com/nextui-org/nextui/pull/2910)
+- Updated testing libraries by [@ryo-manba](https://github.com/ryo-manba) in [PR #3886](https://github.com/nextui-org/nextui/pull/3886)
+- Replaced VA by Posthog by [@wingkwong](https://github.com/wingkwong) in [PR #4123](https://github.com/nextui-org/nextui/pull/4123)
+- Moved circular-progress tv to progress by [@winchesHe](https://github.com/winchesHe) in [PR #3321](https://github.com/nextui-org/nextui/pull/3321)
+
+Special thanks to NextUI Team members [@wingkwong](https://github.com/wingkwong), [@macci001](https://github.com/macci001),
+[@ryo-manba](https://github.com/ryo-manba), [@winchesHe](https://github.com/winchesHe), [@tianenpang](https://github.com/tianenpang) and contributors for their contributions to this release.
+
+For a full list of changes, please refer to the [release notes](https://github.com/nextui-org/nextui/releases/tag/%40nextui-org%2Freact%402.4.0).
+
+<Spacer y={6} />
+
+Thanks for reading and happy coding! 🚀
+
+---
+
+## Community
+
+We're excited to see the community adopt NextUI, raise issues, and provide feedback.
+Whether it's a feature request, bug report, or a project to showcase, please get involved!
+
+<Community />
+
+## Contributing
+
+PR's on NextUI are always welcome, please see our [contribution guidelines](https://github.com/nextui-org/nextui/blob/main/CONTRIBUTING.md) to learn how you can contribute to this project.
@@ -1,188 +1,196 @@
 import {Accordion, AccordionItem} from "@nextui-org/react";

-const MonitorMobileIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M10 21.4699V16.95"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M2 12.95H10"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M6.73999 21.47H9.99999"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M17.2445 18.25H17.2535"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-  </svg>
-);
+const MonitorMobileIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M10 21.4699V16.95"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M2 12.95H10"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M6.73999 21.47H9.99999"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M17.2445 18.25H17.2535"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};

-const ShieldSecurityIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M10.49 2.23006L5.49997 4.11006C4.34997 4.54006 3.40997 5.90006 3.40997 7.12006V14.5501C3.40997 15.7301 4.18997 17.2801 5.13997 17.9901L9.43997 21.2001C10.85 22.2601 13.17 22.2601 14.58 21.2001L18.88 17.9901C19.83 17.2801 20.61 15.7301 20.61 14.5501V7.12006C20.61 5.89006 19.67 4.53006 18.52 4.10006L13.53 2.23006C12.68 1.92006 11.32 1.92006 10.49 2.23006Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M12 12.5C13.1046 12.5 14 11.6046 14 10.5C14 9.39543 13.1046 8.5 12 8.5C10.8954 8.5 10 9.39543 10 10.5C10 11.6046 10.8954 12.5 12 12.5Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeMiterlimit="10"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M12 12.5V15.5"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeMiterlimit="10"
-      strokeWidth="1.5"
-    />
-  </svg>
-);
+const ShieldSecurityIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M10.49 2.23006L5.49997 4.11006C4.34997 4.54006 3.40997 5.90006 3.40997 7.12006V14.5501C3.40997 15.7301 4.18997 17.2801 5.13997 17.9901L9.43997 21.2001C10.85 22.2601 13.17 22.2601 14.58 21.2001L18.88 17.9901C19.83 17.2801 20.61 15.7301 20.61 14.5501V7.12006C20.61 5.89006 19.67 4.53006 18.52 4.10006L13.53 2.23006C12.68 1.92006 11.32 1.92006 10.49 2.23006Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12 12.5C13.1046 12.5 14 11.6046 14 10.5C14 9.39543 13.1046 8.5 12 8.5C10.8954 8.5 10 9.39543 10 10.5C10 11.6046 10.8954 12.5 12 12.5Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12 12.5V15.5"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+};

-const InfoIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M12 8V13"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M11.9945 16H12.0035"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-  </svg>
-);
+const InfoIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12 8V13"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M11.9945 16H12.0035"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};

-const InvalidCardIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M10 21.4699V16.95"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M2 12.95H10"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M6.73999 21.47H9.99999"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M17.2445 18.25H17.2535"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-  </svg>
-);
+const InvalidCardIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M10 21.4699V16.95"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M2 12.95H10"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M6.73999 21.47H9.99999"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M17.2445 18.25H17.2535"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};

 export default function App() {
  const itemClasses = {
@@ -1,77 +1,83 @@
 import {Accordion, AccordionItem} from "@nextui-org/react";

-const AnchorIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
-      fill="currentColor"
-    />
-    <path
-      d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
-      fill="currentColor"
-    />
-  </svg>
-);
+const AnchorIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
+        fill="currentColor"
+      />
+      <path
+        d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

-const MoonIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 512 512"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={32}
-    />
-  </svg>
-);
+const MoonIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 512 512"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={32}
+      />
+    </svg>
+  );
+};

-const SunIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 512 512"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeMiterlimit={10}
-      strokeWidth={32}
-    />
-    <circle
-      cx={256}
-      cy={256}
-      fill="none"
-      r={80}
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeMiterlimit={10}
-      strokeWidth={32}
-    />
-  </svg>
-);
+const SunIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 512 512"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth={32}
+      />
+      <circle
+        cx={256}
+        cy={256}
+        fill="none"
+        r={80}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth={32}
+      />
+    </svg>
+  );
+};

 export default function App() {
  const defaultContent =
@@ -1,77 +1,83 @@
 import {Accordion, AccordionItem} from "@nextui-org/react";

-const AnchorIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
-      fill="currentColor"
-    />
-    <path
-      d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
-      fill="currentColor"
-    />
-  </svg>
-);
+const AnchorIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
+        fill="currentColor"
+      />
+      <path
+        d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

-const MoonIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 512 512"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={32}
-    />
-  </svg>
-);
+const MoonIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 512 512"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={32}
+      />
+    </svg>
+  );
+};

-const SunIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 512 512"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeMiterlimit={10}
-      strokeWidth={32}
-    />
-    <circle
-      cx={256}
-      cy={256}
-      fill="none"
-      r={80}
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeMiterlimit={10}
-      strokeWidth={32}
-    />
-  </svg>
-);
+const SunIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 512 512"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth={32}
+      />
+      <circle
+        cx={256}
+        cy={256}
+        fill="none"
+        r={80}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth={32}
+      />
+    </svg>
+  );
+};

 export default function App() {
  const defaultContent =
@@ -0,0 +1,15 @@
+import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex items-center justify-center w-full">
+      <div className="flex flex-col w-full">
+        {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
+          <div key={color} className="w-full flex items-center my-3">
+            <Alert color={color} title={`This is a ${color} alert`} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
@@ -1,21 +1,4 @@
-const App = `import {Alert} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex items-center justify-center w-full">
-      <div className="flex flex-col w-full">
-        {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
-          <div key={color} className="w-full flex items-center my-3">
-            <Alert 
-              color={color} 
-              title={\`This is a \${color} alert\`}
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";

 const react = {
  "/App.jsx": App,
@@ -0,0 +1,28 @@
+import {Alert, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [isVisible, setIsVisible] = React.useState(true);
+
+  const title = "Success Notification";
+  const description =
+    "Your action has been completed successfully. We'll notify you when updates are available.";
+
+  return (
+    <div className="flex flex-col gap-4">
+      {isVisible ? (
+        <Alert
+          color="success"
+          description={description}
+          isVisible={isVisible}
+          title={title}
+          variant="faded"
+          onClose={() => setIsVisible(false)}
+        />
+      ) : (
+        <Button variant="bordered" onPress={() => setIsVisible(true)}>
+          Show Alert
+        </Button>
+      )}
+    </div>
+  );
+}
@@ -1,31 +1,4 @@
-const App = `import {Alert, Button} from "@nextui-org/react";
-
-export default function App() {
-  const [isVisible, setIsVisible] = React.useState(true);
-
-  const title = "Success Notification";
-  const description = "Your action has been completed successfully. We'll notify you when updates are available.";
-
-  return (
-    <div className="flex flex-col gap-4">
-      {isVisible ? (
-        <Alert 
-          title={title}
-          description={description}
-          isVisible={isVisible} 
-          onClose={() => setIsVisible(false)}
-        />
-      ) : (
-        <Button 
-          variant="bordered" 
-          onPress={() => setIsVisible(true)}
-        >
-          Show Alert
-        </Button>
-      )}
-    </div>
-  );
-}`;
+import App from "./controlled-alert.raw.jsx?raw";

 const react = {
  "/App.jsx": App,
@@ -0,0 +1,124 @@
+import React, {forwardRef, useMemo} from "react";
+import {useAlert} from "@nextui-org/react";
+
+export const InfoCircleIcon = (props) => {
+  return (
+    <svg
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22ZM12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16ZM11.08 7.62C11.13 7.49 11.2 7.39 11.29 7.29C11.39 7.2 11.5 7.13 11.62 7.08C11.74 7.03 11.87 7 12 7C12.13 7 12.26 7.03 12.38 7.08C12.5 7.13 12.61 7.2 12.71 7.29C12.8 7.39 12.87 7.49 12.92 7.62C12.97 7.74 13 7.87 13 8C13 8.13 12.97 8.26 12.92 8.38C12.87 8.5 12.8 8.61 12.71 8.71C12.61 8.8 12.5 8.87 12.38 8.92C12.14 9.02 11.86 9.02 11.62 8.92C11.5 8.87 11.39 8.8 11.29 8.71C11.2 8.61 11.13 8.5 11.08 8.38C11.03 8.26 11 8.13 11 8C11 7.87 11.03 7.74 11.08 7.62Z" />
+    </svg>
+  );
+};
+
+export const CloseIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path d="M18 6L6 18M6 6l12 12" />
+    </svg>
+  );
+};
+
+const styles = {
+  base: [
+    "bg-slate-100",
+    "border",
+    "shadow",
+    "hover:bg-slate-200",
+    "focus-within:!bg-slate-100",
+    "dark:bg-slate-900",
+    "dark:hover:bg-slate-800",
+    "dark:border-slate-800",
+    "dark:focus-within:!bg-slate-900",
+    "cursor-pointer",
+  ],
+  title: ["text-base", "text-slate-500", "font-bold"],
+  description: ["text-base", "text-slate-500"],
+};
+
+const MyAlert = forwardRef((props, ref) => {
+  const {
+    title,
+    description,
+    isClosable,
+    domRef,
+    handleClose,
+    getBaseProps,
+    getMainWrapperProps,
+    getDescriptionProps,
+    getTitleProps,
+    getCloseButtonProps,
+    color,
+    isVisible,
+    onClose,
+    getAlertIconProps,
+  } = useAlert({
+    ...props,
+    ref,
+    // this is just for the example, the props bellow should be passed by the parent component
+    title: "Email Sent!!",
+    description: "You will get a reply soon",
+    // custom styles
+    classNames: {
+      ...styles,
+    },
+  });
+
+  const mainWrapper = useMemo(() => {
+    return (
+      <div {...getMainWrapperProps()}>
+        {title && <div {...getTitleProps()}>{title}</div>}
+        <div {...getDescriptionProps()}>{description}</div>
+      </div>
+    );
+  }, [title, description, getMainWrapperProps, getTitleProps, getDescriptionProps]);
+
+  const baseWrapper = useMemo(() => {
+    return isVisible ? (
+      <div ref={domRef} {...getBaseProps()}>
+        <InfoCircleIcon {...getAlertIconProps()} />
+        {mainWrapper}
+        {(isClosable || onClose) && (
+          <button onClick={handleClose} {...getCloseButtonProps()}>
+            <CloseIcon />
+          </button>
+        )}
+      </div>
+    ) : null;
+  }, [
+    mainWrapper,
+    isClosable,
+    getCloseButtonProps,
+    isVisible,
+    domRef,
+    getBaseProps,
+    handleClose,
+    color,
+    onClose,
+    getAlertIconProps,
+  ]);
+
+  return <>{baseWrapper}</>;
+});
+
+MyAlert.displayName = "MyAlert";
+
+export default MyAlert;
@@ -1,140 +1,7 @@
-const InfoCircleIcon = `export const InfoCircleIcon = (props) => (
-  <svg
-    fill="none"
-    height="24"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="M12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22ZM12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16ZM11.08 7.62C11.13 7.49 11.2 7.39 11.29 7.29C11.39 7.2 11.5 7.13 11.62 7.08C11.74 7.03 11.87 7 12 7C12.13 7 12.26 7.03 12.38 7.08C12.5 7.13 12.61 7.2 12.71 7.29C12.8 7.39 12.87 7.49 12.92 7.62C12.97 7.74 13 7.87 13 8C13 8.13 12.97 8.26 12.92 8.38C12.87 8.5 12.8 8.61 12.71 8.71C12.61 8.8 12.5 8.87 12.38 8.92C12.14 9.02 11.86 9.02 11.62 8.92C11.5 8.87 11.39 8.8 11.29 8.71C11.2 8.61 11.13 8.5 11.08 8.38C11.03 8.26 11 8.13 11 8C11 7.87 11.03 7.74 11.08 7.62Z"
-    />
-  </svg>
-);`;
-
-const CloseIcon = `export const CloseIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    stroke="currentColor"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    strokeWidth={2}
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path d="M18 6L6 18M6 6l12 12" />
-  </svg>
-);`;
-
-const App = `import React, {forwardRef, useMemo} from "react";
-import {useAlert} from "@nextui-org/react";
-import {InfoCircleIcon} from "./InfoCircleIcon";
-import {CloseIcon} from "./CloseIcon"
-
-const styles = {
-  base: [
-    "bg-slate-100",
-    "border",
-    "shadow",
-    "hover:bg-slate-200",
-    "focus-within:!bg-slate-100",
-    "dark:bg-slate-900",
-    "dark:hover:bg-slate-800",
-    "dark:border-slate-800",
-    "dark:focus-within:!bg-slate-900",
-    "cursor-pointer"
-  ],
-  title: [
-    "text-base",
-    "text-slate-500",
-    "font-bold"
-  ],
-  description: [
-    "text-base",
-    "text-slate-500",
-  ],
-}
-
-const MyAlert = forwardRef((props, ref) => {
-  const {
-    title,
-    description,
-    isClosable,
-    domRef,
-    handleClose,
-    getBaseProps,
-    getMainWrapperProps,
-    getDescriptionProps,
-    getTitleProps,
-    getCloseButtonProps,
-    color,
-    isVisible,
-    onClose,
-    getCloseIconProps,
-    getAlertIconProps,
-  } = useAlert({
-      ...props,
-      ref,
-      // this is just for the example, the props bellow should be passed by the parent component
-      title: "Email Sent!!",
-      description: "You will get a reply soon",
-      // custom styles
-      classNames: {
-        ...styles,
-      },
-    });
-
-  const mainWrapper = useMemo(() => {
-    return (
-      <div {...getMainWrapperProps()}>
-        {title && <div {...getTitleProps()}>{title}</div>}
-        <div {...getDescriptionProps()}>{description}</div>
-      </div>
-    );
-  }, [title, description, getMainWrapperProps, getTitleProps, getDescriptionProps]);
-
-  const baseWrapper = useMemo(() => {
-    return isVisible ? (
-      <div ref={domRef} {...getBaseProps()}>
-        <InfoCircleIcon {...getAlertIconProps()} />
-        {mainWrapper}
-        {(isClosable || onClose) && (
-          <button onClick={handleClose} {...getCloseButtonProps()}>
-            <CloseIcon />
-          </button>
-        )}
-      </div>
-    ) : null;
-  }, [
-    mainWrapper,
-    isClosable,
-    getCloseButtonProps,
-    isVisible,
-    domRef,
-    getBaseProps,
-    handleClose,
-    color,
-    onClose,
-    getAlertIconProps,
-  ]);
-
-  return <>{baseWrapper}</>;
-});
-
-MyAlert.displayName = "MyAlert";
-
-export default MyAlert;`;
+import App from "./custom-impl.raw.jsx?raw";

 const react = {
  "/App.jsx": App,
-  "/InfoCircleIcon": InfoCircleIcon,
-  "/CloseIcon": CloseIcon,
 };

 export default {
@@ -0,0 +1,91 @@
+import {Alert, Button} from "@nextui-org/react";
+
+const CustomAlert = React.forwardRef(
+  (
+    {title, children, variant = "faded", color = "secondary", className, classNames = {}, ...props},
+    ref,
+  ) => {
+    const colorClass = React.useMemo(() => {
+      switch (color) {
+        case "default":
+          return "before:bg-default-300";
+        case "primary":
+          return "before:bg-primary";
+        case "secondary":
+          return "before:bg-secondary";
+        case "success":
+          return "before:bg-success";
+        case "warning":
+          return "before:bg-warning";
+        case "danger":
+          return "before:bg-danger";
+        default:
+          return "before:bg-default-200";
+      }
+    }, []);
+
+    return (
+      <Alert
+        ref={ref}
+        classNames={{
+          ...classNames,
+          base: cn(
+            [
+              "bg-default-50 dark:bg-background shadow-sm",
+              "border-1 border-default-200 dark:border-default-100",
+              "relative before:content-[''] before:absolute before:z-10",
+              "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
+              "rounded-l-none border-l-0",
+              colorClass,
+            ],
+            classNames.base,
+            className,
+          ),
+          mainWrapper: cn("pt-1", classNames.mainWrapper),
+          iconWrapper: cn("dark:bg-transparent", classNames.iconWrapper),
+        }}
+        color={color}
+        title={title}
+        variant={variant}
+        {...props}
+      >
+        {children}
+      </Alert>
+    );
+  },
+);
+
+CustomAlert.displayName = "CustomAlert";
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="flex flex-col w-full gap-y-6">
+      {colors.map((color) => (
+        <CustomAlert
+          key={color}
+          color={color}
+          title="The documents you requested are ready to be viewed"
+        >
+          <div className="flex items-center gap-1 mt-3">
+            <Button
+              className="bg-background text-default-700 font-medium border-1 shadow-small"
+              size="sm"
+              variant="bordered"
+            >
+              View documents
+            </Button>
+            <Button
+              className="text-default-500 font-medium underline underline-offset-4"
+              size="sm"
+              variant="light"
+            >
+              Maybe later
+            </Button>
+          </div>
+        </CustomAlert>
+      ))}
+    </div>
+  );
+}
@@ -0,0 +1,87 @@
+import type {AlertProps} from "@nextui-org/react";
+
+import React from "react";
+import {Alert, Button, cn} from "@nextui-org/react";
+
+const CustomAlert = ({children, variant, color, className, classNames, ...props}: AlertProps) => {
+  const colorClass = React.useMemo(() => {
+    switch (color) {
+      case "default":
+        return "before:bg-default-300";
+      case "primary":
+        return "before:bg-primary";
+      case "secondary":
+        return "before:bg-secondary";
+      case "success":
+        return "before:bg-success";
+      case "warning":
+        return "before:bg-warning";
+      case "danger":
+        return "before:bg-danger";
+      default:
+        return "before:bg-default-200";
+    }
+  }, []);
+
+  return (
+    <Alert
+      classNames={{
+        ...classNames,
+        base: cn(
+          [
+            "bg-default-50 dark:bg-background shadow-sm",
+            "border-1 border-default-200 dark:border-default-100",
+            "relative before:content-[''] before:absolute before:z-10",
+            "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
+            "rounded-l-none border-l-0",
+            colorClass,
+          ],
+          classNames?.base,
+          className,
+        ),
+        mainWrapper: cn("pt-1", classNames?.mainWrapper),
+        iconWrapper: cn("dark:bg-transparent", classNames?.iconWrapper),
+      }}
+      color={color}
+      variant={variant}
+      {...props}
+    >
+      {children}
+    </Alert>
+  );
+};
+
+CustomAlert.displayName = "CustomAlert";
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"] as any;
+
+  return (
+    <div className="flex flex-col w-full gap-y-6">
+      {colors.map((color) => (
+        <CustomAlert
+          key={color}
+          color={color}
+          description="The documents you requested are ready to be viewed"
+        >
+          <div className="flex items-center gap-1 mt-3">
+            <Button
+              className="bg-background text-default-700 font-medium border-1 shadow-small"
+              size="sm"
+              variant="bordered"
+            >
+              View documents
+            </Button>
+            <Button
+              className="text-default-500 font-medium underline underline-offset-4"
+              size="sm"
+              variant="light"
+            >
+              Maybe later
+            </Button>
+          </div>
+        </CustomAlert>
+      ))}
+    </div>
+  );
+}
--- a/Show More
+++ b/Show More