ci(changesets): version packages (beta) (#3997)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/calm-trees-serve.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+fix label placement in input and select

.changeset/config.json

@@ -10,6 +10,9 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
+  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
+    "onlyUpdatePeerDependentsWhenOutOfRange": true
+  },
   "ignore": [
     "@nextui-org/docs",
     "@nextui-org/storybook"

.changeset/curly-zoos-thank.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/listbox": patch
+---
+
+change ListboxItem key to optional (#3880)

.changeset/dirty-moles-refuse.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/autocomplete": patch
+---
+
+Clicking the clear button clears the selected value without closing the dropdown. (#3788)

.changeset/dull-bags-divide.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/select": patch
+---
+
+update label placement in Select to use `shouldLabelBeOutside` instead of `isOutsideLeft`, resolving multiline label placement issues (#3841).

.changeset/empty-helper-wrapper-div.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/select": patch
+"@nextui-org/input": patch
+---
+
+- Fixed a UI sliding issue caused by the helper wrapper being rendered when `isInvalid` was false but `errorMessage` was present

.changeset/fast-horses-explode.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+fix the fullWidth variant in input and select component. (#3745)

.changeset/few-jars-flow.md

@@ -0,0 +1,65 @@
+---
+"@nextui-org/table": minor
+"@nextui-org/accordion": minor
+"@nextui-org/alert": minor
+"@nextui-org/autocomplete": minor
+"@nextui-org/avatar": minor
+"@nextui-org/badge": 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/dropdown": minor
+"@nextui-org/input": minor
+"@nextui-org/code": minor
+"@nextui-org/divider": minor
+"@nextui-org/image": minor
+"@nextui-org/drawer": 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/scroll-shadow": minor
+"@nextui-org/ripple": minor
+"@nextui-org/select": minor
+"@nextui-org/slider": minor
+"@nextui-org/skeleton": minor
+"@nextui-org/spacer": minor
+"@nextui-org/spinner": 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/theme": 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-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
+"@nextui-org/use-ssr": minor
+"@nextui-org/use-theme": minor
+---
+
+update react-aria version

.changeset/flat-pants-accept.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/date-picker": patch
+---
+
+Fixes getCalendarProps to propagate the classNames in the calendarProps. (#3769)

.changeset/forty-doors-flash.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+remove the pseudo cancel btn from input (#3907)

.changeset/giant-worms-hammer.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+replace the use of RTL-specific styles with logical properties.

.changeset/grumpy-mayflies-rhyme.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+bump `tailwind-merge` version (#3614)

.changeset/happy-parrots-search.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+apply tw nested group (#3544, #2324, #2959)

.changeset/kind-cobras-travel.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/calendar": patch
+"@nextui-org/date-picker": patch
+---
+
+Add month and year picker to DateRangePicker and RangeCalendar (#3089, #3090)

.changeset/kind-insects-end.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/use-image": patch
+---
+
+server validation added to the use-image hook

.changeset/light-needles-behave.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/use-theme": patch
+---
+
+introduce `use-theme` hook

.changeset/mean-mangos-occur.md

@@ -0,0 +1,8 @@
+---
+"@nextui-org/calendar": patch
+"@nextui-org/theme": patch
+"@nextui-org/use-infinite-scroll": patch
+"@nextui-org/shared-utils": patch
+---
+
+replaced lodash with native approaches

.changeset/mighty-birds-deny.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/autocomplete": patch
+---
+
+Return null if there are items for exit animation on popover close to work

.changeset/neat-donkeys-accept.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/date-picker": patch
+"@nextui-org/theme": patch
+---
+
+Add support for selectorButtonPlacement property (#3015)

.changeset/pink-beans-sit.md

@@ -0,0 +1,6 @@
+---
+"@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.

.changeset/plenty-scissors-love.md

@@ -0,0 +1,77 @@
+---
+"@nextui-org/accordion": patch
+"@nextui-org/alert": patch
+"@nextui-org/autocomplete": patch
+"@nextui-org/avatar": patch
+"@nextui-org/badge": patch
+"@nextui-org/breadcrumbs": patch
+"@nextui-org/button": patch
+"@nextui-org/calendar": patch
+"@nextui-org/card": patch
+"@nextui-org/checkbox": patch
+"@nextui-org/chip": patch
+"@nextui-org/code": patch
+"@nextui-org/date-input": patch
+"@nextui-org/date-picker": patch
+"@nextui-org/divider": patch
+"@nextui-org/drawer": patch
+"@nextui-org/dropdown": patch
+"@nextui-org/image": patch
+"@nextui-org/input": patch
+"@nextui-org/kbd": patch
+"@nextui-org/link": patch
+"@nextui-org/listbox": patch
+"@nextui-org/menu": patch
+"@nextui-org/modal": patch
+"@nextui-org/navbar": patch
+"@nextui-org/pagination": patch
+"@nextui-org/popover": patch
+"@nextui-org/progress": patch
+"@nextui-org/radio": patch
+"@nextui-org/ripple": patch
+"@nextui-org/scroll-shadow": patch
+"@nextui-org/select": patch
+"@nextui-org/skeleton": patch
+"@nextui-org/slider": patch
+"@nextui-org/snippet": patch
+"@nextui-org/spacer": patch
+"@nextui-org/spinner": patch
+"@nextui-org/switch": patch
+"@nextui-org/table": patch
+"@nextui-org/tabs": patch
+"@nextui-org/tooltip": patch
+"@nextui-org/user": patch
+"@nextui-org/react": patch
+"@nextui-org/system": patch
+"@nextui-org/system-rsc": patch
+"@nextui-org/theme": patch
+"@nextui-org/use-aria-accordion": patch
+"@nextui-org/use-aria-accordion-item": patch
+"@nextui-org/use-aria-button": patch
+"@nextui-org/use-aria-link": patch
+"@nextui-org/use-aria-menu": patch
+"@nextui-org/use-aria-modal-overlay": patch
+"@nextui-org/use-aria-multiselect": patch
+"@nextui-org/use-aria-toggle-button": patch
+"@nextui-org/use-clipboard": patch
+"@nextui-org/use-data-scroll-overflow": patch
+"@nextui-org/use-disclosure": patch
+"@nextui-org/use-draggable": patch
+"@nextui-org/use-image": patch
+"@nextui-org/use-infinite-scroll": patch
+"@nextui-org/use-intersection-observer": patch
+"@nextui-org/use-is-mobile": patch
+"@nextui-org/use-pagination": patch
+"@nextui-org/use-real-shape": patch
+"@nextui-org/use-ref-state": patch
+"@nextui-org/use-theme": patch
+"@nextui-org/aria-utils": patch
+"@nextui-org/dom-animation": patch
+"@nextui-org/framer-utils": patch
+"@nextui-org/react-utils": patch
+"@nextui-org/shared-icons": patch
+"@nextui-org/shared-utils": patch
+"@nextui-org/test-utils": patch
+---
+
+Beta 1

.changeset/poor-moose-double.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+added stripe color gradients for progress (#1933)

.changeset/poor-sheep-repair.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/alert": patch
+"@nextui-org/theme": patch
+---
+
+introduced Alert component (#2250)

.changeset/popular-pigs-begin.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/autocomplete": patch
+---
+
+automatically focus first non-disabled item

.changeset/pre.json

@@ -0,0 +1,130 @@
+{
+  "mode": "pre",
+  "tag": "beta",
+  "initialVersions": {
+    "@nextui-org/docs": "2.0.0",
+    "@nextui-org/accordion": "2.0.40",
+    "@nextui-org/alert": "2.0.0",
+    "@nextui-org/autocomplete": "2.1.7",
+    "@nextui-org/avatar": "2.0.33",
+    "@nextui-org/badge": "2.0.32",
+    "@nextui-org/breadcrumbs": "2.0.13",
+    "@nextui-org/button": "2.0.38",
+    "@nextui-org/calendar": "2.0.12",
+    "@nextui-org/card": "2.0.34",
+    "@nextui-org/checkbox": "2.1.5",
+    "@nextui-org/chip": "2.0.33",
+    "@nextui-org/code": "2.0.33",
+    "@nextui-org/date-input": "2.1.4",
+    "@nextui-org/date-picker": "2.1.8",
+    "@nextui-org/divider": "2.0.32",
+    "@nextui-org/drawer": "2.0.0",
+    "@nextui-org/dropdown": "2.1.31",
+    "@nextui-org/image": "2.0.32",
+    "@nextui-org/input": "2.2.5",
+    "@nextui-org/kbd": "2.0.34",
+    "@nextui-org/link": "2.0.35",
+    "@nextui-org/listbox": "2.1.27",
+    "@nextui-org/menu": "2.0.30",
+    "@nextui-org/modal": "2.0.41",
+    "@nextui-org/navbar": "2.0.37",
+    "@nextui-org/pagination": "2.0.36",
+    "@nextui-org/popover": "2.1.29",
+    "@nextui-org/progress": "2.0.34",
+    "@nextui-org/radio": "2.1.5",
+    "@nextui-org/ripple": "2.0.33",
+    "@nextui-org/scroll-shadow": "2.1.20",
+    "@nextui-org/select": "2.2.7",
+    "@nextui-org/skeleton": "2.0.32",
+    "@nextui-org/slider": "2.2.17",
+    "@nextui-org/snippet": "2.0.43",
+    "@nextui-org/spacer": "2.0.33",
+    "@nextui-org/spinner": "2.0.34",
+    "@nextui-org/switch": "2.0.34",
+    "@nextui-org/table": "2.0.40",
+    "@nextui-org/tabs": "2.0.37",
+    "@nextui-org/tooltip": "2.0.41",
+    "@nextui-org/user": "2.0.34",
+    "@nextui-org/react": "2.4.8",
+    "@nextui-org/system": "2.2.6",
+    "@nextui-org/system-rsc": "2.1.6",
+    "@nextui-org/theme": "2.2.11",
+    "@nextui-org/use-aria-accordion": "2.0.7",
+    "@nextui-org/use-aria-accordion-item": "2.0.10",
+    "@nextui-org/use-aria-button": "2.0.10",
+    "@nextui-org/use-aria-link": "2.0.19",
+    "@nextui-org/use-aria-menu": "2.0.7",
+    "@nextui-org/use-aria-modal-overlay": "2.0.13",
+    "@nextui-org/use-aria-multiselect": "2.2.5",
+    "@nextui-org/use-aria-toggle-button": "2.0.10",
+    "@nextui-org/use-callback-ref": "2.0.6",
+    "@nextui-org/use-clipboard": "2.0.7",
+    "@nextui-org/use-data-scroll-overflow": "2.1.7",
+    "@nextui-org/use-disclosure": "2.0.10",
+    "@nextui-org/use-draggable": "2.0.0",
+    "@nextui-org/use-image": "2.0.6",
+    "@nextui-org/use-infinite-scroll": "2.1.5",
+    "@nextui-org/use-intersection-observer": "2.0.5",
+    "@nextui-org/use-is-mobile": "2.0.9",
+    "@nextui-org/use-is-mounted": "2.0.6",
+    "@nextui-org/use-measure": "2.0.2",
+    "@nextui-org/use-pagination": "2.0.10",
+    "@nextui-org/use-real-shape": "2.0.17",
+    "@nextui-org/use-ref-state": "2.0.7",
+    "@nextui-org/use-resize": "2.0.6",
+    "@nextui-org/use-safe-layout-effect": "2.0.6",
+    "@nextui-org/use-scroll-position": "2.0.9",
+    "@nextui-org/use-ssr": "2.0.6",
+    "@nextui-org/use-theme": "2.0.0",
+    "@nextui-org/use-update-effect": "2.0.6",
+    "@nextui-org/storybook": "2.0.0",
+    "@nextui-org/aria-utils": "2.0.26",
+    "@nextui-org/dom-animation": "2.0.0",
+    "@nextui-org/framer-utils": "2.0.25",
+    "@nextui-org/react-rsc-utils": "2.0.14",
+    "@nextui-org/react-utils": "2.0.17",
+    "@nextui-org/shared-icons": "2.0.9",
+    "@nextui-org/shared-utils": "2.0.8",
+    "@nextui-org/stories-utils": "2.0.3",
+    "@nextui-org/test-utils": "2.0.6"
+  },
+  "changesets": [
+    "calm-trees-serve",
+    "curly-zoos-thank",
+    "dirty-moles-refuse",
+    "dull-bags-divide",
+    "empty-helper-wrapper-div",
+    "fast-horses-explode",
+    "few-jars-flow",
+    "flat-pants-accept",
+    "forty-doors-flash",
+    "giant-worms-hammer",
+    "grumpy-mayflies-rhyme",
+    "happy-parrots-search",
+    "kind-cobras-travel",
+    "kind-insects-end",
+    "light-needles-behave",
+    "mean-mangos-occur",
+    "mighty-birds-deny",
+    "neat-donkeys-accept",
+    "pink-beans-sit",
+    "plenty-scissors-love",
+    "poor-moose-double",
+    "poor-sheep-repair",
+    "popular-pigs-begin",
+    "quick-geckos-punch",
+    "shy-mails-live",
+    "slimy-cats-brush",
+    "slow-paws-punch",
+    "smooth-mayflies-wonder",
+    "soft-apricots-sleep",
+    "sour-seas-buy",
+    "swift-news-complain",
+    "thirty-cheetahs-guess",
+    "tricky-fans-draw",
+    "twelve-papayas-clean",
+    "two-waves-own",
+    "wild-jobs-explain",
+    "witty-socks-bathe"
+  ]
+}

.changeset/quick-geckos-punch.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+separator icon RTL support in Breadcrumbs component (#2486)

.changeset/shy-mails-live.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/image": patch
+---
+
+add missing `w` to `getWrapperProps` dependency (#3801)

.changeset/slimy-cats-brush.md

@@ -0,0 +1,4 @@
+---
+---
+
+Update Twitter logo, links, and named references to X. Removed Twitter logo from social based on review feedback.

.changeset/slow-paws-punch.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/popover": patch
+---
+
+added `shouldCloseOnScroll` to control the popover closing on scroll (#3594)

.changeset/smooth-mayflies-wonder.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/tabs": patch
+---
+
+Add tab ref

.changeset/soft-apricots-sleep.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/modal": patch
+"@nextui-org/use-draggable": patch
+---
+
+Add draggable modal (#2647)

.changeset/sour-seas-buy.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/menu": patch
+---
+
+Use `useMenu` and `useMenuItem` from `@react-aria` instead of custom hooks

.changeset/swift-news-complain.md

@@ -0,0 +1,15 @@
+---
+"@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)

.changeset/thirty-cheetahs-guess.md

@@ -0,0 +1,20 @@
+---
+"@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

.changeset/tricky-fans-draw.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+show margin only with label in Switch component (#3791)

.changeset/twelve-papayas-clean.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/tabs": patch
+---
+
+revise the inert attribute in `TabPanel` (#3972)

.changeset/two-waves-own.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/input": patch
+---
+
+clear button should not receive focus when input is disabled.

.changeset/wild-jobs-explain.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/use-image": patch
+---
+
+fix Image ReferenceError in SSR

.changeset/witty-socks-bathe.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+add missing `data-[hover=true]:` for ghost button with danger color

.coderabbit.yaml

@@ -0,0 +1,22 @@
+language: "en"
+early_access: false
+reviews:
+  high_level_summary: true
+  poem: false
+  review_status: true
+  collapse_walkthrough: false
+  auto_review:
+      enabled: true
+      ignore_title_keywords:
+        - "WIP"
+        - "DO NOT MERGE"
+        - 'ci(changesets)'
+      drafts: false
+      base_branches:
+        - "main"
+        - "canary"
+        - "fix/.*"
+        - "chore/.*"
+        - "feat/.*"
+chat:
+  auto_reply: true        

.commitlintrc.cjs

@@ -3,7 +3,7 @@ const conventional = require("@commitlint/config-conventional");
 module.exports = {
   extends: ["@commitlint/config-conventional"],
   plugins: ["commitlint-plugin-function-rules"],
-  helpUrl: "https://github.com/nextui-org/nextui/blob/main/CONTRIBUTING.MD#commit-convention",
+  helpUrl: "https://github.com/nextui-org/nextui/blob/main/CONTRIBUTING.md#commit-convention",
   rules: {
     ...conventional.rules,
     "type-enum": [

.eslintrc.json

@@ -87,6 +87,7 @@
         "prev": ["const", "let", "var"],
         "next": ["const", "let", "var"]
       }
-    ]
+    ],
+    "import/consistent-type-specifier-style": ["error", "prefer-top-level"]
   }
 }

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -28,7 +28,9 @@ body:
       description: |
         Please provide the version of NextUI you are using.
         You can find the version number in the package.json file.
-      placeholder: ex. 2.0.10
+        For global installation, please state the version only. (e.g. 2.4.2)
+        For individual installation, please state the package name as well. (e.g. @nextui-org/button@2.0.34)
+      placeholder: ex. 2.4.2
     validations:
       required: true
   - type: textarea
@@ -103,6 +105,6 @@ body:
         - "Safari"
         - "Edge"
         - "Opera"
-        - "Other (add additonal context)"
+        - "Other (add additional context)"
     validations:
-      required: true
+      required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -6,6 +6,6 @@ contact_links:
   - name: 💬 Discord Community Chat
     url: https://discord.gg/9b6yyZKmH4
     about: Ask quick questions or simply chat on the `NextUI` community Discord server.
-  - name: 💬 New Updates (Twitter)
-    url: https://twitter.com/getnextui
-    about: Link to our twitter account if you want to follow us and stay up to date with NextUI news
+  - name: 💬 New Updates (X)
+    url: https://x.com/getnextui
+    about: Link to our X account if you want to follow us and stay up to date with NextUI news

.github/common-actions/install/action.yml

@@ -5,12 +5,10 @@ runs:
   using: composite
   steps:
     - name: Install dependencies
-      uses: pnpm/action-setup@v2.2.4
-      with:
-        version: 8
+      uses: pnpm/action-setup@v4
 
     - name: Setup Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version-file: ".nvmrc"
         registry-url: "https://registry.npmjs.org"

.github/pull_request_template.md

@@ -11,15 +11,15 @@ Closes # <!-- Github issue # here -->
 
 ## 📝 Description
 
-> Add a brief description
+<!--- Add a brief description -->
 
 ## ⛳️ Current behavior (updates)
 
-> Please describe the current behavior that you are modifying
+<!--- Please describe the current behavior that you are modifying -->
 
 ## 🚀 New behavior
 
-> Please describe the behavior or changes this PR adds
+<!--- Please describe the behavior or changes this PR adds -->
 
 ## 💣 Is this a breaking change (Yes/No):
 

.github/workflows/QA.yaml

@@ -3,7 +3,7 @@ name: QA
 on:
   pull_request:
     branches:
-      - main
+      - canary
 
 jobs:
   build:
@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install
         uses: ./.github/common-actions/install
@@ -24,7 +24,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install
         uses: ./.github/common-actions/install
@@ -37,7 +37,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install
         uses: ./.github/common-actions/install
@@ -50,7 +50,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install
         uses: ./.github/common-actions/install
@@ -63,7 +63,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install
         uses: ./.github/common-actions/install

.github/workflows/enter-pre-release-mode.yaml

@@ -0,0 +1,33 @@
+name: Enter pre-release mode
+on: workflow_dispatch
+
+jobs:
+  enter-pre-release-mode:
+    if: ${{ github.ref == 'refs/heads/beta/release-next' || github.ref == 'refs/heads/canary' }}
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      id-token: write
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: Enter pre-release mode
+        id: enter-pre-release-mode
+        run: |
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config user.name "github-actions[bot]"
+          if [ ${{ github.ref }} == 'refs/heads/canary' ]; then
+            pnpm changeset:canary
+          else
+            pnpm changeset:beta
+          fi
+          git add -A
+          git commit -m 'chore(pre-release): enter pre-release mode'
+          git push

.github/workflows/exit-pre-release.yaml

@@ -0,0 +1,37 @@
+name: Exit pre-release mode
+
+on: workflow_dispatch
+jobs:
+  exit-pre-release-mode:
+    if: ${{ github.ref == 'refs/heads/beta/release-next' || github.ref == 'refs/heads/canary' }}
+    name: exit pre-release mode
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      id-token: write
+
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.inputs.branch }}
+          fetch-depth: 0
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: remove pre.json
+        # we only remove .changeset/pre.json here 
+        # since we want to keep the changeset files introduced in beta/release-next or canary branch
+        # once we merge it to canary / main, those files will be removed in version PR in canary 
+        # and converted to corresponding changelogs
+        run: npx rimraf .changeset/pre.json
+
+      - name: Commit and push changes
+        run: |
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config user.name "github-actions[bot]"
+          git add -A
+          git commit -m "ci(changesets): exit pre-release mode"
+          git push

.github/workflows/pre-release.yaml

@@ -0,0 +1,79 @@
+name: Pre-release
+
+on:
+  push:
+    paths:
+      - ".changeset/**"
+      - "packages/**"
+    branches:
+      - "beta/release-next"
+      - "canary"
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  prerelease:
+    name: changesets pre-release
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      id-token: write
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: Check if pre.json exists
+        id: check_if_pre_json_exists
+        uses: andstor/file-existence-action@v3.0.0
+        with:
+          files: ".changeset/pre.json"
+
+      - name: Get pre-release changesets
+        id: get-pre-release-changesets
+        uses: notiz-dev/github-action-json-property@release
+        with:
+          path: ".changeset/pre.json"
+          prop_path: "changesets"
+
+      - name: Create pre-release PR
+        id: create-pre-release-pr
+        if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && !startsWith(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+        uses: changesets/action@v1
+        with:
+          version: pnpm run version
+          title: "ci(changesets): :package: version packages"
+          commit: "ci(changesets): version packages"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - 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: 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
+
+      - 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): version packages') }}"
+        uses: changesets/action@v1
+        with:
+          publish: pnpm run release
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install
         uses: ./.github/common-actions/install
@@ -39,14 +39,4 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Create @dev release
-        if: steps.changesets.outputs.published != 'true'
-        run: |
-          git checkout main
-          pnpm version:dev
-          pnpm release:dev
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.husky/post-merge

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+huskyDir=$(dirname -- "$0")
+. "$huskyDir/_/husky.sh"
+
+. "$huskyDir/scripts/update-dep"

.husky/post-rebase

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+huskyDir=$(dirname -- "$0")
+. "$huskyDir/_/husky.sh"
+
+. "$huskyDir/scripts/update-dep"

.husky/scripts/update-dep

@@ -0,0 +1,11 @@
+#!/usr/bin/env sh
+changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"
+
+check_run() {
+  if (echo "$changed_files" | grep --quiet "$1"); then
+    printf "\033[36mDetected changes in pnpm-lock.yaml, starting dependency update\033[0m\n"
+    eval "$2"
+  fi
+}
+
+check_run pnpm-lock.yaml "pnpm install --color"

.nvmrc

@@ -1 +1 @@
-16.x
+v20.16.0

.vscode/settings.json

@@ -2,6 +2,13 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  }
+    "source.fixAll.eslint": "explicit"
+  },
+  "tailwindCSS.experimental.configFile": {
+    "packages/storybook/tailwind.config.js": ["packages/core/theme/**/*", "packages/components/**/*"],
+    "apps/docs/tailwind.config.js": "apps/docs/**/*"
+  },
+  "tailwindCSS.experimental.classRegex": [
+    ["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ]
 }

CONTRIBUTING.md

@@ -14,7 +14,7 @@ Hello!, I am very excited that you are interested in contributing with Next UI.
 ### Tooling
 
 - [PNPM](https://pnpm.io/) to manage packages and dependencies
-- [Tsup](https://tsup.egoist.sh/) to bundle packages
+- [Tsup](https://tsup.egoist.dev/) to bundle packages
 - [Storybook](https://storybook.js.org/) for rapid UI component development and
   testing
 - [Testing Library](https://testing-library.com/) for testing components and
@@ -57,7 +57,7 @@ https://www.conventionalcommits.org/ or check out the
 
 ## Pull Request Guidelines
 
-- The `main` branch is basically a snapshot of the latest stable version. All development must be done in dedicated branches.
+- The `main` branch is basically a snapshot of the latest production version. All development must be done in dedicated branches and will be merged to `canary` branch.
 - Make sure that Github Actions are green
 - It is good to have multiple small commits while working on the PR. We'll let GitHub squash it automatically before the merge.
 - If you add a new feature:
@@ -73,14 +73,14 @@ https://www.conventionalcommits.org/ or check out the
 
 1. Fork of the nextui repository and clone your fork
 
-2. Create a new branch out of the `main` branch. We follow the convention
+2. Create a new branch out of the `canary` branch. We follow the convention
    `[type/scope]`. For example `fix/dropdown-hook` or `docs/menu-typo`. `type`
    can be either `docs`, `fix`, `feat`, `build`, or any other conventional
    commit type. `scope` is just a short id that describes the scope of work.
 
 3. Make and commit your changes following the
    [commit convention](https://github.com/nextui-org/nextui/blob/main/CONTRIBUTING.md#commit-convention).
-   As you develop, you can run `pnpm build --filter=<module>` and
+   As you canary, you can run `pnpm build --filter=<module>` and
    `pnpm test packages/<module>/<pkg>` e.g. `pnpm build --filter=avatar & pnpm test packages/components/avatar` to make sure everything works as expected.
 
    > To know more about the `--filter` option, please check the turborepo [docs](https://turborepo.org/docs/core-concepts/filtering).
@@ -118,12 +118,13 @@ We use [Turbo Repo](https://turborepo.org/) for the project management.
 
 ```bash
 ## Start the dev babel server of NextUI core components
-pnpm dev:nextui
+pnpm dev
 
 ## optional
-pnpm dev:docs ## this will start the documentation next.js server and it will automatically detect the changes in the components.
 
-pnpm start:sb ## this will start the storybook server for a faster development and testing.
+pnpm sb ## this will start the storybook server for a faster development and testing.
+
+pnpm dev:docs ## this will start the documentation next.js server and it will automatically detect the changes in the components.
 ```
 
 - If you will be working just on the documentation source code / mdx, you can use the following commands to build
@@ -131,7 +132,7 @@ pnpm start:sb ## this will start the storybook server for a faster development a
 
 ```bash
 ## Build NextUI source components
-pnpm build:nextui
+pnpm build
 
 ## Start the next.js documentation dev server
 pnpm dev:docs
@@ -141,10 +142,6 @@ pnpm dev:docs
 
 ```bash
 pnpm sb
-
-#or
-
-pnpm start:sb
 ```
 
 Remember that these commands must be executed in the root folder of the project.
@@ -166,29 +163,46 @@ git checkout -b fix/something
 All commits that fix bugs or add features need a test.
 You can run the nest command for component specific tests.
 
-```
+```bash
 # Test current code
-pnpm test:update # or npm run test:update
 
+pnpm test
+
+# or
+
+npm run test
+```
+
+```bash
 # Test isolated component code
-pnpm test:update src/button  # or npm run test:update src/button
+
+pnpm test button
+
+# or
+
+npm run test button
 
 ```
 
 5. Be sure the package builds.
 
-```
+```bash
 # Build current code
-pnpm build # or npm run build
+
+pnpm build
+
+# or
+
+npm run build
 ```
 
-> Note: ensure your version of Node is 14 or higher to run scripts
+> Note: ensure that you have at least Node.js 20.16.0 as well as pnpm 9.6.0 or higher installed on your machine to run the scripts
 
 6. Send your pull request:
 
-- Send your pull request to the `main` branch
+- Send your pull request to the `canary` branch
 - Your pull request will be reviewed by the maintainers and the maintainers will decide if it is accepted or not
-- Once the pull request is accepted, the maintainers will merge it to the `main` branch
+- Once the pull request is accepted, the maintainers will merge it to the `canary` branch
 
 ## Visual Changes
 

apps/docs/.env.example

@@ -12,4 +12,8 @@ IS_PREVIEW=true/false
 ANALYZE_BUNDLE=true/false
 
 # Vercel preview env (is used for taking the docs directly from the project files)
-NEXT_PUBLIC_PREVIEW=true/false
+NEXT_PUBLIC_PREVIEW=true/false
+
+## Featurebase
+NEXT_PUBLIC_FB_FEEDBACK_ORG=
+NEXT_PUBLIC_FB_FEEDBACK_URL=

apps/docs/.eslintrc.json

@@ -3,7 +3,7 @@
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "files": ["*.ts", "*.tsx"],
       "parserOptions": {
         "project": ["apps/docs/tsconfig(.*)?.json"],
         "ecmaFeatures": {

apps/docs/.sponsorsrc

@@ -202,7 +202,7 @@
     "email": null,
     "twitter": null,
     "github": "https://github.com/HighError",
-    "website": "https://higherror.github.io/"
+    "website": null
   },
   {
     "MemberId": 409558,
@@ -308,5 +308,25 @@
     "twitter": null,
     "github": null,
     "website": "https://encur.me/"
+  },
+  {
+    "MemberId": 571230,
+    "createdAt": "2024-06-01 18:47",
+    "type": "ORGANIZATION",
+    "role": "BACKER",
+    "tier": "Gold Sponsor 🥇",
+    "isActive": true,
+    "totalAmountDonated": 100,
+    "currency": "USD",
+    "lastTransactionAt": "2024-06-01 18:47",
+    "lastTransactionAmount": 100,
+    "profile": "https://opencollective.com/coderabbit",
+    "name": "CodeRabbit",
+    "company": null,
+    "description": "CodeRabbit is an AI-driven context-aware code reviewer that provides line-by-line feedback and smart chat. ",
+    "image": "/sponsors/571230.jpg",
+    "twitter": null,
+    "github": null,
+    "website": "https://coderabbit.ai"
   }
 ]

apps/docs/app/blog/[slug]/page.tsx

@@ -1,12 +1,13 @@
 import type {Metadata} from "next";
 
 import {notFound} from "next/navigation";
-import {allBlogPosts} from "contentlayer/generated";
+import {allBlogPosts} from "contentlayer2/generated";
 import {Link, User} from "@nextui-org/react";
 import {format, parseISO} from "date-fns";
 import NextLink from "next/link";
 import {Balancer} from "react-wrap-balancer";
 
+import {__DEV__, __PREVIEW__} from "@/utils";
 import {MDXContent} from "@/components/mdx-content";
 import {siteConfig} from "@/config/site";
 import {Route} from "@/libs/docs/page";
@@ -18,6 +19,8 @@ interface BlogPostProps {
   };
 }
 
+const isDraftVisible = __DEV__ || __PREVIEW__;
+
 async function getBlogPostFromParams({params}: BlogPostProps) {
   const slug = params.slug || "";
   const post = allBlogPosts.find((post) => post.slugAsParams === slug);
@@ -78,7 +81,7 @@ export async function generateStaticParams(): Promise<BlogPostProps["params"][]>
 export default async function DocPage({params}: BlogPostProps) {
   const {post} = await getBlogPostFromParams({params});
 
-  if (!post) {
+  if (!post || (post.draft && !isDraftVisible)) {
     notFound();
   }
 
@@ -96,6 +99,7 @@ export default async function DocPage({params}: BlogPostProps) {
           <ChevronRightLinearIcon className="rotate-180 inline-block mr-1" size={15} />
           Back to blog
         </Link>
+
         <time className="block text-small mb-2 text-default-500" dateTime={post.date}>
           {format(parseISO(post.date), "LLLL d, yyyy")}
         </time>
@@ -119,6 +123,7 @@ export default async function DocPage({params}: BlogPostProps) {
         </div>
         <h1 className="mb-2 font-bold text-4xl">
           <Balancer>{post.title}</Balancer>
+          <strong className="text-default-300">{post?.draft && " (Draft)"}</strong>
         </h1>
         <MDXContent code={post.body.code} />
       </div>

apps/docs/app/blog/layout.tsx

@@ -1,5 +1,7 @@
 import {Image} from "@nextui-org/react";
 
+import {ScriptProviders} from "@/components/scripts/script-providers";
+
 interface DocsLayoutProps {
   children: React.ReactNode;
 }
@@ -22,6 +24,8 @@ export default function DocsLayout({children}: DocsLayoutProps) {
       >
         <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
       </div>
+
+      <ScriptProviders />
     </>
   );
 }

apps/docs/app/blog/page.tsx

@@ -1,10 +1,21 @@
-import {allBlogPosts} from "contentlayer/generated";
+import {allBlogPosts} from "contentlayer2/generated";
 import {compareDesc} from "date-fns";
 
 import {BlogPostList} from "@/components/blog-post";
+import {__DEV__, __PREVIEW__} from "@/utils";
+
+const isDraftVisible = __DEV__ || __PREVIEW__;
 
 export default function Blog() {
-  const posts = allBlogPosts.sort((a, b) => compareDesc(new Date(a.date), new Date(b.date)));
+  const posts = allBlogPosts
+    .sort((a, b) => compareDesc(new Date(a.date), new Date(b.date)))
+    ?.filter((post) => {
+      if (post.draft && !isDraftVisible) {
+        return false;
+      }
+
+      return true;
+    });
 
   return (
     <div className="w-full lg:px-16 mt-12">

apps/docs/app/docs/[[...slug]]/page.tsx

@@ -1,7 +1,7 @@
 import type {Metadata} from "next";
 
 import {notFound} from "next/navigation";
-import {allDocs} from "contentlayer/generated";
+import {allDocs} from "contentlayer2/generated";
 import {Link} from "@nextui-org/react";
 
 import {MDXContent} from "@/components/mdx-content";
@@ -83,7 +83,7 @@ export default async function DocPage({params}: DocPageProps) {
   if (!doc) {
     notFound();
   }
-  const editUrl = `${GITHUB_URL}/${REPO_NAME}/edit/${TAG}/${CONTENT_PATH}${currentRoute?.path}`;
+  const editUrl = `${GITHUB_URL}/${REPO_NAME}/edit/${TAG}${CONTENT_PATH}${currentRoute?.path}`;
 
   return (
     <>

apps/docs/app/docs/layout.tsx

@@ -2,6 +2,7 @@ import {Image} from "@nextui-org/react";
 
 import manifest from "@/config/routes.json";
 import {DocsSidebar} from "@/components/docs/sidebar";
+import {ScriptProviders} from "@/components/scripts/script-providers";
 
 interface DocsLayoutProps {
   children: React.ReactNode;
@@ -12,7 +13,7 @@ export default function DocsLayout({children}: DocsLayoutProps) {
     <>
       <main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
         <div className="grid grid-cols-12">
-          <div className="hidden relative z-10 lg:block lg:col-span-2 mt-8 pr-4">
+          <div className="hidden overflow-visible relative z-10 lg:block lg:col-span-2 mt-8 pr-4">
             <DocsSidebar routes={manifest.routes} />
           </div>
           {children}
@@ -30,6 +31,8 @@ export default function DocsLayout({children}: DocsLayoutProps) {
       >
         <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
       </div>
+
+      <ScriptProviders />
     </>
   );
 }

apps/docs/app/examples/autocomplete/async-filtering/page.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable no-console */
+"use client";
+
+import * as React from "react";
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+import {useAsyncList} from "@react-stately/data";
+
+type SWCharacter = {
+  name: string;
+  height: string;
+  mass: string;
+  birth_year: string;
+};
+
+export default function Page() {
+  let list = useAsyncList<SWCharacter>({
+    async load({signal, filterText}) {
+      let res = await fetch(`https://swapi.py4e.com/api/people/?search=${filterText}`, {signal});
+      let json = await res.json();
+
+      return {
+        items: json.results,
+      };
+    },
+  });
+
+  return (
+    <div className="p-6">
+      <Autocomplete
+        className="max-w-xs"
+        inputValue={list.filterText}
+        isLoading={list.isLoading}
+        items={list.items}
+        label="Select a character"
+        placeholder="Type to search..."
+        variant="bordered"
+        onInputChange={list.setFilterText}
+      >
+        {(item) => (
+          <AutocompleteItem key={item.name} className="capitalize">
+            {item.name}
+          </AutocompleteItem>
+        )}
+      </Autocomplete>
+    </div>
+  );
+}

apps/docs/app/examples/autocomplete/async-items-loading/page.tsx

@@ -0,0 +1,113 @@
+/* eslint-disable no-console */
+"use client";
+
+import * as React from "react";
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
+
+type Pokemon = {
+  name: string;
+  url: string;
+};
+
+type UsePokemonListProps = {
+  /** Delay to wait before fetching more items */
+  fetchDelay?: number;
+};
+
+function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) {
+  const [items, setItems] = React.useState<Pokemon[]>([]);
+  const [hasMore, setHasMore] = React.useState(true);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [offset, setOffset] = React.useState(0);
+  const limit = 10; // Number of items per page, adjust as necessary
+
+  const loadPokemon = async (currentOffset: number) => {
+    const controller = new AbortController();
+    const {signal} = controller;
+
+    try {
+      setIsLoading(true);
+
+      if (offset > 0) {
+        // Delay to simulate network latency
+        await new Promise((resolve) => setTimeout(resolve, fetchDelay));
+      }
+
+      let res = await fetch(
+        `https://pokeapi.co/api/v2/pokemon?offset=${currentOffset}&limit=${limit}`,
+        {signal},
+      );
+
+      if (!res.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      let json = await res.json();
+
+      setHasMore(json.next !== null);
+      // Append new results to existing ones
+      setItems((prevItems) => [...prevItems, ...json.results]);
+    } catch (error) {
+      // @ts-ignore
+      if (error.name === "AbortError") {
+        console.log("Fetch aborted");
+      } else {
+        console.error("There was an error with the fetch operation:", error);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  React.useEffect(() => {
+    loadPokemon(offset);
+  }, []);
+
+  const onLoadMore = () => {
+    const newOffset = offset + limit;
+
+    setOffset(newOffset);
+    loadPokemon(newOffset);
+  };
+
+  return {
+    items,
+    hasMore,
+    isLoading,
+    onLoadMore,
+  };
+}
+
+export default function Page() {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500});
+
+  const [, scrollerRef] = useInfiniteScroll({
+    hasMore,
+    isEnabled: isOpen,
+    shouldUseLoader: false, // We don't want to show the loader at the bottom of the list
+    onLoadMore,
+  });
+
+  return (
+    <div className="p-6">
+      <Autocomplete
+        className="max-w-xs"
+        defaultItems={items}
+        isLoading={isLoading}
+        label="Pick a Pokemon"
+        placeholder="Select a Pokemon"
+        scrollRef={scrollerRef}
+        variant="bordered"
+        onOpenChange={setIsOpen}
+      >
+        {(item) => (
+          <AutocompleteItem key={item.name} className="capitalize">
+            {item.name}
+          </AutocompleteItem>
+        )}
+      </Autocomplete>
+    </div>
+  );
+}

apps/docs/app/examples/autocomplete/fully-controlled/page.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import * as React from "react";
+import {Autocomplete, AutocompleteItem, MenuTriggerAction} from "@nextui-org/react";
+import {useFilter} from "@react-aria/i18n";
+
+const animals = [
+  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", value: "elephant", description: "The largest land animal"},
+  {label: "Lion", value: "lion", description: "The king of the jungle"},
+  {label: "Tiger", value: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    value: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    value: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    value: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+type FieldState = {
+  selectedKey: React.Key | null;
+  inputValue: string;
+  items: typeof animals;
+};
+
+export default function Page() {
+  // Store ComboBox input value, selected option, open state, and items
+  // in a state tracker
+  const [fieldState, setFieldState] = React.useState<FieldState>({
+    selectedKey: "",
+    inputValue: "",
+    items: animals,
+  });
+
+  // Implement custom filtering logic and control what items are
+  // available to the Autocomplete.
+  const {startsWith} = useFilter({sensitivity: "base"});
+
+  // Specify how each of the Autocomplete values should change when an
+  // option is selected from the list box
+  const onSelectionChange = (key: React.Key | null) => {
+    setFieldState((prevState) => {
+      let selectedItem = prevState.items.find((option) => option.value === key);
+
+      return {
+        inputValue: selectedItem?.label || "",
+        selectedKey: key,
+        items: animals.filter((item) => startsWith(item.label, selectedItem?.label || "")),
+      };
+    });
+  };
+
+  // Specify how each of the Autocomplete values should change when the input
+  // field is altered by the user
+  const onInputChange = (value: string) => {
+    setFieldState((prevState) => ({
+      inputValue: value,
+      selectedKey: value === "" ? null : prevState.selectedKey,
+      items: animals.filter((item) => startsWith(item.label, value)),
+    }));
+  };
+
+  // Show entire list if user opens the menu manually
+  const onOpenChange = (isOpen: boolean, menuTrigger: MenuTriggerAction) => {
+    if (menuTrigger === "manual" && isOpen) {
+      setFieldState((prevState) => ({
+        inputValue: prevState.inputValue,
+        selectedKey: prevState.selectedKey,
+        items: animals,
+      }));
+    }
+  };
+
+  return (
+    <div className="p-6">
+      <Autocomplete
+        className="max-w-xs"
+        inputValue={fieldState.inputValue}
+        items={fieldState.items}
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        selectedKey={fieldState.selectedKey}
+        variant="bordered"
+        onInputChange={onInputChange}
+        onOpenChange={onOpenChange}
+        onSelectionChange={onSelectionChange}
+      >
+        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+    </div>
+  );
+}

apps/docs/app/examples/navbar/controlled-menu/page.tsx

@@ -44,12 +44,12 @@ export default function Page() {
   ];
 
   return (
-    <Navbar isBordered onMenuOpenChange={setIsMenuOpen}>
-      <NavbarContent className="sm:hidden" justify="start">
-        <NavbarMenuToggle aria-label={isMenuOpen ? "Close menu" : "Open menu"} />
-      </NavbarContent>
-
-      <NavbarContent className="sm:hidden pr-3" justify="center">
+    <Navbar onMenuOpenChange={setIsMenuOpen}>
+      <NavbarContent>
+        <NavbarMenuToggle
+          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+          className="sm:hidden"
+        />
         <NavbarBrand>
           <AcmeLogo />
           <p className="font-bold text-inherit">ACME</p>
@@ -57,17 +57,13 @@ export default function Page() {
       </NavbarContent>
 
       <NavbarContent className="hidden sm:flex gap-4" justify="center">
-        <NavbarBrand>
-          <AcmeLogo />
-          <p className="font-bold text-inherit">ACME</p>
-        </NavbarBrand>
         <NavbarItem>
           <Link color="foreground" href="#">
             Features
           </Link>
         </NavbarItem>
         <NavbarItem isActive>
-          <Link aria-current="page" color="warning" href="#">
+          <Link aria-current="page" href="#">
             Customers
           </Link>
         </NavbarItem>
@@ -77,25 +73,23 @@ export default function Page() {
           </Link>
         </NavbarItem>
       </NavbarContent>
-
       <NavbarContent justify="end">
         <NavbarItem className="hidden lg:flex">
           <Link href="#">Login</Link>
         </NavbarItem>
         <NavbarItem>
-          <Button as={Link} color="warning" href="#" variant="flat">
+          <Button as={Link} color="primary" href="#" variant="flat">
             Sign Up
           </Button>
         </NavbarItem>
       </NavbarContent>
-
       <NavbarMenu>
         {menuItems.map((item, index) => (
           <NavbarMenuItem key={`${item}-${index}`}>
             <Link
               className="w-full"
               color={
-                index === 2 ? "warning" : index === menuItems.length - 1 ? "danger" : "foreground"
+                index === 2 ? "primary" : index === menuItems.length - 1 ? "danger" : "foreground"
               }
               href="#"
               size="lg"

apps/docs/app/examples/navbar/disable-menu-animation/page.tsx

@@ -28,6 +28,8 @@ const AcmeLogo = () => (
 );
 
 export default function Page() {
+  const [isMenuOpen, setIsMenuOpen] = React.useState<boolean | undefined>(false);
+
   const menuItems = [
     "Profile",
     "Dashboard",
@@ -42,12 +44,12 @@ export default function Page() {
   ];
 
   return (
-    <Navbar disableAnimation isBordered>
-      <NavbarContent className="sm:hidden" justify="start">
-        <NavbarMenuToggle />
-      </NavbarContent>
-
-      <NavbarContent className="sm:hidden pr-3" justify="center">
+    <Navbar disableAnimation onMenuOpenChange={setIsMenuOpen}>
+      <NavbarContent>
+        <NavbarMenuToggle
+          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+          className="sm:hidden"
+        />
         <NavbarBrand>
           <AcmeLogo />
           <p className="font-bold text-inherit">ACME</p>
@@ -55,17 +57,13 @@ export default function Page() {
       </NavbarContent>
 
       <NavbarContent className="hidden sm:flex gap-4" justify="center">
-        <NavbarBrand>
-          <AcmeLogo />
-          <p className="font-bold text-inherit">ACME</p>
-        </NavbarBrand>
         <NavbarItem>
           <Link color="foreground" href="#">
             Features
           </Link>
         </NavbarItem>
         <NavbarItem isActive>
-          <Link aria-current="page" color="warning" href="#">
+          <Link aria-current="page" href="#">
             Customers
           </Link>
         </NavbarItem>
@@ -75,25 +73,23 @@ export default function Page() {
           </Link>
         </NavbarItem>
       </NavbarContent>
-
       <NavbarContent justify="end">
         <NavbarItem className="hidden lg:flex">
           <Link href="#">Login</Link>
         </NavbarItem>
         <NavbarItem>
-          <Button as={Link} color="warning" href="#" variant="flat">
+          <Button as={Link} color="primary" href="#" variant="flat">
             Sign Up
           </Button>
         </NavbarItem>
       </NavbarContent>
-
       <NavbarMenu>
         {menuItems.map((item, index) => (
           <NavbarMenuItem key={`${item}-${index}`}>
             <Link
               className="w-full"
               color={
-                index === 2 ? "warning" : index === menuItems.length - 1 ? "danger" : "foreground"
+                index === 2 ? "primary" : index === menuItems.length - 1 ? "danger" : "foreground"
               }
               href="#"
               size="lg"

apps/docs/app/examples/perf/page.tsx

@@ -9,10 +9,17 @@ import {
   Textarea,
   Input,
   Tab,
+  Avatar,
+  Select,
+  SelectItem,
   AccordionItem,
+  Pagination,
   extendVariants,
+  PaginationItem,
 } from "@nextui-org/react";
-import {useState} from "react";
+import {useFilter} from "@react-aria/i18n";
+import {useEffect, useMemo, useRef, useState} from "react";
+import {useSearchParams} from "next/navigation";
 
 import {SearchLinearIcon} from "@/components/icons";
 
@@ -117,15 +124,15 @@ const MyInput = extendVariants(Input, {
     },
     size: {
       xs: {
-        inputWrapper: "h-unit-6 min-h-unit-6 px-1",
+        inputWrapper: "h-6 min-h-6 px-1",
         input: "text-tiny",
       },
       md: {
-        inputWrapper: "h-unit-10 min-h-unit-10",
+        inputWrapper: "h-10 min-h-10",
         input: "text-small",
       },
       xl: {
-        inputWrapper: "h-unit-14 min-h-unit-14",
+        inputWrapper: "h-14 min-h-14",
         input: "text-medium",
       },
     },
@@ -175,16 +182,302 @@ const MyButton2 = extendVariants(Button, {
       xl: "px-12 py-6 text-xl",
     },
   },
-  defaultVariants: {},
+  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
@@ -253,7 +546,16 @@ export default function NextUIPerf() {
 
       <Button>Click Me!</Button>
 
-      <MyButton2 color="foreground">Press Me!</MyButton2>
+      <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>
   );
 }

apps/docs/app/examples/table/async-pagination/page.tsx

@@ -11,8 +11,8 @@ import {
   Spinner,
   Pagination,
 } from "@nextui-org/react";
-import {useAsyncList} from "@react-stately/data";
-import {useCallback, useMemo, useState} from "react";
+import {useMemo, useState} from "react";
+import useSWR from "swr";
 
 type SWCharacter = {
   name: string;
@@ -21,50 +21,23 @@ type SWCharacter = {
   birth_year: string;
 };
 
+const fetcher = (...args: Parameters<typeof fetch>) => fetch(...args).then((res) => res.json());
+
 export default function Page() {
   const [page, setPage] = useState(1);
-  const [total, setTotal] = useState(0);
-  const [isLoading, setIsLoading] = useState(true);
+
+  const {data, isLoading} = useSWR<{
+    count: number;
+    results: SWCharacter[];
+  }>(`https://swapi.py4e.com/api/people?page=${page}`, fetcher, {
+    keepPreviousData: true,
+  });
 
   const rowsPerPage = 10;
 
-  let list = useAsyncList<SWCharacter>({
-    async load({signal, cursor}) {
-      // If no cursor is available, then we're loading the first page.
-      // Otherwise, the cursor is the next URL to load, as returned from the previous page.
-      const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal});
-      let json = await res.json();
-
-      setTotal(json.count);
-
-      setIsLoading(false);
-
-      return {
-        items: json.results,
-        cursor: json.next,
-      };
-    },
-  });
-
-  const pages = Math.ceil(total / rowsPerPage);
-
-  const items = useMemo(() => {
-    const start = (page - 1) * rowsPerPage;
-    const end = start + rowsPerPage;
-
-    return list.items.slice(start, end);
-  }, [page, list.items?.length]);
-
-  const onPaginationChange = useCallback(
-    (page: number) => {
-      setIsLoading(true);
-      if (page >= list.items.length / rowsPerPage) {
-        list.loadMore();
-      }
-      setPage(page);
-    },
-    [list.items.length],
-  );
+  const pages = useMemo(() => {
+    return data?.count ? Math.ceil(data.count / rowsPerPage) : 0;
+  }, [data?.count, rowsPerPage]);
 
   return (
     <div className="p-6">
@@ -80,7 +53,7 @@ export default function Page() {
                 color="primary"
                 page={page}
                 total={pages}
-                onChange={onPaginationChange}
+                onChange={(page) => setPage(page)}
               />
             </div>
           ) : null
@@ -96,8 +69,8 @@ export default function Page() {
           <TableColumn key="birth_year">Birth year</TableColumn>
         </TableHeader>
         <TableBody
-          isLoading={isLoading && !items.length}
-          items={items}
+          isLoading={isLoading || data?.results.length === 0}
+          items={data?.results ?? []}
           loadingContent={<Spinner />}
         >
           {(item) => (

apps/docs/app/examples/table/custom-styles/page.tsx

@@ -23,7 +23,7 @@ import {
 } from "@nextui-org/react";
 import {ChevronDownIcon, SearchIcon} from "@nextui-org/shared-icons";
 import {useCallback, useMemo, useState} from "react";
-import {capitalize} from "lodash";
+import {capitalize} from "@nextui-org/shared-utils";
 
 import {PlusLinearIcon} from "@/components/icons";
 import {VerticalDotsIcon} from "@/components/icons/vertical-dots";
@@ -112,7 +112,7 @@ const users = [
     age: "29",
     avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
     email: "brian.kim@example.com",
-    status: "Active",
+    status: "active",
   },
   {
     id: 7,
@@ -256,7 +256,7 @@ const users = [
   },
 ];
 
-type User = (typeof users)[0];
+type User = (typeof users)[number];
 
 export default function Page() {
   const [filterValue, setFilterValue] = useState("");

apps/docs/app/examples/table/use-case/page.tsx

@@ -23,7 +23,7 @@ import {
 } from "@nextui-org/react";
 import {ChevronDownIcon, SearchIcon} from "@nextui-org/shared-icons";
 import {useCallback, useMemo, useState} from "react";
-import {capitalize} from "lodash";
+import {capitalize} from "@nextui-org/shared-utils";
 
 import {PlusLinearIcon} from "@/components/icons";
 import {VerticalDotsIcon} from "@/components/icons/vertical-dots";
@@ -112,7 +112,7 @@ const users = [
     age: "29",
     avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
     email: "brian.kim@example.com",
-    status: "Active",
+    status: "active",
   },
   {
     id: 7,
@@ -256,7 +256,7 @@ const users = [
   },
 ];
 
-type User = (typeof users)[0];
+type User = (typeof users)[number];
 
 export default function Page() {
   const [filterValue, setFilterValue] = useState("");

apps/docs/app/feed.xml/route.ts

@@ -1,5 +1,5 @@
 import Rss from "rss";
-import {allBlogPosts} from "contentlayer/generated";
+import {allBlogPosts} from "contentlayer2/generated";
 
 import {siteConfig} from "@/config/site";
 import {allCoreContent} from "@/libs/contentlayer";

apps/docs/app/figma/page.tsx

@@ -1,6 +1,8 @@
-import {Button, Image, Link} from "@nextui-org/react";
+import {Image} from "@nextui-org/react";
 
 import {Blockquote} from "@/components/docs/components/blockquote";
+import {FigmaButton} from "@/components/figma-button";
+import {ScriptProviders} from "@/components/scripts/script-providers";
 
 export default function FigmaPage() {
   return (
@@ -23,16 +25,7 @@ export default function FigmaPage() {
             width="800"
           />
           <div className="text-center max-w-2xl m-auto">
-            <Button className="max-w-fit" color="default" variant="bordered">
-              <Link
-                isExternal
-                showAnchorIcon
-                className="text-current"
-                href="https://www.figma.com/community/file/1267584376234254760"
-              >
-                Open in Figma
-              </Link>
-            </Button>
+            <FigmaButton />
             <Blockquote color="warning">
               This file is still in development and will be continuously updated.
             </Blockquote>
@@ -51,6 +44,8 @@ export default function FigmaPage() {
       >
         <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
       </div>
+
+      <ScriptProviders />
     </>
   );
 }

apps/docs/app/layout.tsx

@@ -2,7 +2,6 @@ import "@/styles/globals.css";
 import "@/styles/sandpack.css";
 import {Metadata} from "next";
 import {clsx} from "@nextui-org/shared-utils";
-import {Analytics} from "@vercel/analytics/react";
 
 import {Providers} from "./providers";
 
@@ -12,7 +11,7 @@ import {siteConfig} from "@/config/site";
 import {fontSans} from "@/config/fonts";
 import {Navbar} from "@/components/navbar";
 import {Footer} from "@/components/footer";
-import {__PROD__} from "@/utils";
+import {ProBanner} from "@/components/pro-banner";
 
 export const metadata: Metadata = {
   title: {
@@ -70,13 +69,13 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
       <body className={clsx("min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
         <Providers themeProps={{attribute: "class", defaultTheme: "dark"}}>
           <div className="relative flex flex-col" id="app-container">
+            <ProBanner />
             <Navbar mobileRoutes={manifest.mobileRoutes} routes={manifest.routes} />
             {children}
             <Footer />
           </div>
           <Cmdk />
         </Providers>
-        {__PROD__ && <Analytics />}
       </body>
     </html>
   );

apps/docs/app/page.tsx

@@ -12,6 +12,7 @@ import {Community} from "@/components/marketing/community";
 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 {
@@ -33,6 +34,7 @@ export default async function Home() {
       <section className="flex flex-col items-center justify-center">
         <Hero />
         <FeaturesGrid features={landingContent.topFeatures} />
+        <Sponsors />
         <CustomThemes />
         <A11yOtb />
         <DarkMode />

apps/docs/app/providers.tsx

@@ -4,6 +4,7 @@ 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 {useRouter} from "next/navigation";
 
 export interface ProvidersProps {
   children: React.ReactNode;
@@ -11,8 +12,10 @@ export interface ProvidersProps {
 }
 
 export function Providers({children, themeProps}: ProvidersProps) {
+  const router = useRouter();
+
   return (
-    <NextUIProvider>
+    <NextUIProvider navigate={router.push}>
       <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
     </NextUIProvider>
   );

apps/docs/components/blog-post.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import {BlogPost} from "contentlayer/generated";
+import {BlogPost} from "contentlayer2/generated";
 import {Card, CardFooter, CardBody, CardHeader, Link, Avatar, Image} from "@nextui-org/react";
 import Balancer from "react-wrap-balancer";
 import {format, parseISO} from "date-fns";
@@ -8,10 +8,20 @@ import NextLink from "next/link";
 import {AnimatePresence, motion} from "framer-motion";
 
 import {useIsMounted} from "@/hooks/use-is-mounted";
+import {trackEvent} from "@/utils/va";
 
 const BlogPostCard = (post: BlogPost) => {
   const isMounted = useIsMounted();
 
+  const handlePress = () => {
+    trackEvent("BlogPostCard - Selection", {
+      name: post.title,
+      action: "click",
+      category: "blog",
+      data: post.url ?? "",
+    });
+  };
+
   return (
     <AnimatePresence>
       {isMounted && (
@@ -27,6 +37,7 @@ const BlogPostCard = (post: BlogPost) => {
             className="p-2 h-full border-transparent text-start bg-white/5 dark:bg-default-400/10 backdrop-blur-lg backdrop-saturate-[1.8]"
             href={post.url}
             isPressable={!!post.url}
+            onPress={handlePress}
           >
             <CardHeader>
               <Link
@@ -35,6 +46,7 @@ const BlogPostCard = (post: BlogPost) => {
                 href={post.url}
                 size="lg"
                 underline="hover"
+                onPress={handlePress}
               >
                 <Balancer>{post.title}</Balancer>
               </Link>
@@ -45,7 +57,7 @@ const BlogPostCard = (post: BlogPost) => {
             </CardBody>
             <CardFooter className="flex justify-between items-center">
               <time className="block text-small text-default-500" dateTime={post.date}>
-                {format(parseISO(post.date), "LLLL d, yyyy")}
+                {format(parseISO(post.date), "LLLL d, yyyy")} {post?.draft && " (Draft)"}
               </time>
               <Avatar size="sm" src={post.author?.avatar} />
             </CardFooter>

apps/docs/components/cmdk.tsx

@@ -13,7 +13,7 @@ import {clsx} from "@nextui-org/shared-utils";
 import scrollIntoView from "scroll-into-view-if-needed";
 import {isAppleDevice, isWebKit} from "@react-aria/utils";
 import {create} from "zustand";
-import {intersectionBy, isEmpty} from "lodash";
+import {isEmpty, intersectionBy} from "@nextui-org/shared-utils";
 import {writeStorage, useLocalStorage} from "@rehooks/local-storage";
 
 import {
@@ -25,6 +25,7 @@ import {
 
 import searchData from "@/config/search-meta.json";
 import {useUpdateEffect} from "@/hooks/use-update-effect";
+import {trackEvent} from "@/utils/va";
 
 const hideOnPaths = ["examples"];
 
@@ -153,6 +154,16 @@ export const Cmdk: FC<{}> = () => {
     }
   };
 
+  const prioritizeFirstLevelItems = (a: SearchResultItem, b: SearchResultItem) => {
+    if (a.type === "lvl1") {
+      return -1;
+    } else if (b.type === "lvl1") {
+      return 1;
+    }
+
+    return 0;
+  };
+
   const results = useMemo<SearchResultItem[]>(
     function getResults() {
       if (query.length < 2) return [];
@@ -164,17 +175,34 @@ export const Cmdk: FC<{}> = () => {
       if (words.length === 1) {
         return matchSorter(data, query, {
           keys: MATCH_KEYS,
+          sorter: (matches) => {
+            matches.sort((a, b) => prioritizeFirstLevelItems(a.item, b.item));
+
+            return matches;
+          },
         }).slice(0, MAX_RESULTS);
       }
 
       const matchesForEachWord = words.map((word) =>
         matchSorter(data, word, {
           keys: MATCH_KEYS,
+          sorter: (matches) => {
+            matches.sort((a, b) => prioritizeFirstLevelItems(a.item, b.item));
+
+            return matches;
+          },
         }),
       );
 
       const matches = intersectionBy(...matchesForEachWord, "objectID").slice(0, MAX_RESULTS);
 
+      trackEvent("Cmdk - Search", {
+        name: "cmdk - search",
+        action: "search",
+        category: "cmdk",
+        data: {query, words, matches: matches?.map((match) => match.url).join(", ")},
+      });
+
       return matches;
     },
     [query],
@@ -190,10 +218,21 @@ export const Cmdk: FC<{}> = () => {
       if (e?.key?.toLowerCase() === "k" && e[hotkey]) {
         e.preventDefault();
         isOpen ? onClose() : onOpen();
+
+        trackEvent("Cmdk - Open/Close", {
+          name: "cmdk - open/close",
+          action: "keydown",
+          category: "cmdk",
+          data: isOpen ? "close" : "open",
+        });
       }
     };
 
     document.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
   }, [isOpen]);
 
   const onItemSelect = useCallback(
@@ -201,6 +240,13 @@ export const Cmdk: FC<{}> = () => {
       onClose();
       router.push(item.url);
       addToRecentSearches(item);
+
+      trackEvent("Cmdk - ItemSelect", {
+        name: item.content,
+        action: "click",
+        category: "cmdk",
+        data: item.url,
+      });
     },
     [router, recentSearches],
   );
@@ -384,8 +430,8 @@ export const Cmdk: FC<{}> = () => {
             </Kbd>
           </div>
           <Command.List ref={listRef} className={slots.list()} role="listbox">
-            {query.length > 0 && (
-              <Command.Empty>
+            <Command.Empty>
+              {query.length > 0 && (
                 <div className={slots.emptyWrapper()}>
                   <div>
                     <p>No results for &quot;{query}&quot;</p>
@@ -398,8 +444,8 @@ export const Cmdk: FC<{}> = () => {
                     )}
                   </div>
                 </div>
-              </Command.Empty>
-            )}
+              )}
+            </Command.Empty>
 
             {isEmpty(query) &&
               (isEmpty(recentSearches) ? (

apps/docs/components/code-window/code-block.tsx

@@ -6,7 +6,7 @@ import jsx from "refractor/lang/jsx";
 import bash from "refractor/lang/bash";
 import css from "refractor/lang/css";
 import diff from "refractor/lang/diff";
-import hastToHtml from "hast-util-to-html";
+import {toHtml} from "hast-util-to-html";
 import rangeParser from "parse-numeric-range";
 import {clsx} from "@nextui-org/shared-utils";
 
@@ -39,7 +39,7 @@ export type CodeBlockProps = PreProps & {
  * recursively get all text nodes as an array for a given element
  */
 function getTextNodes(node: any): any[] {
-  let childTextNodes = [];
+  let childTextNodes: React.ReactNode[] = [];
 
   if (!node.hasChildNodes()) return [];
 
@@ -137,7 +137,7 @@ const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>((_props, forw
   result = highlightWord(result);
 
   // convert to html
-  result = hastToHtml(result);
+  result = toHtml(result);
 
   // TODO reset theme
   const classes = `language-${language}`;

apps/docs/components/demo-code-modal.tsx

@@ -12,7 +12,6 @@ import {
   Skeleton,
 } from "@nextui-org/react";
 import Link from "next/link";
-import {toLower} from "lodash";
 
 import {CodeWindow} from "@/components/code-window";
 import {useIsMobile} from "@/hooks/use-media-query";
@@ -30,8 +29,8 @@ export const DemoCodeModal: FC<DemoCodeModalProps> = ({isOpen, code, title, subt
 
   const isMobile = useIsMobile();
 
-  const lowerTitle = toLower(title);
-  const fileName = `${toLower(lowerTitle)}.tsx`;
+  const lowerTitle = title.toLowerCase();
+  const fileName = `${lowerTitle}.tsx`;
 
   return (
     <Modal
@@ -57,7 +56,7 @@ export const DemoCodeModal: FC<DemoCodeModalProps> = ({isOpen, code, title, subt
               <>
                 This is an example of how to use the {lowerTitle} component, for more information
                 please visit the&nbsp;
-                <NextUILink as={Link} href={`/docs/${lowerTitle}`}>
+                <NextUILink as={Link} href={`/docs/components/${lowerTitle}`}>
                   {lowerTitle}
                 </NextUILink>
                 &nbsp;docs.

apps/docs/components/demos/custom-button.tsx

@@ -3,6 +3,8 @@
 import {useRef} from "react";
 import {Button} from "@nextui-org/react";
 
+import {trackEvent} from "@/utils/va";
+
 export const CustomButton = () => {
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 
@@ -26,6 +28,11 @@ export const CustomButton = () => {
         x: targetCenterX / clientWidth,
       },
     });
+
+    trackEvent("LandingPage - Confetti Button", {
+      action: "press",
+      category: "landing-page",
+    });
   };
 
   return (

apps/docs/components/demos/music-player.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import {Card, CardBody, Button, Image, Progress, CardProps} from "@nextui-org/react";
+import {Card, CardBody, Button, Image, Slider, CardProps} from "@nextui-org/react";
 import {useState, FC} from "react";
 import {clsx} from "@nextui-org/shared-utils";
 import NextImage from "next/image";
@@ -63,15 +63,15 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
             </div>
 
             <div className="flex flex-col mt-3 gap-1">
-              <Progress
+              <Slider
                 aria-label="Music progress"
                 classNames={{
-                  indicator: "bg-default-800 dark:bg-white",
                   track: "bg-default-500/30",
+                  thumb: "w-2 h-2 after:w-2 after:h-2 after:bg-foreground",
                 }}
-                color="default"
+                color="foreground"
+                defaultValue={33}
                 size="sm"
-                value={33}
               />
               <div className="flex justify-between">
                 <p className="text-sm">1:23</p>

apps/docs/components/docs/components/code-demo/code-demo.tsx

@@ -31,7 +31,6 @@ interface CodeDemoProps extends UseCodeDemoProps, WindowResizerProps {
   showSandpackPreview?: boolean;
   initialEditorOpen?: boolean;
   enableResize?: boolean;
-  showTabs?: boolean;
   showPreview?: boolean;
   hideWindowActions?: boolean;
   showOpenInCodeSandbox?: boolean;
@@ -41,7 +40,6 @@ interface CodeDemoProps extends UseCodeDemoProps, WindowResizerProps {
   displayMode?: "always" | "visible";
   isGradientBox?: boolean;
   gradientColor?: GradientBoxProps["color"];
-  defaultExpanded?: boolean;
   previewHeight?: string | number;
   overflow?: "auto" | "visible" | "hidden";
   className?: string;
@@ -53,19 +51,18 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
   showEditor = true,
   showPreview = true,
   asIframe = false,
+  showTabs = true,
   resizeEnabled = true,
   hideWindowActions = false,
   showSandpackPreview = false,
   isPreviewCentered = false,
   // when false .js files will be used
   typescriptStrict = false,
-  showOpenInCodeSandbox,
+  showOpenInCodeSandbox = true,
   isGradientBox = false,
-  defaultExpanded = false,
   previewHeight = "auto",
   overflow = "visible",
   displayMode = "always",
-  showTabs = true,
   gradientColor,
   highlightedLines,
   iframeInitialWidth,
@@ -139,11 +136,10 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
 
     const content = (
       <DynamicSandpack
-        defaultExpanded={defaultExpanded}
         files={files}
         highlightedLines={highlightedLines}
         showEditor={showEditor}
-        showOpenInCodeSandbox={showOpenInCodeSandbox || showPreview}
+        showOpenInCodeSandbox={showOpenInCodeSandbox}
         showPreview={showSandpackPreview}
         typescriptStrict={typescriptStrict}
       />
@@ -156,7 +152,6 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
     isInView,
     files,
     highlightedLines,
-    defaultExpanded,
     showPreview,
     showSandpackPreview,
     showOpenInCodeSandbox,

apps/docs/components/docs/components/code-demo/react-live-demo.tsx

@@ -2,6 +2,8 @@ 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 intlDateUtils from "@internationalized/date";
+import * as reactAriaI18n from "@react-aria/i18n";
 
 import {BgGridContainer} from "@/components/bg-grid-container";
 import {GradientBox, GradientBoxProps} from "@/components/gradient-box";
@@ -19,6 +21,8 @@ export interface ReactLiveDemoProps {
 
 export const scope = {
   ...Components,
+  ...intlDateUtils,
+  ...reactAriaI18n,
 } as Record<string, unknown>;
 
 export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({

apps/docs/components/docs/components/code-demo/utils.ts

@@ -1,17 +1,19 @@
-import {get} from "lodash";
-
 import {FileCode} from "./types";
 
 const importRegex = /^(import)\s(?!type(of\s|\s)(?!from)).*?$/gm;
 
 const exportDefaultRegex = /export\s+default\s+function\s+\w+\s*\(\s*\)\s*\{/;
 
-export const transformCode = (code: string, imports = {}, compName = "App") => {
+export const transformCode = (
+  code: string,
+  imports: {[key: string]: any} = {},
+  compName = "App",
+) => {
   let cleanedCode = code
     .replace(importRegex, (match) => {
       // get component name from the match ex. "import { Table } from '@nextui-org/react'"
       const componentName = match.match(/\w+/g)?.[1] || "";
-      const matchingImport = get(imports, componentName);
+      const matchingImport = imports[componentName];
 
       if (matchingImport) {
         // remove the matching import

apps/docs/components/docs/components/codeblock.tsx

@@ -1,6 +1,7 @@
-import React, {forwardRef} from "react";
-import {clsx, getUniqueID} from "@nextui-org/shared-utils";
+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 {debounce, omit} from "@nextui-org/shared-utils";
 
 import defaultTheme from "@/libs/prism-theme";
 
@@ -9,13 +10,26 @@ interface CodeblockProps {
   codeString: string;
   metastring?: string;
   theme?: PrismTheme;
+  children?: React.ReactNode;
   showLines?: boolean;
   removeIndent?: boolean;
   hideScrollBar?: boolean;
   className?: string;
-  children?: (props: any) => React.ReactNode;
 }
 
+type HighlightStyle = "inserted" | "deleted" | undefined;
+
+const nextuiCliCommand = [
+  /^init$/,
+  /^add$/,
+  /^upgrade$/,
+  /^remove$/,
+  /^list$/,
+  /^env$/,
+  /^doctor$/,
+];
+
+const highlightStyleToken = ["bun", /nextui\s\w+(?=\s?)/, /^nextui$/, "Usage", ...nextuiCliCommand];
 const RE = /{([\d,-]+)}/;
 
 const calculateLinesToHighlight = (meta?: string) => {
@@ -60,11 +74,70 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
     const shouldHighlightLine = calculateLinesToHighlight(metastring);
     const isMultiLine = codeString.split("\n").length > 2;
 
+    const lastSelectionText = React.useRef<string | null>(null);
+
+    const isDiff = language.includes("diff");
+
+    const codeLang = isDiff ? (language.split("-")[1] as Language) : language;
+
+    let highlightStyle: HighlightStyle[] = [];
+
+    if (isDiff) {
+      let code: string[] = [];
+
+      highlightStyle = codeString.split?.("\n").map((line) => {
+        if (line.startsWith("+")) {
+          code.push(line.substr(1));
+
+          return "inserted";
+        }
+        if (line.startsWith("-")) {
+          code.push(line.substr(1));
+
+          return "deleted";
+        }
+        code.push(line);
+      });
+
+      codeString = code.join("\n");
+    }
+
+    useEffect(() => {
+      const handleSelectionChange = () => {
+        if (!window.getSelection) return;
+
+        const el = window.getSelection()?.anchorNode?.parentNode;
+
+        if (!el) return;
+
+        const selectionText = window.getSelection()?.toString();
+
+        if (!selectionText) return;
+
+        if (
+          !selectionText ||
+          selectionText === lastSelectionText.current ||
+          !codeString.includes(selectionText)
+        )
+          return;
+
+        lastSelectionText.current = selectionText;
+      };
+
+      const debouncedHandleSelectionChange = debounce(handleSelectionChange, 1000);
+
+      document.addEventListener("selectionchange", debouncedHandleSelectionChange);
+
+      return () => {
+        document.removeEventListener("selectionchange", debouncedHandleSelectionChange);
+      };
+    }, []);
+
     return (
       <BaseHighlight
         {...defaultProps}
         code={codeString}
-        language={language}
+        language={codeLang}
         theme={theme}
         {...props}
       >
@@ -77,14 +150,15 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
                 "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")}`}
-                    {...lineProps}
                     className={clsx(
                       lineProps.className,
                       removeIndent ? "pr-4" : "px-4",
@@ -97,17 +171,36 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
                           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) => (
-                      <span
-                        key={`${key}-${getUniqueID("line")}`}
-                        {...getTokenProps({token, key})}
-                        className={className}
-                      />
-                    ))}
+                    {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>
                 );
               })}

apps/docs/components/docs/components/component-links.tsx

@@ -4,9 +4,12 @@ import Balancer from "react-wrap-balancer";
 
 import {GithubIcon, NpmIcon, AdobeIcon, StorybookIcon, NextJsIcon} from "@/components/icons";
 import {COMPONENT_PATH, COMPONENT_THEME_PATH} from "@/libs/github/constants";
+import {trackEvent} from "@/utils/va";
 
 export interface ComponentLinksProps {
   component: string;
+  npm?: string;
+  source?: string;
   styles?: string;
   storybook?: string;
   rscCompatible?: boolean;
@@ -23,6 +26,16 @@ const ButtonLink = ({
   href: string;
   tooltip?: string | ReactNode;
 }) => {
+  const handlePress = () => {
+    if (!href) return;
+
+    trackEvent("ComponentLinks - Click", {
+      category: "docs",
+      action: "click",
+      data: href || "",
+    });
+  };
+
   const button = (
     <Button
       isExternal
@@ -31,6 +44,7 @@ const ButtonLink = ({
       href={href}
       size="sm"
       startContent={startContent}
+      onPress={handlePress}
       {...props}
     >
       {children}
@@ -48,6 +62,8 @@ const ButtonLink = ({
 
 export const ComponentLinks = ({
   component,
+  npm,
+  source,
   storybook,
   styles,
   rscCompatible,
@@ -60,16 +76,18 @@ export const ComponentLinks = ({
   return (
     <div className="flex flex-wrap gap-3 mt-6">
       <ButtonLink
-        href={`https://storybook.nextui.org/?path=/story/components-${storybook || component}`}
+        href={`https://storybook.nextui.org/?path=/story/components-${
+          storybook || component
+        }--default`}
         startContent={<StorybookIcon className="text-lg text-[#ff4785]" />}
       >
         Storybook
       </ButtonLink>
       <ButtonLink
-        href={`https://www.npmjs.com/package/@nextui-org/${component}`}
+        href={`https://www.npmjs.com/package/@nextui-org/${npm || component}`}
         startContent={<NpmIcon className="text-2xl text-[#E53E3E]" />}
       >
-        {`@nextui-org/${component}`}
+        {`@nextui-org/${npm || component}`}
       </ButtonLink>
       {reactAriaHook && (
         <ButtonLink
@@ -99,7 +117,10 @@ export const ComponentLinks = ({
         </ButtonLink>
       )}
 
-      <ButtonLink href={`${COMPONENT_PATH}/${component}`} startContent={<GithubIcon size={20} />}>
+      <ButtonLink
+        href={`${COMPONENT_PATH}/${source || component}`}
+        startContent={<GithubIcon size={20} />}
+      >
         Source
       </ButtonLink>
       <ButtonLink

apps/docs/components/docs/components/import-tabs.tsx

@@ -8,14 +8,14 @@ type PackageManager = {
 };
 
 const importTabs: PackageManager[] = [
-  {
-    key: "main",
-    name: "Main",
-  },
   {
     key: "individual",
     name: "Individual",
   },
+  {
+    key: "main",
+    name: "Global",
+  },
 ];
 
 export interface ImportTabsProps {

apps/docs/components/docs/components/package-managers.tsx

@@ -1,17 +1,25 @@
-import {Tabs, Tab, Snippet} from "@nextui-org/react";
+import {Tabs, Tab, Snippet, Code} from "@nextui-org/react";
+import {Key, useState} from "react";
 
 import Codeblock from "./codeblock";
+import {Blockquote} from "./blockquote";
 
-import {YarnIcon, NpmSmallIcon, PnpmIcon} from "@/components/icons";
+import {YarnIcon, NpmSmallIcon, PnpmIcon, BunIcon, CLIBoldIcon} from "@/components/icons";
 
-type PackageManagerName = "npm" | "yarn" | "pnpm";
+type PackageManagerName = "cli" | "npm" | "yarn" | "pnpm" | "bun";
 
 type PackageManager = {
   icon: JSX.Element;
   name: PackageManagerName;
+  label?: string;
 };
 
 const packageManagers: PackageManager[] = [
+  {
+    name: "cli",
+    label: "CLI",
+    icon: <CLIBoldIcon className="text-lg text-default-600 dark:text-default-400" />,
+  },
   {
     name: "npm",
     icon: <NpmSmallIcon className="text-[#E53E3E]" />,
@@ -24,50 +32,76 @@ const packageManagers: PackageManager[] = [
     name: "pnpm",
     icon: <PnpmIcon className="text-[#F69220]" />,
   },
+  {
+    name: "bun",
+    icon: <BunIcon className="text-lg text-[#FBF0DF]" />,
+  },
 ];
 
 export interface PackageManagersProps {
-  commands: Partial<Record<PackageManagerName, string>>;
+  commands: Partial<Record<PackageManagerName, React.Key>>;
+  showGlobalInstallWarning?: boolean;
 }
 
-export const PackageManagers = ({commands}: PackageManagersProps) => {
-  return (
-    <Tabs
-      aria-label="NextUI installation commands"
-      classNames={{
-        base: "group mt-4",
-        tabList: "h-10",
-      }}
-      variant="underlined"
-    >
-      {packageManagers.map(({name, icon}) => {
-        if (!commands[name]) return null;
+export const PackageManagers = ({
+  commands,
+  showGlobalInstallWarning = false,
+}: PackageManagersProps) => {
+  const [selectedManager, setSelectedManager] = useState<PackageManagerName>(
+    commands.cli ? "cli" : "npm",
+  );
 
-        return (
-          <Tab
-            key={name}
-            title={
-              <div className="flex items-center space-x-2">
-                {icon}
-                <span>{name}</span>
-              </div>
-            }
-          >
-            <Snippet
-              disableTooltip
-              fullWidth
-              hideSymbol
-              classNames={{
-                base: "bg-code-background text-code-foreground",
-                pre: "font-light text-base",
-                copyButton: "text-lg text-zinc-500 mr-2",
-              }}
+  const handleSelectionChange = (tabKey: Key) => {
+    setSelectedManager(tabKey as PackageManagerName);
+  };
+
+  return (
+    <>
+      <Tabs
+        aria-label="NextUI installation commands"
+        classNames={{
+          base: "group mt-4 min-w-[300px] w-full overflow-x-auto",
+          tabList: "h-10",
+        }}
+        selectedKey={selectedManager}
+        variant="underlined"
+        onSelectionChange={handleSelectionChange}
+      >
+        {packageManagers.map(({name, label, icon}) => {
+          if (!commands[name]) return null;
+
+          return (
+            <Tab
+              key={name}
+              title={
+                <div className="flex items-center space-x-2">
+                  {icon}
+                  <span>{label || name}</span>
+                </div>
+              }
             >
-              <Codeblock removeIndent codeString={commands[name] as string} language="bash" />
-            </Snippet>
-          </Tab>
-        );
-      })}
-    </Tabs>
+              <Snippet
+                disableTooltip
+                fullWidth
+                hideSymbol
+                classNames={{
+                  base: "bg-code-background text-code-foreground",
+                  pre: "font-light text-base",
+                  copyButton: "text-lg text-zinc-500 mr-2",
+                }}
+              >
+                <Codeblock removeIndent codeString={commands[name] as string} language="bash" />
+              </Snippet>
+            </Tab>
+          );
+        })}
+      </Tabs>
+      {showGlobalInstallWarning && (
+        <Blockquote className="my-2" 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.
+        </Blockquote>
+      )}
+    </>
   );
 };

apps/docs/components/docs/components/swatch-colors-set.tsx

@@ -4,7 +4,7 @@ import {commonColors, semanticColors} from "@nextui-org/theme";
 import {useClipboard} from "@nextui-org/use-clipboard";
 import {useState} from "react";
 import {useTheme} from "next-themes";
-import {get, isEmpty} from "lodash";
+import {get, isEmpty} from "@nextui-org/shared-utils";
 
 type ColorsItem = {
   color: string;
@@ -20,7 +20,7 @@ type SwatchColors = {
 
 type SwatchSetProps = {
   colors: SwatchColors[];
-  isSematic?: boolean;
+  isSemantic?: boolean;
 };
 
 const scaleIndexMap: Record<number, string> = {
@@ -90,7 +90,7 @@ const Swatch = ({color, scale}: {color: string; scale?: string}) => {
   );
 };
 
-const SematicSwatch = ({
+const SemanticSwatch = ({
   color,
   className,
   textClassName,
@@ -106,7 +106,7 @@ const SematicSwatch = ({
   let value: string = "";
   const [colorName, colorScale] = color.split("-");
 
-  let currentPalette = get(semanticColors, theme ?? "", {});
+  const currentPalette = get(semanticColors, theme ?? "", {});
 
   if (!colorScale) {
     value = get(currentPalette, `${colorName}.DEFAULT`, "");
@@ -139,15 +139,15 @@ const SematicSwatch = ({
   );
 };
 
-const SwatchSet = ({colors, isSematic = false}: SwatchSetProps) => (
+const SwatchSet = ({colors, isSemantic = false}: SwatchSetProps) => (
   <div className="flex flex-row flex-wrap items-center justify-center">
     {colors.map(({title, items}) => (
       <div key={title} className="flex flex-col items-start w-full h-full">
         <h2 className="text-xl font-bold text-foreground">{title}</h2>
         <div className="flex flex-row flex-wrap items-center justify-start w-full h-full px-4 py-1">
           {items.map((c, index) =>
-            isSematic ? (
-              <SematicSwatch
+            isSemantic ? (
+              <SemanticSwatch
                 key={`${c.color}-${index}`}
                 className={c.className}
                 color={c.color}
@@ -218,7 +218,7 @@ export const CommonColors = () => {
 export const SemanticColors = () => {
   return (
     <SwatchSet
-      isSematic
+      isSemantic
       colors={[
         {
           title: "Layout",

apps/docs/components/docs/pager.tsx

@@ -1,31 +1,43 @@
 "use client";
 
 import * as React from "react";
-import NextLink from "next/link";
 import {Link} from "@nextui-org/react";
+import {useRouter} from "next/navigation";
 import {ChevronIcon} from "@nextui-org/shared-icons";
 
 import manifest from "@/config/routes.json";
 import {removeFromLast} from "@/utils";
 import {Route} from "@/libs/docs/page";
 import {useDocsRoute} from "@/hooks/use-docs-route";
+import {trackEvent} from "@/utils/va";
 
 export interface FooterNavProps {
   currentRoute?: Route;
 }
 
 export const DocsPager: React.FC<FooterNavProps> = ({currentRoute}) => {
+  const router = useRouter();
+
   const {prevRoute, nextRoute} = useDocsRoute(manifest.routes, currentRoute);
 
+  const handlePress = (path: string) => {
+    trackEvent("DocsPager - Click", {
+      category: "docs",
+      action: "click",
+      data: path || "",
+    });
+
+    router.push(removeFromLast(path || "", "."));
+  };
+
   return (
     <div className="flex w-full justify-between py-20">
       {prevRoute ? (
         <Link
           isBlock
-          as={NextLink}
-          className="flex gap-2"
+          className="cursor-pointer flex gap-2"
           color="foreground"
-          href={removeFromLast(prevRoute.path || "", ".")}
+          onPress={() => handlePress(prevRoute.path || "")}
         >
           <ChevronIcon className="text-primary" height={20} width={20} />
           {prevRoute.title}
@@ -36,10 +48,9 @@ export const DocsPager: React.FC<FooterNavProps> = ({currentRoute}) => {
       {nextRoute && (
         <Link
           isBlock
-          as={NextLink}
-          className="flex gap-1 items-center"
+          className="cursor-pointer flex gap-1 items-center"
           color="foreground"
-          href={removeFromLast(nextRoute.path || "", ".")}
+          onPress={() => handlePress(nextRoute.path || "")}
         >
           {nextRoute.title}
           <ChevronIcon className="rotate-180 text-primary" height={20} width={20} />

apps/docs/components/docs/sidebar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import {FC} from "react";
+import {FC, useEffect, useState} from "react";
 import {ChevronIcon} from "@nextui-org/shared-icons";
 import {CollectionBase, Expandable, MultipleSelection, Node, ItemProps} from "@react-types/shared";
 import {BaseItem} from "@nextui-org/aria-utils";
@@ -18,14 +18,21 @@ import {
   dataFocusVisibleClasses,
 } from "@nextui-org/react";
 import Link from "next/link";
-import {isEmpty} from "lodash";
+import {isEmpty} from "@nextui-org/shared-utils";
 import {usePathname, useRouter} from "next/navigation";
 
+import {ScrollArea} from "../scroll-area";
+
 import {getRoutePaths} from "./utils";
 
 import {Route} from "@/libs/docs/page";
 import {TreeKeyboardDelegate} from "@/utils/tree-keyboard-delegate";
-import {useScrollPosition} from "@/hooks/use-scroll-position";
+import {trackEvent} from "@/utils/va";
+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 {
   slug?: string;
@@ -68,6 +75,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
       };
 
   const isNew = item.props?.newPost;
+  const isUpdated = item.props?.updated;
 
   const isExpanded = state.expandedKeys.has(key);
   const isSelected =
@@ -82,18 +90,109 @@ function TreeItem<T>(props: TreeItemProps<T>) {
 
   const Component = hasChildNodes ? "ul" : "li";
 
+  const cn = clsx(
+    "w-full",
+    "font-normal",
+    "before:mr-4",
+    "before:content-['']",
+    "before:block",
+    "before:bg-default-300",
+    "before:w-1",
+    "before:h-1",
+    "before:rounded-full",
+  );
+
   const {pressProps} = usePress({
     onPress: () => {
       if (hasChildNodes) {
         state.toggleKey(item.key);
       } else {
         router.push(paths.pathname);
+
+        trackEvent("SidebarDocs", {
+          category: "docs",
+          action: "click",
+          data: paths.pathname || "",
+        });
       }
     },
   });
 
   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>
+          <ChevronIcon
+            className={clsx("transition-transform", {
+              "-rotate-90": isExpanded,
+            })}
+          />
+        </span>
+      );
+    }
+
+    if (typeof key === "string" && ["changelog", "feedback", "roadmap"].includes(key)) {
+      return renderFeaturebaseComponent(key);
+    }
+
+    return (
+      <NextUILink as={Link} className={clsx(cn)} color="foreground" href={paths.pathname}>
+        <span
+          className={clsx(
+            isSelected
+              ? "text-primary font-medium dark:text-foreground"
+              : "opacity-80 dark:opacity-60",
+            {
+              "pointer-events-none": item.props?.comingSoon,
+            },
+          )}
+        >
+          {rendered}
+        </span>
+        {isUpdated && (
+          <Chip
+            className="ml-1 py-1 text-tiny text-default-400 bg-default-100/50"
+            color="default"
+            size="sm"
+            variant="flat"
+          >
+            Updated
+          </Chip>
+        )}
+        {isNew && (
+          <Chip className="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">
+            Coming soon
+          </Chip>
+        )}
+      </NextUILink>
+    );
+  };
+
   return (
     <Component
       {...focusProps}
@@ -101,7 +200,9 @@ function TreeItem<T>(props: TreeItemProps<T>) {
       aria-expanded={dataAttr(hasChildNodes ? isExpanded : undefined)}
       aria-selected={dataAttr(isSelected)}
       className={clsx(
-        "flex flex-col gap-3 outline-none w-full tap-highlight-transparent",
+        "flex flex-col gap-3outline-none w-full tap-highlight-transparent",
+
+        hasChildNodes ? "mb-4" : "first:mt-4",
         // focus ring
         ...dataFocusVisibleClasses,
       )}
@@ -111,56 +212,9 @@ function TreeItem<T>(props: TreeItemProps<T>) {
     >
       <div className="flex items-center gap-3 cursor-pointer" {...pressProps}>
         <Spacer x={spaceLeft} />
-        {hasChildNodes ? (
-          <span className="flex items-center gap-3">
-            <span>{rendered}</span>
-            <ChevronIcon
-              className={clsx("transition-transform", {
-                "-rotate-90": isExpanded,
-              })}
-            />
-          </span>
-        ) : (
-          <NextUILink
-            as={Link}
-            className={clsx(
-              "w-full",
-              "font-normal",
-              "before:mr-4",
-              "before:content-['']",
-              "before:block",
-              "before:bg-default-300",
-              "before:w-1",
-              "before:h-1",
-              "before:rounded-full",
-            )}
-            color="foreground"
-            href={paths.pathname}
-          >
-            <span
-              className={clsx(
-                isSelected
-                  ? "text-primary font-medium dark:text-foreground"
-                  : "opacity-80 dark:opacity-60",
-                {
-                  "pointer-events-none": item.props?.comingSoon,
-                },
-              )}
-            >
-              {rendered}
-            </span>
-            {isNew && (
-              <Chip className="ml-2" color="primary" size="sm" variant="flat">
-                New
-              </Chip>
-            )}
-            {item.props?.comingSoon && (
-              <Chip className="ml-2" color="default" size="sm" variant="flat">
-                Coming soon
-              </Chip>
-            )}
-          </NextUILink>
-        )}
+        {renderComponent()}
+        {/* Workaround to avoid scrollbar overlapping */}
+        <Spacer x={4} />
       </div>
       {isExpanded && hasChildNodes && (
         <div className="flex flex-col gap-3 items-start" role="group">
@@ -189,9 +243,7 @@ function TreeHeading({item}: {item: any}) {
 function Tree<T extends object>(props: CollectionBase<T> & Expandable & MultipleSelection) {
   let state = useTreeState(props);
 
-  let ref = useRef<HTMLUListElement>(null);
-
-  const scrollPosition = useScrollPosition(ref);
+  let ref = useRef<HTMLDivElement>(null);
 
   let keyboardDelegate = useMemo(
     // @ts-expect-error
@@ -206,16 +258,11 @@ function Tree<T extends object>(props: CollectionBase<T> & Expandable & Multiple
   });
 
   return (
-    <ul
-      {...collectionProps}
+    <ScrollArea
       ref={ref}
-      className="flex flex-col gap-4 scrollbar-hide lg:overflow-y-scroll lg:max-h-[calc(100vh_-_64px)] pb-28"
+      className="h-full lg:max-h-[calc(100vh_-_64px)]"
       role="tree"
-      style={{
-        WebkitMaskImage: `linear-gradient(to top, transparent 0%, #000 100px, #000 ${
-          scrollPosition > 30 ? "90%" : "100%"
-        }, transparent 100%)`,
-      }}
+      {...collectionProps}
     >
       {[...state.collection].map((item) => {
         if (item.type === "section") {
@@ -224,7 +271,7 @@ function Tree<T extends object>(props: CollectionBase<T> & Expandable & Multiple
 
         return <TreeItem key={item.key} item={item} state={state} />;
       })}
-    </ul>
+    </ScrollArea>
   );
 }
 
@@ -236,6 +283,8 @@ export interface DocsSidebarProps {
 }
 
 export const DocsSidebar: FC<DocsSidebarProps> = ({routes, slug, tag, className}) => {
+  const [isProBannerVisible, setIsProBannerVisible] = useState(true);
+
   const expandedKeys = routes?.reduce((keys, route) => {
     if (route.defaultOpen) {
       keys.push(route.key as string);
@@ -244,8 +293,18 @@ export const DocsSidebar: FC<DocsSidebarProps> = ({routes, slug, tag, className}
     return keys;
   }, [] as string[]);
 
-  return (
-    <div className={clsx("lg:fixed lg:top-20 mt-2 z-0 lg:h-[calc(100vh-121px)]", className)}>
+  useEffect(() => {
+    emitter.on("proBannerVisibilityChange", (value) => {
+      setIsProBannerVisible(value === "visible");
+    });
+
+    return () => {
+      emitter.off("proBannerVisibilityChange");
+    };
+  }, []);
+
+  const treeContent = useMemo(() => {
+    return (
       <Tree defaultExpandedKeys={expandedKeys} items={routes || []}>
         {(route) => (
           <Item
@@ -259,6 +318,18 @@ export const DocsSidebar: FC<DocsSidebarProps> = ({routes, slug, tag, className}
           </Item>
         )}
       </Tree>
+    );
+  }, [routes]);
+
+  return (
+    <div
+      className={clsx(
+        "lg:fixed mt-2 z-0 lg:h-[calc(100vh-121px)]",
+        isProBannerVisible ? "lg:top-32" : "lg:top-20",
+        className,
+      )}
+    >
+      {treeContent}
     </div>
   );
 };

apps/docs/components/docs/toc.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import {FC, useRef, useEffect} from "react";
+import {FC, useRef, useEffect, useState} from "react";
 import {clsx} from "@nextui-org/shared-utils";
 import {Divider, Spacer} from "@nextui-org/react";
 import {ChevronCircleTopLinearIcon} from "@nextui-org/shared-icons";
@@ -9,6 +9,7 @@ import scrollIntoView from "scroll-into-view-if-needed";
 import {Heading} from "@/libs/docs/utils";
 import {useScrollSpy} from "@/hooks/use-scroll-spy";
 import {useScrollPosition} from "@/hooks/use-scroll-position";
+import emitter from "@/libs/emitter";
 
 export interface DocsTocProps {
   headings: Heading[];
@@ -22,6 +23,8 @@ const paddingLeftByLevel: Record<number, string> = {
 };
 
 export const DocsToc: FC<DocsTocProps> = ({headings}) => {
+  const [isProBannerVisible, setIsProBannerVisible] = useState(true);
+
   const tocRef = useRef<HTMLDivElement>(null);
 
   const scrollPosition = useScrollPosition(tocRef);
@@ -51,10 +54,23 @@ export const DocsToc: FC<DocsTocProps> = ({headings}) => {
     }
   }, [activeId, activeIndex]);
 
+  useEffect(() => {
+    emitter.on("proBannerVisibilityChange", (value) => {
+      setIsProBannerVisible(value === "visible");
+    });
+
+    return () => {
+      emitter.off("proBannerVisibilityChange");
+    };
+  }, []);
+
   return (
     <div
       ref={tocRef}
-      className="fixed w-full max-w-[12rem] flex flex-col gap-4 text-left top-20 pb-20 h-[calc(100vh-121px)] scrollbar-hide overflow-y-scroll"
+      className={clsx(
+        "fixed w-full max-w-[12rem] flex flex-col gap-4 text-left pb-28 h-[calc(100vh-121px)] scrollbar-hide overflow-y-scroll",
+        isProBannerVisible ? "top-32" : "top-20",
+      )}
       style={{
         WebkitMaskImage: `linear-gradient(to top, transparent 0%, #000 100px, #000 ${
           scrollPosition > 30 ? "90%" : "100%"

apps/docs/components/featurebase/fb-changelog-button.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import {useEffect} from "react";
+
+import {trackEvent} from "@/utils/va";
+
+type Props = {
+  className?: string;
+};
+
+// ref: https://developers.featurebase.app/install/changelog-widget/install
+export const FbChangelogButton = ({className}: Props) => {
+  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");
+
+    trackEvent("Featurebase - Changelog", {
+      name: "featurebase-changelog",
+      action: "press",
+      category: "featurebase",
+    });
+  };
+
+  return (
+    <button className={className} onClick={fbButtonOnClick}>
+      Changelog <span id="fb-update-badge" />
+    </button>
+  );
+};

apps/docs/components/featurebase/fb-feedback-button.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import {useEffect} from "react";
+
+import {trackEvent} from "@/utils/va";
+
+type Props = {
+  className?: string;
+};
+
+// ref: https://developers.featurebase.app/install/feedback-widget/setup
+export const FbFeedbackButton = ({className}: Props) => {
+  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 = () => {
+    trackEvent("Featurebase - Feedback", {
+      name: "featurebase-feedback",
+      action: "press",
+      category: "featurebase",
+    });
+  };
+
+  return (
+    <button data-featurebase-feedback className={className} onClick={fbButtonOnClick}>
+      Feedback
+    </button>
+  );
+};

apps/docs/components/featurebase/fb-roadmap-link.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import NextLink from "next/link";
+import arrowRightUpIcon from "@iconify/icons-solar/arrow-right-up-linear";
+import {Icon} from "@iconify/react/dist/offline";
+import {clsx} from "@nextui-org/shared-utils";
+
+import {trackEvent} from "@/utils/va";
+
+type Props = {
+  className?: string;
+  innerClassName?: string;
+};
+
+export const FbRoadmapLink = ({className, innerClassName}: Props) => {
+  const fbLinkOnClick = () => {
+    trackEvent("Featurebase - Roadmap", {
+      name: "featurebase-roadmap",
+      action: "press",
+      category: "featurebase",
+    });
+  };
+
+  return (
+    <NextLink
+      className={clsx("inline-flex items-center", className)}
+      color="foreground"
+      href={`${process.env.NEXT_PUBLIC_FB_FEEDBACK_URL}/roadmap`}
+      target="_blank"
+      onClick={fbLinkOnClick}
+    >
+      <div className={clsx("relative", innerClassName)}>
+        Roadmap
+        <Icon
+          className="absolute right-[-10px] top-0 outline-none transition-transform group-data-[hover=true]:translate-y-0.5 [&>path]:stroke-[2.5px]"
+          icon={arrowRightUpIcon}
+          width={10}
+        />
+      </div>
+    </NextLink>
+  );
+};

apps/docs/components/figma-button.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import {Button, Link} from "@nextui-org/react";
+
+import {trackEvent} from "@/utils/va";
+
+export const FigmaButton = () => (
+  <Button
+    isExternal
+    showAnchorIcon
+    as={Link}
+    className="max-w-fit text-current"
+    color="default"
+    href="https://www.figma.com/community/file/1267584376234254760"
+    variant="bordered"
+    onPress={() => {
+      trackEvent("FigmaPage - Open Figma Link", {
+        action: "click",
+        category: "figma",
+      });
+    }}
+  >
+    Open in Figma
+  </Button>
+);