ci(changesets): version packages (#4601)

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

.changeset/config.json

@@ -2,7 +2,7 @@
   "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
   "changelog": [
     "@changesets/changelog-github",
-    { "repo": "nextui-org/nextui" }
+    { "repo": "heroui-inc/heroui" }
   ],
   "commit": false,
   "fixed": [],
@@ -14,7 +14,7 @@
     "onlyUpdatePeerDependentsWhenOutOfRange": true
   },
   "ignore": [
-    "@nextui-org/docs",
-    "@nextui-org/storybook"
+    "@heroui/docs",
+    "@heroui/storybook"
   ]
 }

.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/heroui-inc/heroui/blob/main/CONTRIBUTING.md#commit-convention",
   rules: {
     ...conventional.rules,
     "type-enum": [

.github/FUNDING.yml

@@ -2,7 +2,7 @@
 
 github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 patreon: jrgarciadev
-open_collective: nextui
+open_collective: heroui
 ko_fi: # Replace with a single Ko-fi username
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -8,28 +8,28 @@ body:
       value: |
         Thank you for reporting an issue :pray:.
 
-        This issue tracker is for reporting bugs found in [NextUI github repository](https://github.com/nextui-org/nextui/)
+        This issue tracker is for reporting bugs found in [HeroUI github repository](https://github.com/heroui-inc/heroui/)
         If you have a question about how to achieve something and are struggling, please post a question
         inside of either of the following places:
-          - NextUI's [Discussion's tab](https://github.com/nextui-org/nextui/discussions)
-          - NextUI's [Discord channel](https://discord.gg/9b6yyZKmH4)
+          - HeroUI's [Discussion's tab](https://github.com/heroui-inc/heroui/discussions)
+          - HeroUI's [Discord channel](https://discord.gg/9b6yyZKmH4)
 
 
         Before submitting a new bug/issue, please check the links below to see if there is a solution or question posted there already:
-         - NextUI's [Issue's tab](https://github.com/nextui-org/nextui/pulls?q=is%3Apr+is%3Aopen+sort%3Aupdated-desc)
-         - NextUI's [closed issues tab](https://github.com/nextui-org/nextui/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed)
-         - NextUI's [Discussions tab](https://github.com/nextui-org/nextui/discussions)
+         - HeroUI's [Issue's tab](https://github.com/heroui-inc/heroui/pulls?q=is%3Apr+is%3Aopen+sort%3Aupdated-desc)
+         - HeroUI's [closed issues tab](https://github.com/heroui-inc/heroui/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed)
+         - HeroUI's [Discussions tab](https://github.com/heroui-inc/heroui/discussions)
 
         The more information you fill in, the better the community can help you.
   - type: input
     id: version
     attributes:
-      label: NextUI Version
+      label: HeroUI Version
       description: |
-        Please provide the version of NextUI you are using.
+        Please provide the version of HeroUI you are using.
         You can find the version number in the package.json file.
         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)
+        For individual installation, please state the package name as well. (e.g. @heroui/button@2.0.34)
       placeholder: ex. 2.4.2
     validations:
       required: true
@@ -47,7 +47,7 @@ body:
       description: |
         Which website or app were you using when the bug happened?
         Note:
-        - Your bug will may get fixed much faster if we can run your code and it doesn't have dependencies other than the `@nextui-org/react` npm package.
+        - Your bug will may get fixed much faster if we can run your code and it doesn't have dependencies other than the `@heroui/react` npm package.
         - To create a shareable code example you can use Stackblitz (https://stackblitz.com/). Please no localhost URLs.
         - Please read these tips for providing a minimal example: https://stackoverflow.com/help/mcve.
       placeholder: |
@@ -105,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

@@ -1,11 +1,14 @@
 blank_issues_enabled: true
 contact_links:
+  - name: 💡 Feature Request
+    url: https://github.com/heroui-inc/heroui/discussions/categories/feature-requests
+    about: 💡 Suggest a new component, improve an existing component and etc
   - name: 🤔 Long question or ideas?
-    url: https://github.com/nextui-org/nextui/discussions
+    url: https://github.com/heroui-inc/heroui/discussions
     about: Ask long-form questions and discuss ideas.
   - 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
+    about: Ask quick questions or simply chat on the `HeroUI` community Discord server.
+  - name: 💬 New Updates (X)
+    url: https://x.com/hero_ui
+    about: Link to our X account if you want to follow us and stay up to date with HeroUI news

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,49 +0,0 @@
-name: Feature request
-title: "[Feature Request] YOUR_FEATURE_TITLE_HERE_REPLACE_ME"
-labels: [feature request]
-description:  |
-  💡 Suggest an idea for the `NextUI` project
-  Examples
-    - propose a new component
-    - improve an exiting component
-    - ....etc
-body:
-  - type: markdown
-    attributes:
-      value: |
-        This issue form is for requesting features only! For example, requesting a new component, behavior ... etc
-        If you want to report a bug, please use the [bug report form](https://github.com/nextui-org/nextui/issues/new?assignees=&labels=&template=bug_report.yml).
-  - type: textarea
-    validations:
-      required: true
-    attributes:
-      label: Is your feature request related to a problem? Please describe.
-      description: A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-  - type: textarea
-    validations:
-      required: true
-    attributes:
-      label: Describe the solution you'd like
-      description: A clear and concise description of what you want to happen.
-      placeholder: |
-        As a user, I expected ___ behavior but ___ ...
-        
-        Ideal Steps I would like to see:
-        1. Go to '...'
-        2. Click on '....'
-        3. ....
-  - type: textarea
-    validations:
-      required: true
-    attributes:
-      label: Describe alternatives you've considered
-      description: A clear and concise description of any alternative solutions or features you've considered.
-  - type: textarea
-    attributes:
-      label: Screenshots or Videos
-      description: |
-        If applicable, add screenshots or a video to help explain your problem.
-        For more information on the supported file image/file types and the file size limits, please refer
-        to the following link: https://docs.github.com/en/github/writing-on-github/working-with-advanced-formatting/attaching-files
-      placeholder: |
-        You can drag your video or image files inside of this editor ↓

.github/pull_request_template.md

@@ -11,18 +11,18 @@ 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):
 
-<!-- If Yes, please describe the impact and migration path for existing NextUI users. -->
+<!-- If Yes, please describe the impact and migration path for existing HeroUI users. -->
 
 ## 📝 Additional Information

.github/workflows/QA.yaml

@@ -70,3 +70,20 @@ jobs:
 
       - name: Run prettier
         run: pnpm format:check
+
+  continuous-release:
+    name: Continuous Release
+    if: github.repository == 'heroui-inc/heroui'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: Build packages
+        run: pnpm build
+
+      - name: Release
+        run: pnpx pkg-pr-new publish --compact --pnpm './packages/components/*' './packages/core/*' './packages/hooks/*' './packages/utilities/*'

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

@@ -0,0 +1,35 @@
+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
+        env:
+          GITHUB_TOKEN: ${{ secrets.GA_ACCESS_TOKEN }}
+        run: |
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config user.name "github-actions[bot]"
+          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-mode.yaml

@@ -0,0 +1,39 @@
+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@v4
+        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
+        env:
+          GITHUB_TOKEN: ${{ secrets.GA_ACCESS_TOKEN }}
+        run: |
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config user.name "github-actions[bot]"
+          git add -A
+          git commit -m "ci(changesets): exit pre-release mode"
+          git push

.github/workflows/pre-release.yaml

@@ -0,0 +1,81 @@
+name: Pre-release
+
+on:
+  push:
+    paths:
+      - ".changeset/**"
+      - "packages/**"
+    branches:
+      - "beta/release-next"
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  prerelease:
+    name: changesets pre-release
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    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: Debug condition values
+        run: |
+          echo "pre.json exists: ${{ steps.check_if_pre_json_exists.outputs.files_exists }}"
+          echo "Commit message: ${{ github.event.head_commit.message }}"
+          echo "Contains version packages: ${{ contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+          echo "Full condition would be: ${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+
+      - name: Check if pre.json exists
+        id: check_if_pre_json_exists
+        uses: andstor/file-existence-action@v3.0.0
+        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: Tests
+        if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+        run: pnpm test
+
+      - name: Build
+        if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+        run: pnpm build
+        env:
+          NODE_OPTIONS: "--max-old-space-size=4096"
+
+      - name: Publish to NPM
+        id: publish-to-npm
+        if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): 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

@@ -15,6 +15,7 @@ jobs:
   release:
     name: Release
     runs-on: ubuntu-latest
+    timeout-minutes: 30
     steps:
       - name: Checkout branch
         uses: actions/checkout@v4
@@ -22,13 +23,22 @@ jobs:
       - name: Install
         uses: ./.github/common-actions/install
 
-      - name: Build
-        run: pnpm build
-
       - name: Tests
         run: pnpm test
 
+      - name: Build
+        id: build
+        continue-on-error: false
+        # Custom turbo build failure information
+        run: |
+          pnpm build || {
+            echo "Turbo build failed with exit code $?"
+            exit 1
+          }
+
       - name: Create Release Pull Request or Publish to NPM
+        # Run only if the build is successful
+        if: steps.build.outcome == 'success'
         id: changesets
         uses: changesets/action@v1
         with:
@@ -41,17 +51,9 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Sync files from canary to main branch if a publish happens
-        if: steps.changesets.outputs.published == 'true'
-        run: |
-          curl -X POST \
-            -H "Accept: application/vnd.github.v3+json" \
-            -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
-            https://api.github.com/repos/owner/repo/dispatches \
-            -d '{"event_type":"sync-canary-to-main"}'
-
       - name: Create canary release
-        if: steps.changesets.outputs.published != 'true'
+        if: steps.build.outcome == 'success' && steps.changesets.outputs.published != 'true'
+        timeout-minutes: 15
         run: |
           git checkout canary
           pnpm version:canary

.github/workflows/sync-canary-to-main.yaml

@@ -1,43 +0,0 @@
-name: Sync Canary to Main
-
-on:
-  # triggered manually in Github
-  workflow_dispatch:
-  # triggered by the type "sync-canary-to-main" (e.g. from release action after publishing)
-  repository_dispatch:
-    types: [sync-canary-to-main]
-
-jobs:
-  create_pull_request:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0  # Ensure all history is fetched
-
-      - name: Create Pull Request
-        uses: repo-sync/pull-request@v2
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          source_branch: "canary"
-          destination_branch: "main"
-          pr_title: "Auto-sync Canary to Main"
-          pr_body: |
-            ## Automated: Sync from Canary to Main
-
-            This Pull Request is automatically generated to sync the changes from the Canary branch to the Main branch. Below are the included updates:
-
-            ###  Triggered by a Direct Push to Canary:
-            - Please check the recent commits on the Canary branch directly as this sync may include multiple changes.
-
-            ### Triggered by a Pull Request Merge:
-            - Merged Pull Request: [PR#${{ github.event.pull_request.number }}](${{ github.event.pull_request.html_url }}) - ${{ github.event.pull_request.title }}
-              - PR Description: ${{ github.event.pull_request.body }}
-              - Merged by: ${{ github.event.pull_request.merged_by.login }}
-
-            ### Action Required:
-            - Please review the changes carefully.
-            - Approve and merge the Pull Request if everything is in order.
-
-            Thank you for maintaining the Main branch updated and clean.

.github/workflows/update-stats.yml

@@ -0,0 +1,42 @@
+name: Update Stats
+
+on:
+  schedule:
+    # Runs every Monday at 00:00 UTC
+    - cron: '0 0 * * 1'
+  # Allow manual trigger
+  workflow_dispatch:
+
+jobs:
+  update-stats:
+    name: Update Stats
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: Update search metadata
+        run: pnpm update:search-meta
+
+      - name: Update GitHub info
+        run: pnpm update:github-info
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v5
+        with:
+          commit-message: "chore(stats): update project statistics"
+          title: "chore(stats): 📊 Update project statistics"
+          body: |
+            This PR updates the project statistics including:
+            - Search metadata
+            - GitHub repository information
+            
+            This is an automated PR generated weekly.
+          branch: chore/update-stats
+          base: main
+          delete-branch: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -56,6 +56,7 @@ packages/**/*.backup.ts
 
 # ignore sitemap
 apps/**/sitemap.xml
+apps/**/sitemap-0.xml
 
 # turbo
 .turbo

.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"

.npmrc

@@ -3,4 +3,4 @@ enable-pre-post-scripts=true
 public-hoist-pattern[]=*tailwind-variants*
 public-hoist-pattern[]=*framer-motion*
 public-hoist-pattern[]=*@react-aria/interactions*
-public-hoist-pattern[]=*@nextui-org/theme*
+public-hoist-pattern[]=*@heroui/theme*

.nvmrc

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

.vscode/settings.json

@@ -10,5 +10,5 @@
   },
   "tailwindCSS.experimental.classRegex": [
     ["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"]
-  ]
+  ],
 }

CONTRIBUTING.md

@@ -1,8 +1,8 @@
-# Next UI Contributing Guide
+# HeroUI Contributing Guide
 
-Hello!, I am very excited that you are interested in contributing with Next UI. However, before submitting your contribution, be sure to take a moment and read the following guidelines.
+Hello!, I am very excited that you are interested in contributing with HeroUI. However, before submitting your contribution, be sure to take a moment and read the following guidelines.
 
-- [Code of Conduct](https://github.com/jrgarciadev/nextui/blob/main/CODE_OF_CONDUCT.md)
+- [Code of Conduct](https://github.com/heroui-inc/heroui/blob/canary/CODE_OF_CONDUCT.md)
 - [Extraction request guidelines](#pull-request-guidelines)
 - [Development Setup](#development-setup)
 - [Tests](#tests)
@@ -71,7 +71,7 @@ https://www.conventionalcommits.org/ or check out the
 
 ### Steps to PR
 
-1. Fork of the nextui repository and clone your fork
+1. Fork of the heroui repository and clone your fork
 
 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`
@@ -79,7 +79,7 @@ https://www.conventionalcommits.org/ or check out the
    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).
+   [commit convention](https://github.com/heroui-inc/heroui/blob/main/CONTRIBUTING.md#commit-convention).
    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.
 
@@ -117,7 +117,7 @@ We use [Turbo Repo](https://turborepo.org/) for the project management.
 2. If you will be working on the components source code, you can use the following command to start the webpack dev server:
 
 ```bash
-## Start the dev babel server of NextUI core components
+## Start the dev babel server of HeroUI core components
 pnpm dev
 
 ## optional
@@ -128,10 +128,10 @@ pnpm dev:docs ## this will start the documentation next.js server and it will au
 ```
 
 - If you will be working just on the documentation source code / mdx, you can use the following commands to build
-  NextUI components and then start the next.js dev server:
+  HeroUI components and then start the next.js dev server:
 
 ```bash
-## Build NextUI source components
+## Build HeroUI source components
 pnpm build
 
 ## Start the next.js documentation dev server
@@ -196,7 +196,7 @@ pnpm build
 npm run build
 ```
 
-> Note: ensure your version of Node is 16 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:
 
@@ -210,13 +210,13 @@ When making a visual change, please provide screenshots
 and/or screencasts of the proposed change. This will help us to understand the
 desired change easier.
 
-Until NextUI has a stable release new components will be created only for the core team.
+Until HeroUI has a stable release new components will be created only for the core team.
 
 ## Documentation
 
 Please update the docs with any API changes, the code and docs should always be in sync.
 
-The main documentation lives in the `apps/docs/content` folder, the project uses MDX and all `NextUI` are already imported.
+The main documentation lives in the `apps/docs/content` folder, the project uses MDX and all `HeroUI` are already imported.
 
 ## Breaking changes
 
@@ -224,7 +224,7 @@ Breaking changes should be accompanied with deprecations of removed functionalit
 
 ## Becoming a maintainer
 
-If you are interested in becoming a NextUI maintainer, start by
+If you are interested in becoming a HeroUI maintainer, start by
 reviewing issues and pull requests. Answer questions for those in need of
 troubleshooting. Join us in the
 [Discord Community](https://discord.gg/9b6yyZKmH4) chat room.
@@ -235,7 +235,7 @@ best to be proactive in reaching out to those that are already helping out.
 GitHub by default does not publicly state that you are a member of the
 organization. Please feel free to change that setting for yourself so others
 will know who's helping out. That can be configured on the [organization
-list](https://github.com/orgs/nextui-org/people) page.
+list](https://github.com/orgs/heroui-inc/people) page.
 
 Being a maintainer is not an obligation. You can help when you have time and be
 less active when you don't. If you get a new job and get busy, that's alright.

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Next UI
+Copyright (c) 2020 Next UI Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

apps/docs/.env.example

@@ -8,6 +8,7 @@ NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY=
 
 # Vercel Env (is used for skipping typescript check)
 IS_VERCEL_ENV=true/false
+IGNORE_BUILD_CHECKS=true/false
 IS_PREVIEW=true/false
 ANALYZE_BUNDLE=true/false
 
@@ -16,4 +17,8 @@ NEXT_PUBLIC_PREVIEW=true/false
 
 ## Featurebase
 NEXT_PUBLIC_FB_FEEDBACK_ORG=
-NEXT_PUBLIC_FB_FEEDBACK_URL=
+NEXT_PUBLIC_FB_FEEDBACK_URL=
+
+# PostHog
+NEXT_PUBLIC_POSTHOG_KEY=your-posthog-key
+NEXT_PUBLIC_POSTHOG_HOST=your-posthog-host

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": {
@@ -22,10 +22,6 @@
     {
       "files": ["*.ts", "*.tsx"],
       "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
     }
   ]
 }

apps/docs/.gitignore

@@ -28,6 +28,7 @@ yarn-error.log*
 # local env files
 .env
 .env*.local
+.dev.vars
 
 # vercel
 .vercel
@@ -35,3 +36,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# cloudflare
+.wrangler
+/.open-next/

apps/docs/.sponsorsrc

@@ -309,28 +309,6 @@
     "github": null,
     "website": "https://encur.me/"
   },
-  {
-    "MemberId": 569973,
-    "createdAt": "2024-05-29 17:51",
-    "type": "USER",
-    "role": "BACKER",
-    "tier": "Gold Sponsor 🥇",
-    "isActive": true,
-    "totalAmountDonated": 100,
-    "currency": "USD",
-    "lastTransactionAt": "2024-05-29 17:51",
-    "lastTransactionAmount": 100,
-    "profile": "https://opencollective.com/maxprilutskiy",
-    "name": "Replexica",
-    "company": "",
-    "description": null,
-    "image": "/sponsors/569973.jpg",
-    "email": null,
-    "newsletterOptIn": null,
-    "twitter": null,
-    "github": null,
-    "website": "https://replexica.com/?utm_source=nextui&utm_marketing=oss"
-  },
   {
     "MemberId": 571230,
     "createdAt": "2024-06-01 18:47",

apps/docs/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Next UI
+Copyright (c) 2020 Next UI Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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

@@ -1,8 +1,8 @@
 import type {Metadata} from "next";
 
 import {notFound} from "next/navigation";
-import {allBlogPosts} from "contentlayer/generated";
-import {Link, User} from "@nextui-org/react";
+import {allBlogPosts} from "contentlayer2/generated";
+import {Link, User} from "@heroui/react";
 import {format, parseISO} from "date-fns";
 import NextLink from "next/link";
 import {Balancer} from "react-wrap-balancer";

apps/docs/app/blog/layout.tsx

@@ -1,4 +1,4 @@
-import {Image} from "@nextui-org/react";
+import {Image} from "@heroui/react";
 
 import {ScriptProviders} from "@/components/scripts/script-providers";
 
@@ -16,13 +16,21 @@ export default function DocsLayout({children}: DocsLayoutProps) {
         aria-hidden="true"
         className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
       >
-        <Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
+        <Image
+          removeWrapper
+          alt="docs left background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-left.png"
+        />
       </div>
       <div
         aria-hidden="true"
         className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
       >
-        <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
+        <Image
+          removeWrapper
+          alt="docs right background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-right.png"
+        />
       </div>
 
       <ScriptProviders />

apps/docs/app/blog/page.tsx

@@ -1,4 +1,4 @@
-import {allBlogPosts} from "contentlayer/generated";
+import {allBlogPosts} from "contentlayer2/generated";
 import {compareDesc} from "date-fns";
 
 import {BlogPostList} from "@/components/blog-post";
@@ -20,8 +20,8 @@ export default function Blog() {
   return (
     <div className="w-full lg:px-16 mt-12">
       <div className="text-center">
-        <h1 className="mb-2 font-bold text-4xl">NextUI Latest Updates</h1>
-        <h5 className="text-default-500 text-lg">All the latest news about NextUI.</h5>
+        <h1 className="mb-2 font-bold text-4xl">HeroUI Latest Updates</h1>
+        <h5 className="text-default-500 text-lg">All the latest news about HeroUI.</h5>
       </div>
       <BlogPostList posts={posts} />
     </div>

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

@@ -1,8 +1,8 @@
 import type {Metadata} from "next";
 
 import {notFound} from "next/navigation";
-import {allDocs} from "contentlayer/generated";
-import {Link} from "@nextui-org/react";
+import {allDocs} from "contentlayer2/generated";
+import {Link} from "@heroui/react";
 
 import {MDXContent} from "@/components/mdx-content";
 import {siteConfig} from "@/config/site";
@@ -83,6 +83,7 @@ export default async function DocPage({params}: DocPageProps) {
   if (!doc) {
     notFound();
   }
+
   const editUrl = `${GITHUB_URL}/${REPO_NAME}/edit/${TAG}${CONTENT_PATH}${currentRoute?.path}`;
 
   return (
@@ -99,7 +100,7 @@ export default async function DocPage({params}: DocPageProps) {
         </footer>
       </div>
       {headings && headings.length > 0 && (
-        <div className="hidden z-10 xl:flex xl:col-span-2 mt-8 pl-4">
+        <div className="hidden z-10 xl:flex xl:col-span-2 mt-8 pl-0">
           <DocsToc headings={headings} />
         </div>
       )}

apps/docs/app/docs/layout.tsx

@@ -1,4 +1,4 @@
-import {Image} from "@nextui-org/react";
+import {Image} from "@heroui/react";
 
 import manifest from "@/config/routes.json";
 import {DocsSidebar} from "@/components/docs/sidebar";
@@ -11,7 +11,7 @@ interface DocsLayoutProps {
 export default function DocsLayout({children}: DocsLayoutProps) {
   return (
     <>
-      <main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
+      <main className="relative container mx-auto max-w-8xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
         <div className="grid grid-cols-12">
           <div className="hidden overflow-visible relative z-10 lg:block lg:col-span-2 mt-8 pr-4">
             <DocsSidebar routes={manifest.routes} />
@@ -21,15 +21,23 @@ export default function DocsLayout({children}: DocsLayoutProps) {
       </main>
       <div
         aria-hidden="true"
-        className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
+        className="fixed hidden dark:md:block dark:opacity-100 -bottom-[30%] -left-[30%] z-0"
       >
-        <Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
+        <Image
+          removeWrapper
+          alt="docs left background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-left.png"
+        />
       </div>
       <div
         aria-hidden="true"
-        className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
+        className="fixed hidden dark:md:block dark:opacity-70 -top-[50%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
       >
-        <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
+        <Image
+          removeWrapper
+          alt="docs right background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-right.png"
+        />
       </div>
 
       <ScriptProviders />

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

@@ -2,7 +2,7 @@
 "use client";
 
 import * as React from "react";
-import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+import {Autocomplete, AutocompleteItem} from "@heroui/react";
 import {useAsyncList} from "@react-stately/data";
 
 type SWCharacter = {

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

@@ -2,8 +2,8 @@
 "use client";
 
 import * as React from "react";
-import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
+import {Autocomplete, AutocompleteItem} from "@heroui/react";
+import {useInfiniteScroll} from "@heroui/use-infinite-scroll";
 
 type Pokemon = {
   name: string;

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

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import {Autocomplete, AutocompleteItem, MenuTriggerAction} from "@nextui-org/react";
+import {Autocomplete, AutocompleteItem, MenuTriggerAction} from "@heroui/react";
 import {useFilter} from "@react-aria/i18n";
 
 const animals = [

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

@@ -1,6 +1,6 @@
 "use client";
 
-import {Card, CardBody, CircularProgress} from "@nextui-org/react";
+import {Card, CardBody, CircularProgress} from "@heroui/react";
 
 export default function ButtonDemo() {
   return (

apps/docs/app/examples/modal/placement/page.tsx

@@ -11,7 +11,7 @@ import {
   RadioGroup,
   Radio,
   ModalProps,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import {useState} from "react";
 
 export default function Page() {
@@ -58,7 +58,7 @@ export default function Page() {
                 </p>
               </ModalBody>
               <ModalFooter>
-                <Button color="danger" variant="light" onClick={onClose}>
+                <Button color="danger" variant="light" onPress={onClose}>
                   Close
                 </Button>
                 <Button color="primary" onPress={onClose}>

apps/docs/app/examples/navbar/bordered/page.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@heroui/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

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

@@ -9,13 +9,10 @@ import {
   NavbarMenuItem,
   NavbarMenuToggle,
   Button,
-  Link as NextUiLink,
-  LinkProps,
-} from "@nextui-org/react";
+  Link,
+} from "@heroui/react";
 import React from "react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path

apps/docs/app/examples/navbar/custom-active-item/page.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@heroui/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

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

@@ -6,16 +6,13 @@ import {
   NavbarContent,
   NavbarItem,
   Button,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   NavbarMenu,
   NavbarMenuItem,
   NavbarMenuToggle,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import React from "react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path

apps/docs/app/examples/navbar/disabled-blur/page.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@heroui/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

apps/docs/app/examples/navbar/hide-on-scroll/page.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@heroui/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

apps/docs/app/examples/navbar/static/page.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@heroui/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

apps/docs/app/examples/navbar/usage/page.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@heroui/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

apps/docs/app/examples/navbar/with-avatar/page.tsx

@@ -5,16 +5,13 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   DropdownItem,
   DropdownTrigger,
   Dropdown,
   DropdownMenu,
   Avatar,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+} from "@heroui/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

apps/docs/app/examples/navbar/with-dropdown-menu/page.tsx

@@ -5,17 +5,14 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   Button,
   DropdownItem,
   DropdownTrigger,
   Dropdown,
   DropdownMenu,
-} from "@nextui-org/react";
-import {ChevronDown, Lock, Activity, Flash, Server, TagUser, Scale} from "@nextui-org/shared-icons";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+} from "@heroui/react";
+import {ChevronDown, Lock, Activity, Flash, Server, TagUser, Scale} from "@heroui/shared-icons";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
@@ -62,42 +59,41 @@ export default function Page() {
           </NavbarItem>
           <DropdownMenu
             aria-label="ACME features"
-            className="w-[340px]"
             itemClasses={{
               base: "gap-4",
             }}
           >
             <DropdownItem
               key="autoscaling"
-              description="ACME scales apps to meet user demand, automagically, based on load."
+              description="ACME scales apps based on demand and load"
               startContent={icons.scale}
             >
               Autoscaling
             </DropdownItem>
             <DropdownItem
               key="usage_metrics"
-              description="Real-time metrics to debug issues. Slow query added? We’ll show you exactly where."
+              description="Real-time metrics to debug issues"
               startContent={icons.activity}
             >
               Usage Metrics
             </DropdownItem>
             <DropdownItem
               key="production_ready"
-              description="ACME runs on ACME, join us and others serving requests at web scale."
+              description="ACME runs on ACME, join us at web scale"
               startContent={icons.flash}
             >
               Production Ready
             </DropdownItem>
             <DropdownItem
               key="99_uptime"
-              description="Applications stay on the grid with high availability and high uptime guarantees."
+              description="High availability and uptime guarantees"
               startContent={icons.server}
             >
               +99% Uptime
             </DropdownItem>
             <DropdownItem
               key="supreme_support"
-              description="Overcome any challenge with a supporting team ready to respond."
+              description="Support team ready to respond"
               startContent={icons.user}
             >
               +Supreme Support

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

@@ -5,17 +5,14 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   Button,
   NavbarMenuToggle,
   NavbarMenu,
   NavbarMenuItem,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import React from "react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path

apps/docs/app/examples/navbar/with-search-input/page.tsx

@@ -5,17 +5,14 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   Input,
   DropdownItem,
   DropdownTrigger,
   Dropdown,
   DropdownMenu,
   Avatar,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+} from "@heroui/react";
 
 import {SearchLinearIcon} from "@/components/icons";
 

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

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

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

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

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

@@ -1,9 +1,9 @@
 /* eslint-disable no-console */
 "use client";
 
-import {Select, SelectItem} from "@nextui-org/react";
+import {Select, SelectItem} from "@heroui/react";
 import {useEffect, useState} from "react";
-import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
+import {useInfiniteScroll} from "@heroui/use-infinite-scroll";
 
 type Pokemon = {
   name: string;

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

@@ -10,7 +10,7 @@ import {
   getKeyValue,
   Spinner,
   Pagination,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import {useMemo, useState} from "react";
 import useSWR from "swr";
 

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

@@ -20,10 +20,10 @@ import {
   ChipProps,
   Pagination,
   SortDescriptor,
-} from "@nextui-org/react";
-import {ChevronDownIcon, SearchIcon} from "@nextui-org/shared-icons";
+} from "@heroui/react";
+import {ChevronDownIcon, SearchIcon} from "@heroui/shared-icons";
 import {useCallback, useMemo, useState} from "react";
-import {capitalize} from "lodash";
+import {capitalize} from "@heroui/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,
@@ -360,9 +360,9 @@ export default function Page() {
                 </Button>
               </DropdownTrigger>
               <DropdownMenu>
-                <DropdownItem>View</DropdownItem>
-                <DropdownItem>Edit</DropdownItem>
-                <DropdownItem>Delete</DropdownItem>
+                <DropdownItem key="view">View</DropdownItem>
+                <DropdownItem key="edit">Edit</DropdownItem>
+                <DropdownItem key="delete">Delete</DropdownItem>
               </DropdownMenu>
             </Dropdown>
           </div>

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

@@ -9,9 +9,9 @@ import {
   TableCell,
   getKeyValue,
   Spinner,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import {useAsyncList} from "@react-stately/data";
-import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
+import {useInfiniteScroll} from "@heroui/use-infinite-scroll";
 import {useState} from "react";
 
 type SWCharacter = {

apps/docs/app/examples/table/load-more/page.tsx

@@ -10,7 +10,7 @@ import {
   getKeyValue,
   Spinner,
   Button,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import {useAsyncList} from "@react-stately/data";
 import {useState} from "react";
 

apps/docs/app/examples/table/sorting/page.tsx

@@ -9,7 +9,7 @@ import {
   TableCell,
   getKeyValue,
   Spinner,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import {useAsyncList} from "@react-stately/data";
 import {useState} from "react";
 

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

@@ -20,10 +20,10 @@ import {
   ChipProps,
   Pagination,
   SortDescriptor,
-} from "@nextui-org/react";
-import {ChevronDownIcon, SearchIcon} from "@nextui-org/shared-icons";
+} from "@heroui/react";
+import {ChevronDownIcon, SearchIcon} from "@heroui/shared-icons";
 import {useCallback, useMemo, useState} from "react";
-import {capitalize} from "lodash";
+import {capitalize} from "@heroui/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,
@@ -352,9 +352,9 @@ export default function Page() {
                 </Button>
               </DropdownTrigger>
               <DropdownMenu>
-                <DropdownItem>View</DropdownItem>
-                <DropdownItem>Edit</DropdownItem>
-                <DropdownItem>Delete</DropdownItem>
+                <DropdownItem key="view">View</DropdownItem>
+                <DropdownItem key="edit">Edit</DropdownItem>
+                <DropdownItem key="delete">Delete</DropdownItem>
               </DropdownMenu>
             </Dropdown>
           </div>

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,51 +0,0 @@
-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 (
-    <>
-      <main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
-        <section className="w-full flex flex-col items-center lg:px-16 mt-12 gap-6">
-          <div className="text-center max-w-xl">
-            <h1 className="mb-2 font-bold text-4xl">NextUI Figma Kit</h1>
-            <h5 className="text-default-500 text-lg">
-              A Figma file that contains the basis of the NextUI design system to help you design
-              your applications.
-            </h5>
-          </div>
-
-          <iframe
-            className="aspect-video w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
-            height="600"
-            src="https://embed.figma.com/file/1267584376234254760/hf_embed?community_viewer=true&embed_host=nextui"
-            title="NextUI Figma Kit"
-            width="800"
-          />
-          <div className="text-center max-w-2xl m-auto">
-            <FigmaButton />
-            <Blockquote color="warning">
-              This file is still in development and will be continuously updated.
-            </Blockquote>
-          </div>
-        </section>
-      </main>
-      <div
-        aria-hidden="true"
-        className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
-      >
-        <Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
-      </div>
-      <div
-        aria-hidden="true"
-        className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
-      >
-        <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
-      </div>
-
-      <ScriptProviders />
-    </>
-  );
-}

apps/docs/app/layout.tsx

@@ -1,14 +1,15 @@
 import "@/styles/globals.css";
 import "@/styles/sandpack.css";
-import {Metadata} from "next";
-import {clsx} from "@nextui-org/shared-utils";
+import {Metadata, Viewport} from "next";
+import {clsx} from "@heroui/shared-utils";
+import {Analytics} from "@vercel/analytics/next";
 
 import {Providers} from "./providers";
 
 import {Cmdk} from "@/components/cmdk";
 import manifest from "@/config/routes.json";
 import {siteConfig} from "@/config/site";
-import {fontSans} from "@/config/fonts";
+import {fonts} from "@/config/fonts";
 import {Navbar} from "@/components/navbar";
 import {Footer} from "@/components/footer";
 import {ProBanner} from "@/components/pro-banner";
@@ -22,8 +23,9 @@ export const metadata: Metadata = {
   keywords: [
     "React",
     "Next.js",
-    "Tailwind CSS",
     "NextUI",
+    "Tailwind CSS",
+    "HeroUI",
     "React Aria",
     "Server Components",
     "React Components",
@@ -33,10 +35,6 @@ export const metadata: Metadata = {
     "UI Framework",
     "UI Design System",
   ],
-  themeColor: [
-    {media: "(prefers-color-scheme: light)", color: "white"},
-    {media: "(prefers-color-scheme: dark)", color: "black"},
-  ],
   icons: {
     icon: "/favicon.ico",
     shortcut: "/favicon-32x32.png",
@@ -47,31 +45,47 @@ export const metadata: Metadata = {
   openGraph: siteConfig.openGraph,
   authors: [
     {
-      name: "jrgarciadev",
-      url: "https://jrgarciadev.com",
+      name: "hero_ui",
+      url: "https://x.com/hero_ui",
     },
   ],
-  creator: "jrgarciadev",
+  creator: "heroui-inc",
   alternates: {
-    canonical: "https://nextui.org",
+    canonical: "https://heroui.com",
     types: {
-      "application/rss+xml": [{url: "https://nextui.org/feed.xml", title: "NextUI RSS Feed"}],
+      "application/rss+xml": [{url: "https://heroui.com/feed.xml", title: "HeroUI RSS Feed"}],
     },
   },
-  viewport:
-    "viewport-fit=cover, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",
+};
+
+export const viewport: Viewport = {
+  themeColor: [
+    {color: "#f4f4f5", media: "(prefers-color-scheme: light)"},
+    {color: "#111111", media: "(prefers-color-scheme: dark)"},
+  ],
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
 };
 
 export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
     <html suppressHydrationWarning dir="ltr" lang="en">
       <head />
-      <body className={clsx("min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
+      <body
+        className={clsx(
+          "min-h-screen bg-background font-sans antialiased",
+          fonts.sans.variable,
+          fonts.mono.variable,
+        )}
+      >
         <Providers themeProps={{attribute: "class", defaultTheme: "dark"}}>
           <div className="relative flex flex-col" id="app-container">
             <ProBanner />
             <Navbar mobileRoutes={manifest.mobileRoutes} routes={manifest.routes} />
             {children}
+            <Analytics mode="production" />
             <Footer />
           </div>
           <Cmdk />

apps/docs/app/page.tsx

@@ -1,4 +1,5 @@
-import {Spacer} from "@nextui-org/spacer";
+import {Spacer} from "@heroui/spacer";
+import {Suspense} from "react";
 
 import {Hero} from "@/components/marketing/hero";
 import {FeaturesGrid} from "@/components/marketing/features-grid";
@@ -9,26 +10,12 @@ import {Customization} from "@/components/marketing/customization";
 import {LastButNotLeast} from "@/components/marketing/last-but-not-least";
 import {InstallBanner} from "@/components/marketing/install-banner";
 import {Community} from "@/components/marketing/community";
-import {Support} from "@/components/marketing/support";
+import Support from "@/components/marketing/support";
 import landingContent from "@/content/landing";
-import {getAllSponsors} from "@/utils/get-all-sponsors";
 import {Sponsors} from "@/components/marketing/sponsors";
-
-async function getData() {
-  try {
-    const sponsors = await getAllSponsors();
-
-    return {
-      sponsors,
-    };
-  } catch (error) {
-    throw new Error("Failed to fetch data");
-  }
-}
+import {HeroUIProSection} from "@/components/marketing/heroui-pro-section";
 
 export default async function Home() {
-  const data = await getData();
-
   return (
     <main className="container mx-auto max-w-7xl px-6 flex-grow">
       <section className="flex flex-col items-center justify-center">
@@ -39,8 +26,11 @@ export default async function Home() {
         <A11yOtb />
         <DarkMode />
         <Customization />
+        <HeroUIProSection />
         <LastButNotLeast />
-        <Support sponsors={data.sponsors} />
+        <Suspense fallback={<div>Loading...</div>}>
+          <Support />
+        </Suspense>
         <Spacer y={24} />
         <InstallBanner />
         <Community />

apps/docs/app/playground/page.tsx

@@ -0,0 +1,33 @@
+import {Image} from "@heroui/react";
+
+import PlaygroundTabs from "./playground-tabs";
+
+export default function FigmaPage() {
+  return (
+    <>
+      <main className="prose prose-neutral relative container mx-auto max-w-3xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
+        <section className="w-full flex flex-col items-center mt-12 gap-6">
+          <div className="text-center">
+            <h1 className="mb-2">Playground</h1>
+          </div>
+        </section>
+        <section>
+          <h3 className="text-medium text-default-500">Components</h3>
+          <PlaygroundTabs />
+        </section>
+      </main>
+      <div
+        aria-hidden="true"
+        className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
+      >
+        <Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
+      </div>
+      <div
+        aria-hidden="true"
+        className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
+      >
+        <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
+      </div>
+    </>
+  );
+}

apps/docs/app/playground/playground-tabs.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import {Tab, Tabs} from "@heroui/react";
+
+export default function BlocksTabs() {
+  return (
+    <Tabs
+      classNames={{
+        cursor: "dark:bg-default-100 bg-default-200",
+      }}
+      radius="full"
+      variant="light"
+    >
+      <Tab key="input" title="Inputs" />
+      <Tab key="button" title="Buttons" />
+      <Tab key="card" title="Cards" />
+    </Tabs>
+  );
+}

apps/docs/app/providers.tsx

@@ -1,22 +1,52 @@
 "use client";
 
 import * as React from "react";
-import {NextUIProvider} from "@nextui-org/react";
+import {HeroUIProvider, ToastProvider} from "@heroui/react";
 import {ThemeProvider as NextThemesProvider} from "next-themes";
-import {ThemeProviderProps} from "next-themes/dist/types";
+import {ThemeProviderProps} from "next-themes";
 import {useRouter} from "next/navigation";
+import {useEffect} from "react";
+import posthog from "posthog-js";
+import {PostHogProvider} from "posthog-js/react";
+
+import {__PROD__} from "@/utils";
 
 export interface ProvidersProps {
   children: React.ReactNode;
   themeProps?: ThemeProviderProps;
 }
 
+const ProviderWrapper = ({children}: {children: React.ReactElement}) => {
+  useEffect(() => {
+    // Initialize PostHog only once when the app starts
+    if (typeof window !== "undefined" && __PROD__ && !posthog.isFeatureEnabled("capture")) {
+      posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
+        api_host: "/ingest",
+        person_profiles: "identified_only",
+        ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+        capture_pageview: false,
+        capture_pageleave: false,
+        capture_heatmaps: false,
+      });
+    }
+  }, []);
+
+  if (__PROD__) {
+    return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+  }
+
+  return children;
+};
+
 export function Providers({children, themeProps}: ProvidersProps) {
   const router = useRouter();
 
   return (
-    <NextUIProvider navigate={router.push}>
-      <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
-    </NextUIProvider>
+    <ProviderWrapper>
+      <HeroUIProvider navigate={router.push}>
+        <ToastProvider />
+        <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
+      </HeroUIProvider>
+    </ProviderWrapper>
   );
 }

apps/docs/app/themes/page.tsx

@@ -0,0 +1,9 @@
+import {ThemeBuilder} from "@/components/themes";
+
+export default function ThemesPage() {
+  return (
+    <div className="flex flex-col md:flex-row gap-6 w-full p-6 py-3 md:pr-[45vw] lg:pr-[30vw] justify-start mt-12 scrollbar-hide">
+      <ThemeBuilder />
+    </div>
+  );
+}

apps/docs/components/ads/carbon-ad/carbon-ad.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, {useCallback, useEffect} from "react";
 import Script from "next/script";
 
@@ -5,7 +7,7 @@ import carbonOptimize from "./carbon-optimize";
 
 import {loadScript} from "@/utils/scripts";
 import {useIsMounted} from "@/hooks/use-is-mounted";
-import {__PROD__} from "@/utils";
+import {__PROD__, __ENABLE_ADS__} from "@/utils";
 
 const EA_PROVIDER_RATIO = 0.85;
 
@@ -94,7 +96,7 @@ export const CarbonAd: React.FC<unknown> = () => {
     };
   }, [isMounted]);
 
-  if (!__PROD__) return null;
+  if (!__PROD__ || !__ENABLE_ADS__) return null;
 
   return (
     <>

apps/docs/components/bg-grid-container.tsx

@@ -1,5 +1,5 @@
 import {ReactNode, FC} from "react";
-import {clsx} from "@nextui-org/shared-utils";
+import {clsx} from "@heroui/shared-utils";
 export interface BgGridContainerProps {
   showGradient?: boolean;
   children?: ReactNode;

apps/docs/components/blog-post.tsx

@@ -1,20 +1,22 @@
 "use client";
 
-import {BlogPost} from "contentlayer/generated";
-import {Card, CardFooter, CardBody, CardHeader, Link, Avatar, Image} from "@nextui-org/react";
+import {BlogPost} from "contentlayer2/generated";
+import {Card, CardFooter, CardBody, CardHeader, Link, Avatar, Image} from "@heroui/react";
 import Balancer from "react-wrap-balancer";
 import {format, parseISO} from "date-fns";
 import NextLink from "next/link";
 import {AnimatePresence, motion} from "framer-motion";
+import {usePostHog} from "posthog-js/react";
 
 import {useIsMounted} from "@/hooks/use-is-mounted";
-import {trackEvent} from "@/utils/va";
 
 const BlogPostCard = (post: BlogPost) => {
   const isMounted = useIsMounted();
 
+  const posthog = usePostHog();
+
   const handlePress = () => {
-    trackEvent("BlogPostCard - Selection", {
+    posthog.capture("BlogPostCard - Selection", {
       name: post.title,
       action: "click",
       category: "blog",
@@ -32,6 +34,7 @@ const BlogPostCard = (post: BlogPost) => {
           transition={{duration: 0.3}}
         >
           <Card
+            disableRipple
             isBlurred
             as={NextLink}
             className="p-2 h-full border-transparent text-start bg-white/5 dark:bg-default-400/10 backdrop-blur-lg backdrop-saturate-[1.8]"
@@ -42,7 +45,7 @@ const BlogPostCard = (post: BlogPost) => {
             <CardHeader>
               <Link
                 as={NextLink}
-                className="font-semibold "
+                className="font-semibold text-foreground"
                 href={post.url}
                 size="lg"
                 underline="hover"

apps/docs/components/blog/nextjs-templates.tsx

@@ -6,17 +6,17 @@ const frameworks = [
     title: "Next.js 13 (App) Template",
     isExternal: true,
     description:
-      "A Next.js 13 with app directory template pre-configured with NextUI (v2) and Tailwind CSS.",
+      "A Next.js 13 with app directory template pre-configured with HeroUI (v2) and Tailwind CSS.",
     icon: <NewNextJSIcon height={40} width={40} />,
-    href: "https://github.com/nextui-org/next-app-template",
+    href: "https://github.com/heroui-inc/next-app-template",
   },
   {
     title: "Next.js 13 (Pages) Template",
     isExternal: true,
     description:
-      "A Next.js 13 with pages directory template pre-configured with NextUI (v2) and Tailwind CSS.",
+      "A Next.js 13 with pages directory template pre-configured with HeroUI (v2) and Tailwind CSS.",
     icon: <NewNextJSIcon height={40} width={40} />,
-    href: "https://github.com/nextui-org/next-pages-template",
+    href: "https://github.com/heroui-inc/next-pages-template",
   },
 ];
 

apps/docs/components/blog/video-in-view.tsx

@@ -3,7 +3,7 @@
 
 import {useInView} from "framer-motion";
 import {useRef, FC, useEffect, useState, useCallback} from "react";
-import {Button, cn, Spinner, Tooltip} from "@nextui-org/react";
+import {Button, cn, Spinner, Tooltip} from "@heroui/react";
 
 import {PlayBoldIcon, PauseBoldIcon} from "@/components/icons";
 import {RotateLeftLinearIcon} from "@/components/icons";

apps/docs/components/cmdk.tsx

@@ -4,17 +4,18 @@
 import {Command} from "cmdk";
 import {useEffect, useState, FC, useMemo, useCallback, useRef} from "react";
 import {matchSorter} from "match-sorter";
-import {Button, ButtonProps, Kbd, Modal, ModalContent} from "@nextui-org/react";
-import {CloseIcon} from "@nextui-org/shared-icons";
+import {Button, ButtonProps, Kbd, Modal, ModalContent} from "@heroui/react";
+import {CloseIcon} from "@heroui/shared-icons";
 import {tv} from "tailwind-variants";
 import {usePathname, useRouter} from "next/navigation";
 import MultiRef from "react-multi-ref";
-import {clsx} from "@nextui-org/shared-utils";
+import {clsx} from "@heroui/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 "@heroui/shared-utils";
 import {writeStorage, useLocalStorage} from "@rehooks/local-storage";
+import {usePostHog} from "posthog-js/react";
 
 import {
   DocumentCodeBoldIcon,
@@ -25,7 +26,6 @@ import {
 
 import searchData from "@/config/search-meta.json";
 import {useUpdateEffect} from "@/hooks/use-update-effect";
-import {trackEvent} from "@/utils/va";
 
 const hideOnPaths = ["examples"];
 
@@ -139,6 +139,8 @@ export const Cmdk: FC<{}> = () => {
 
   const {isOpen, onClose, onOpen} = useCmdkStore();
 
+  const posthog = usePostHog();
+
   const [recentSearches] = useLocalStorage<SearchResultItem[]>(RECENT_SEARCHES_KEY);
 
   const addToRecentSearches = (item: SearchResultItem) => {
@@ -196,7 +198,7 @@ export const Cmdk: FC<{}> = () => {
 
       const matches = intersectionBy(...matchesForEachWord, "objectID").slice(0, MAX_RESULTS);
 
-      trackEvent("Cmdk - Search", {
+      posthog.capture("Cmdk - Search", {
         name: "cmdk - search",
         action: "search",
         category: "cmdk",
@@ -219,7 +221,7 @@ export const Cmdk: FC<{}> = () => {
         e.preventDefault();
         isOpen ? onClose() : onOpen();
 
-        trackEvent("Cmdk - Open/Close", {
+        posthog.capture("Cmdk - Open/Close", {
           name: "cmdk - open/close",
           action: "keydown",
           category: "cmdk",
@@ -241,7 +243,7 @@ export const Cmdk: FC<{}> = () => {
       router.push(item.url);
       addToRecentSearches(item);
 
-      trackEvent("Cmdk - ItemSelect", {
+      posthog.capture("Cmdk - ItemSelect", {
         name: item.content,
         action: "click",
         category: "cmdk",

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

@@ -6,9 +6,9 @@ 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";
+import {clsx} from "@heroui/shared-utils";
 
 import {Pre} from "./pre";
 import {WindowActions} from "./window-actions";
@@ -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}`;
@@ -160,6 +160,6 @@ const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>((_props, forw
   );
 });
 
-CodeBlock.displayName = "NextUI - CodeBlock";
+CodeBlock.displayName = "HeroUI - CodeBlock";
 
 export default CodeBlock;

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

@@ -90,7 +90,7 @@ export const CodeWindow: React.FC<CodeWindowProps> = ({highlightLines, showCopy,
   return (
     <div className="relative">
       <CodeBlock ref={wrapperRef} {...props} />
-      {showCopy && <CopyButton value={props.value} />}
+      {showCopy && <CopyButton className="top-2 absolute right-2" value={props.value} />}
     </div>
   );
 };

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

@@ -1,5 +1,5 @@
 import {forwardRef} from "react";
-import {clsx} from "@nextui-org/shared-utils";
+import {clsx} from "@heroui/shared-utils";
 
 export interface PreProps {
   className?: string;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import {tv} from "tailwind-variants";
-import {clsx} from "@nextui-org/shared-utils";
+import {clsx} from "@heroui/shared-utils";
 
 export type WindowActionsProps = {
   title?: string;

apps/docs/components/copy-button.tsx

@@ -1,6 +1,8 @@
-import {FC} from "react";
-import {Button, ButtonProps} from "@nextui-org/react";
-import {useClipboard} from "@nextui-org/use-clipboard";
+import {ButtonProps} from "@heroui/react";
+import {useClipboard} from "@heroui/use-clipboard";
+import {memo} from "react";
+
+import {PreviewButton} from "./preview-button";
 
 import {CheckLinearIcon, CopyLinearIcon} from "@/components/icons";
 
@@ -8,32 +10,28 @@ export interface CopyButtonProps extends ButtonProps {
   value?: string;
 }
 
-export const CopyButton: FC<CopyButtonProps> = ({value, ...buttonProps}) => {
+export const CopyButton = memo<CopyButtonProps>(({value, className, ...buttonProps}) => {
   const {copy, copied} = useClipboard();
 
+  const icon = copied ? (
+    <CheckLinearIcon
+      className="opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+      data-visible={copied}
+      size={16}
+    />
+  ) : (
+    <CopyLinearIcon
+      className="opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+      data-visible={!copied}
+      size={16}
+    />
+  );
+
   const handleCopy = () => {
     copy(value);
   };
 
-  return (
-    <Button
-      isIconOnly
-      className="absolute z-50 right-3 top-8 border-1 border-transparent bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100 before:rounded-lg"
-      size="sm"
-      variant="bordered"
-      onPress={handleCopy}
-      {...buttonProps}
-    >
-      <CheckLinearIcon
-        className="absolute opacity-0 scale-50 text-zinc-300 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
-        data-visible={copied}
-        size={16}
-      />
-      <CopyLinearIcon
-        className="absolute opacity-0 scale-50 text-zinc-300 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
-        data-visible={!copied}
-        size={16}
-      />
-    </Button>
-  );
-};
+  return <PreviewButton className={className} icon={icon} onPress={handleCopy} {...buttonProps} />;
+});
+
+CopyButton.displayName = "CopyButton";

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

@@ -6,13 +6,12 @@ import {
   Button,
   ModalContent,
   ModalHeader,
-  Link as NextUILink,
+  Link as HeroUILink,
   ModalBody,
   ModalFooter,
   Skeleton,
-} from "@nextui-org/react";
+} from "@heroui/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,9 +56,9 @@ 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/components/${lowerTitle}`}>
+                <HeroUILink as={Link} href={`/docs/components/${lowerTitle}`}>
                   {lowerTitle}
-                </NextUILink>
+                </HeroUILink>
                 &nbsp;docs.
               </>
             )}

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

@@ -1,12 +1,12 @@
 "use client";
 
 import {useRef} from "react";
-import {Button} from "@nextui-org/react";
-
-import {trackEvent} from "@/utils/va";
+import {Button} from "@heroui/react";
+import {usePostHog} from "posthog-js/react";
 
 export const CustomButton = () => {
   const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const posthog = usePostHog();
 
   const handleConfetti = async () => {
     const {clientWidth, clientHeight} = document.documentElement;
@@ -29,7 +29,7 @@ export const CustomButton = () => {
       },
     });
 
-    trackEvent("LandingPage - Confetti Button", {
+    posthog.capture("LandingPage - Confetti Button", {
       action: "press",
       category: "landing-page",
     });

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

@@ -1,8 +1,8 @@
 "use client";
 
-import {Card, CardBody, Button, Image, Slider, CardProps} from "@nextui-org/react";
+import {Card, CardBody, Button, Image, Slider, CardProps} from "@heroui/react";
 import {useState, FC} from "react";
-import {clsx} from "@nextui-org/shared-utils";
+import {clsx} from "@heroui/shared-utils";
 import NextImage from "next/image";
 
 import {
@@ -27,24 +27,23 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
       {...otherProps}
     >
       <CardBody>
-        <div className="grid grid-cols-6 md:grid-cols-12 gap-6 md:gap-4 items-center justify-center">
+        <div className="md:max-h-[200px] grid grid-cols-6 md:grid-cols-12 gap-6 md:gap-4 items-center justify-center">
           <div className="relative col-span-6 md:col-span-4">
             <Image
               alt="Album cover"
               as={NextImage}
               className="object-cover"
-              height={300}
+              height={160}
               shadow="md"
               src="/images/album-cover.png"
               width={240}
             />
           </div>
-
           <div className="flex flex-col col-span-6 md:col-span-8">
             <div className="flex justify-between items-start">
               <div className="flex flex-col gap-0">
-                <p className="font-semibold text-foreground/90">Daily Mix</p>
-                <p className="text-sm text-foreground/80">12 Tracks</p>
+                <p className="text-sm font-semibold text-foreground">Daily Mix</p>
+                <p className="text-xs text-foreground/80">12 Tracks</p>
                 <p className="text-lg font-medium mt-2">Frontend Radio</p>
               </div>
               <Button

apps/docs/components/demos/speed-progress.tsx

@@ -4,7 +4,7 @@ import {
   CircularProgress,
   CircularProgressProps,
   circularProgress,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import {FC} from "react";
 
 const speedProgress = tv({

apps/docs/components/demos/user-twitter-card.tsx

@@ -1,15 +1,14 @@
 "use client";
 
-import {useState, FC} from "react";
-import {Card, CardHeader, Button, Avatar, CardBody, CardFooter} from "@nextui-org/react";
-import {clsx} from "@nextui-org/shared-utils";
-import NextImage from "next/image";
+import {useState} from "react";
+import {Card, CardHeader, Button, Avatar, CardBody, CardFooter} from "@heroui/react";
+import {clsx} from "@heroui/shared-utils";
 
 interface UserTwitterCardProps {
   className?: string;
 }
 
-export const UserTwitterCard: FC<UserTwitterCardProps> = ({className}) => {
+export const UserTwitterCard = ({className}: UserTwitterCardProps) => {
   const [isFollowed, setIsFollowed] = useState(false);
 
   return (
@@ -18,7 +17,6 @@ export const UserTwitterCard: FC<UserTwitterCardProps> = ({className}) => {
         <div className="flex gap-5">
           <Avatar
             isBordered
-            ImgComponent={NextImage}
             alt="Zoey Lang"
             imgProps={{
               width: 40,
@@ -46,7 +44,7 @@ export const UserTwitterCard: FC<UserTwitterCardProps> = ({className}) => {
       </CardHeader>
       <CardBody className="px-3 py-0">
         <p className="text-sm pl-px text-default-400">
-          Full-stack developer, @getnextui lover she/her&nbsp;
+          Full-stack developer, @hero_ui lover she/her&nbsp;
           <span aria-label="confetti" role="img">
             🎉
           </span>

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

@@ -2,7 +2,7 @@
 
 import React, {useCallback, useMemo, useRef} from "react";
 import dynamic from "next/dynamic";
-import {Skeleton, Tab, Tabs} from "@nextui-org/react";
+import {Skeleton, Tab, Tabs} from "@heroui/react";
 import {useInView} from "framer-motion";
 
 import {useCodeDemo, UseCodeDemoProps} from "./use-code-demo";
@@ -58,7 +58,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
   isPreviewCentered = false,
   // when false .js files will be used
   typescriptStrict = false,
-  showOpenInCodeSandbox,
+  showOpenInCodeSandbox = true,
   isGradientBox = false,
   previewHeight = "auto",
   overflow = "visible",
@@ -109,6 +109,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
       <DynamicReactLiveDemo
         className={className}
         code={code}
+        files={files}
         gradientColor={gradientColor}
         height={previewHeight}
         isCentered={isPreviewCentered}
@@ -139,7 +140,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
         files={files}
         highlightedLines={highlightedLines}
         showEditor={showEditor}
-        showOpenInCodeSandbox={showOpenInCodeSandbox || showPreview}
+        showOpenInCodeSandbox={showOpenInCodeSandbox}
         showPreview={showSandpackPreview}
         typescriptStrict={typescriptStrict}
       />

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

@@ -1,15 +1,21 @@
 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 {clsx} from "@heroui/shared-utils";
+import * as HeroUI from "@heroui/react";
 import * as intlDateUtils from "@internationalized/date";
 import * as reactAriaI18n from "@react-aria/i18n";
+import * as reactHookFormBase from "react-hook-form";
+import {SandpackFiles} from "@codesandbox/sandpack-react/types";
 
 import {BgGridContainer} from "@/components/bg-grid-container";
 import {GradientBox, GradientBoxProps} from "@/components/gradient-box";
+import {CopyButton} from "@/components/copy-button";
+import {StackblitzButton} from "@/components/stackblitz-button";
+import {PreviewButton} from "@/components/preview-button";
 
 export interface ReactLiveDemoProps {
   code: string;
+  files: SandpackFiles;
   noInline?: boolean;
   height?: string | number;
   isCentered?: boolean;
@@ -17,27 +23,55 @@ export interface ReactLiveDemoProps {
   className?: string;
   gradientColor?: GradientBoxProps["color"];
   overflow?: "auto" | "visible" | "hidden";
+  typescriptStrict?: boolean;
 }
 
+// 🚨 Do not pass react-hook-form to scope, it will break the live preview since
+// it also has a "Form" component that will override the one from @heroui/react
+const reactHookForm = {
+  useForm: reactHookFormBase.useForm,
+  Controller: reactHookFormBase.Controller,
+};
+
 export const scope = {
-  ...Components,
+  React,
+  ...HeroUI,
   ...intlDateUtils,
   ...reactAriaI18n,
+  ...reactHookForm,
 } as Record<string, unknown>;
 
+const DEFAULT_FILE = "/App.jsx";
+
 export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
   code,
+  files,
   isGradientBox,
   gradientColor = "orange",
   isCentered = false,
   height,
   className,
   noInline,
+  typescriptStrict = false,
 }) => {
   const content = (
     <>
+      {files?.[DEFAULT_FILE] && (
+        <div className="absolute top-[-26px] right-[3px] z-50 flex items-center">
+          <StackblitzButton
+            button={<PreviewButton icon={undefined} />}
+            className="before:hidden opacity-0 group-hover/code-demo:opacity-100 transition-opacity text-zinc-400"
+            files={files}
+            typescriptStrict={typescriptStrict}
+          />
+          <CopyButton
+            className="before:hidden opacity-0 group-hover/code-demo:opacity-100 transition-opacity text-zinc-400"
+            value={files?.[DEFAULT_FILE] as string}
+          />
+        </div>
+      )}
       <LivePreview
-        className={clsx("live-preview flex h-full w-full not-prose", {
+        className={clsx("live-preview flex h-full w-full not-prose ", {
           "justify-center items-center": isCentered,
         })}
         style={{height}}
@@ -58,12 +92,12 @@ export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
           color={gradientColor}
           to="top-right"
         >
-          <div className="max-w-full py-4 px-2 w-full h-full scrollbar-hide overflow-x-scroll">
+          <div className="group/code-demo max-w-full py-4 px-2 w-full h-full scrollbar-hide overflow-x-scroll">
             {content}
           </div>
         </GradientBox>
       ) : (
-        <BgGridContainer className={className}>{content}</BgGridContainer>
+        <BgGridContainer className={clsx(className, "group/code-demo")}>{content}</BgGridContainer>
       )}
     </LiveProvider>
   );

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 importRegex = /^(import\s+(?!type\s+\{)[\s\S]*?;)/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'"
+      // get component name from the match ex. "import { Table } from '@heroui/react'"
       const componentName = match.match(/\w+/g)?.[1] || "";
-      const matchingImport = get(imports, componentName);
+      const matchingImport = imports[componentName];
 
       if (matchingImport) {
         // remove the matching import
@@ -29,7 +31,7 @@ export const transformCode = (code: string, imports = {}, compName = "App") => {
       // replace match with const Name = () => (
       return `const ${compName} = () => {`;
     })
-    .replace("export", "");
+    .replace(/export/g, "");
 
   // add render(<App/>) to cleanedCode if has const App = () => {
   if (cleanedCode.includes(`const App = () => {`)) {

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

@@ -1,7 +1,13 @@
+"use client";
+
+import type {Language, PrismTheme} from "prism-react-renderer";
+
+import {useIntersectionObserver} from "usehooks-ts";
 import React, {forwardRef, useEffect} from "react";
-import {clsx, dataAttr, getUniqueID} from "@nextui-org/shared-utils";
-import BaseHighlight, {Language, PrismTheme, defaultProps} from "prism-react-renderer";
-import {debounce, omit} from "lodash";
+import {clsx, dataAttr, getUniqueID} from "@heroui/shared-utils";
+import BaseHighlight, {defaultProps} from "prism-react-renderer";
+import {debounce, omit} from "@heroui/shared-utils";
+import {cn} from "@heroui/react";
 
 import defaultTheme from "@/libs/prism-theme";
 
@@ -19,17 +25,17 @@ interface CodeblockProps {
 
 type HighlightStyle = "inserted" | "deleted" | undefined;
 
-const nextuiCliCommand = [
-  /^init$/,
-  /^add$/,
-  /^upgrade$/,
-  /^remove$/,
-  /^list$/,
-  /^env$/,
-  /^doctor$/,
-];
+const cliCommands = [/^init$/, /^add$/, /^upgrade$/, /^remove$/, /^list$/, /^env$/, /^doctor$/];
 
-const highlightStyleToken = ["bun", /nextui\s\w+(?=\s?)/, /^nextui$/, "Usage", ...nextuiCliCommand];
+const highlightStyleToken = [
+  "bun",
+  /nextui\s\w+(?=\s?)/,
+  /^nextui$/,
+  /heroui\s\w+(?=\s?)/,
+  /^heroui$/,
+  "Usage",
+  ...cliCommands,
+];
 const RE = /{([\d,-]+)}/;
 
 const calculateLinesToHighlight = (meta?: string) => {
@@ -55,6 +61,153 @@ const calculateLinesToHighlight = (meta?: string) => {
   };
 };
 
+const calculateHeight = (codeString: string) => {
+  const lines = codeString.split("\n").length;
+
+  return lines * 24;
+};
+
+const CodeBlockHighlight = ({
+  codeString,
+  language,
+  codeLang,
+  theme,
+  showLines,
+  removeIndent,
+  hideScrollBar,
+  preRef,
+  isMultiLine,
+  shouldHighlightLine,
+  highlightStyle,
+  className: classNameProp,
+  ...props
+}: CodeblockProps & {
+  codeLang: Language;
+  isMultiLine: boolean;
+  shouldHighlightLine: (index: number) => boolean;
+  highlightStyle: HighlightStyle[];
+  preRef: React.Ref<HTMLElement>;
+}) => {
+  const height = calculateHeight(codeString);
+
+  const [intersectionRef, isVisible] = useIntersectionObserver({
+    threshold: 0,
+  });
+
+  return (
+    <div
+      ref={intersectionRef}
+      style={{
+        height: isVisible ? "auto" : `${height}px`,
+        // due to display: contents on the scrollable child element, this div will also scroll
+        // this causes the intersection observer to trigger if scrolled far enough horizontally
+        // set the width to fit-content to prevent this div from going off screen
+        width: "fit-content",
+      }}
+    >
+      {isVisible ? (
+        <BaseHighlight
+          {...defaultProps}
+          code={codeString}
+          language={codeLang}
+          theme={theme}
+          {...props}
+        >
+          {({className, style, tokens, getLineProps, getTokenProps}) => (
+            <pre
+              ref={(element) => {
+                // Merge the refs
+                if (typeof preRef === "function") {
+                  preRef(element);
+                } else if (preRef) {
+                  // @ts-ignore
+                  preRef.current = element;
+                }
+              }}
+              className={clsx(
+                className,
+                classNameProp,
+                `language-${codeLang}`,
+                "max-w-full contents",
+                {
+                  "flex-col": isMultiLine,
+                  "overflow-x-scroll scrollbar-hide": hideScrollBar,
+                },
+              )}
+              data-language={language}
+              style={style}
+            >
+              {tokens.map((line, i) => {
+                const lineProps = getLineProps({line, key: i});
+
+                return (
+                  <div
+                    {...omit(lineProps, ["key"])}
+                    key={`${i}-${getUniqueID("line-wrapper")}`}
+                    className={clsx(
+                      lineProps.className,
+                      removeIndent ? "pr-4" : "px-4",
+                      "relative [&>span]:relative [&>span]:z-10",
+                      {
+                        "px-2": showLines,
+                      },
+                      {
+                        "before:to-code-background before:absolute before:left-0 before:z-0 before:h-full before:w-full before:bg-gradient-to-r before:from-white/10 before:content-[''] before:pointer-events-none":
+                          shouldHighlightLine(i),
+                      },
+                    )}
+                    data-deleted={dataAttr(highlightStyle?.[i] === "deleted")}
+                    data-inserted={dataAttr(highlightStyle?.[i] === "inserted")}
+                  >
+                    {showLines && (
+                      <span
+                        className={cn(
+                          "mr-6 select-none text-xs opacity-30",
+                          i + 1 >= 10 ? "mr-4" : "",
+                          i + 1 >= 100 ? "mr-2" : "",
+                          i + 1 >= 1000 ? "mr-0" : "",
+                        )}
+                      >
+                        {i + 1}
+                      </span>
+                    )}
+
+                    {line.map((token, key) => {
+                      const props = getTokenProps({token, key}) || {};
+
+                      return (
+                        <span
+                          {...omit(props, ["key"])}
+                          key={`${key}-${getUniqueID("line")}`}
+                          className={className}
+                          style={{
+                            ...props.style,
+                            ...(highlightStyleToken.some((t) => {
+                              const content = token.content.trim();
+
+                              const regex = t instanceof RegExp ? t : new RegExp(t);
+
+                              return regex.test(content);
+                            })
+                              ? {color: "rgb(var(--code-function))"}
+                              : {}),
+                          }}
+                        />
+                      );
+                    })}
+                  </div>
+                );
+              })}
+            </pre>
+          )}
+        </BaseHighlight>
+      ) : (
+        <div className={clsx(classNameProp, "w-full bg-code-background rounded-lg")} />
+      )}
+    </div>
+  );
+};
+
 const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
   (
     {
@@ -134,79 +287,21 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
     }, []);
 
     return (
-      <BaseHighlight
-        {...defaultProps}
-        code={codeString}
-        language={codeLang}
+      <CodeBlockHighlight
+        className={classNameProp}
+        codeLang={codeLang}
+        codeString={codeString}
+        hideScrollBar={hideScrollBar}
+        highlightStyle={highlightStyle}
+        isMultiLine={isMultiLine}
+        language={language}
+        preRef={ref}
+        removeIndent={removeIndent}
+        shouldHighlightLine={shouldHighlightLine}
+        showLines={showLines}
         theme={theme}
         {...props}
-      >
-        {({className, style, tokens, getLineProps, getTokenProps}) => (
-          <div className="w-full" data-language={language}>
-            <pre
-              ref={ref}
-              className={clsx(className, classNameProp, "flex max-w-full", {
-                "flex-col": isMultiLine,
-                "scrollbar-hide overflow-x-scroll": hideScrollBar,
-              })}
-              style={style}
-            >
-              {tokens.map((line, i) => {
-                const lineProps = getLineProps({line, key: i});
-
-                return (
-                  <div
-                    {...omit(lineProps, ["key"])}
-                    key={`${i}-${getUniqueID("line-wrapper")}`}
-                    className={clsx(
-                      lineProps.className,
-                      removeIndent ? "pr-4" : "px-4",
-                      "relative [&>span]:relative [&>span]:z-10",
-                      {
-                        "px-2": showLines,
-                      },
-                      {
-                        "before:content-[''] before:w-full before:h-full before:absolute before:z-0 before:left-0 before:bg-gradient-to-r before:from-white/10 before:to-code-background":
-                          shouldHighlightLine(i),
-                      },
-                    )}
-                    data-deleted={dataAttr(highlightStyle?.[i] === "deleted")}
-                    data-inserted={dataAttr(highlightStyle?.[i] === "inserted")}
-                  >
-                    {showLines && (
-                      <span className="select-none text-xs mr-6 opacity-30">{i + 1}</span>
-                    )}
-                    {line.map((token, key) => {
-                      // Bun has no color style by default in the code block, so hack add in here
-                      const props = getTokenProps({token, key}) || {};
-
-                      return (
-                        <span
-                          {...omit(props, ["key"])}
-                          key={`${key}-${getUniqueID("line")}`}
-                          className={className}
-                          style={{
-                            ...props.style,
-                            ...(highlightStyleToken.some((t) => {
-                              const content = token.content.trim();
-
-                              const regex = t instanceof RegExp ? t : new RegExp(t);
-
-                              return regex.test(content);
-                            })
-                              ? {color: "rgb(var(--code-function))"}
-                              : {}),
-                          }}
-                        />
-                      );
-                    })}
-                  </div>
-                );
-              })}
-            </pre>
-          </div>
-        )}
-      </BaseHighlight>
+      />
     );
   },
 );

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

@@ -1,10 +1,10 @@
-import {Button, ButtonProps, Code, Link, Tooltip} from "@nextui-org/react";
+import {Button, ButtonProps, Code, Link, Tooltip} from "@heroui/react";
 import {ReactNode} from "react";
 import Balancer from "react-wrap-balancer";
+import {usePostHog} from "posthog-js/react";
 
 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;
@@ -26,10 +26,12 @@ const ButtonLink = ({
   href: string;
   tooltip?: string | ReactNode;
 }) => {
+  const posthog = usePostHog();
+
   const handlePress = () => {
     if (!href) return;
 
-    trackEvent("ComponentLinks - Click", {
+    posthog.capture("ComponentLinks - Click", {
       category: "docs",
       action: "click",
       data: href || "",
@@ -76,7 +78,7 @@ export const ComponentLinks = ({
   return (
     <div className="flex flex-wrap gap-3 mt-6">
       <ButtonLink
-        href={`https://storybook.nextui.org/?path=/story/components-${
+        href={`https://storybook.heroui.com/?path=/story/components-${
           storybook || component
         }--default`}
         startContent={<StorybookIcon className="text-lg text-[#ff4785]" />}
@@ -84,10 +86,10 @@ export const ComponentLinks = ({
         Storybook
       </ButtonLink>
       <ButtonLink
-        href={`https://www.npmjs.com/package/@nextui-org/${npm || component}`}
+        href={`https://www.npmjs.com/package/@heroui/${npm || component}`}
         startContent={<NpmIcon className="text-2xl text-[#E53E3E]" />}
       >
-        {`@nextui-org/${npm || component}`}
+        {`@heroui/${npm || component}`}
       </ButtonLink>
       {reactAriaHook && (
         <ButtonLink

apps/docs/components/docs/components/frameworks.tsx

@@ -4,25 +4,21 @@ import {FeaturesGrid} from "@/components/marketing/features-grid";
 const frameworks = [
   {
     title: "Next.js",
-    description: "Full-featured React framework with great developer experience.",
     icon: <NewNextJSIcon height={40} width={40} />,
     href: "/docs/frameworks/nextjs",
   },
   {
     title: "Vite",
-    description: "Fast and modern development server and build tool.",
     icon: <ViteIcon height={40} width={40} />,
     href: "/docs/frameworks/vite",
   },
   {
     title: "Remix",
-    description: "Full stack framework focused on web fundamentals and modern UX.",
     icon: <RemixIcon className="text-foreground" height={40} width={40} />,
     href: "/docs/frameworks/remix",
   },
   {
     title: "Astro",
-    description: "The all-in-one web framework designed for speed.",
     icon: <AstroIcon className="text-foreground" height={40} width={40} />,
     href: "/docs/frameworks/astro",
   },
@@ -33,8 +29,8 @@ export const Frameworks = () => {
     <FeaturesGrid
       classNames={{
         base: "mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4",
+        header: "pb-3",
         iconWrapper: "bg-default-300/20",
-        body: "py-0",
       }}
       features={frameworks}
     />

apps/docs/components/docs/components/helper.ts

@@ -0,0 +1,209 @@
+import type Highlight from "prism-react-renderer";
+
+export type TransformTokens = Parameters<Highlight["props"]["children"]>[0]["tokens"];
+
+export type TransformTokensTypes = TransformTokens[0][0] & {
+  folderContent?: TransformTokens;
+  summaryContent?: TransformTokens[0];
+  class?: string;
+  index?: number;
+  open?: boolean;
+};
+
+const startFlag = ["{", "["];
+const endFlag = ["}", "]"];
+const isElementStartRegex = /^\s*</;
+const isElementEndRegex = /^\s*<\//;
+
+/**
+ * Transform tokens from `prism-react-renderer` to wrap them in folder structure
+ *
+ * @example
+ * transformTokens(tokens) -> wrap tokens in folder structure
+ */
+export function transformTokens(tokens: TransformTokens, folderLine = 10) {
+  const result: TransformTokens = [];
+  let lastIndex = 0;
+  let startElementName = "";
+
+  tokens.forEach((token, index) => {
+    if (index < lastIndex) {
+      return;
+    }
+    token.forEach((t) => {
+      (t as TransformTokensTypes).index = index;
+    });
+    result.push(token);
+
+    const lineContent = getLineContent(token);
+    const {isStartTag, isEndTag} = checkIsElement(lineContent);
+
+    // If it has startElementName means it is within the element range
+    if (startElementName) {
+      if (isEndTag) {
+        // Judge whether it is the end tag of the element then reset startElementName
+        const {endElementName} = getElementName(lineContent);
+
+        if (endElementName === startElementName) {
+          startElementName = "";
+        }
+      }
+
+      return;
+    } else if (isStartTag) {
+      const {startElementName: elementName, endElementName} = getElementName(lineContent);
+
+      if (!endElementName) {
+        startElementName = elementName;
+
+        return;
+      }
+    }
+
+    let startToken: TransformTokens[0][0] = null as any;
+
+    token.forEach((t) => {
+      if (startFlag.includes(t.content)) {
+        startToken = t;
+      }
+    });
+
+    const isFolder = checkIsFolder(token);
+
+    if (isFolder && startToken) {
+      const nextLineContent = tokens.slice(index + 1, index + 2).reduce((acc, line) => {
+        return acc + getLineContent(line);
+      }, "");
+      const isNextLineObjectFolder = checkIsObjectContent(nextLineContent);
+      const isArrayFolder = lineContent.trim().endsWith("[");
+
+      if (isNextLineObjectFolder || isArrayFolder) {
+        const endIndex = findEndIndex(tokens, index + 1);
+
+        // Greater than or equal to folderLine then will folder otherwise it will show directly
+        if (endIndex !== -1 && endIndex - index >= folderLine) {
+          lastIndex = endIndex;
+          const folder = tokens.slice(index + 1, endIndex);
+          const endToken = tokens[endIndex];
+
+          (endToken[0] as TransformTokensTypes).class = "first-custom-folder";
+
+          const ellipsisToken: TransformTokensTypes = {
+            types: ["ellipsis"],
+            content: "",
+            class: "custom-folder ellipsis-token",
+          };
+          const copyContent: TransformTokensTypes = {
+            types: ["copy"],
+            content: "",
+            folderContent: folder,
+            class: "custom-folder copy-token",
+          };
+
+          endToken.forEach((t, _, arr) => {
+            let className = (t as TransformTokensTypes).class || "";
+
+            className += " custom-folder";
+            if (t.content.trim() === "" && (arr.length === 3 || arr.length === 4)) {
+              // Add length check to sure it's added to } token
+              className += " empty-token";
+            }
+            (t as TransformTokensTypes).class = className;
+          });
+
+          startToken.types = ["folderStart"];
+          (startToken as TransformTokensTypes).folderContent = folder;
+          (startToken as TransformTokensTypes).summaryContent = [
+            ...token,
+            ellipsisToken,
+            copyContent,
+            ...endToken,
+          ];
+          (startToken as TransformTokensTypes).index = index;
+          // isShowFolder && ((startToken as TransformTokensTypes).open = true);
+
+          result.splice(result.length - 1, 1, [startToken]);
+
+          return;
+        }
+      }
+    }
+  });
+
+  return result;
+}
+
+function checkIsFolder(token: TransformTokens[0]) {
+  const stack: string[] = [];
+
+  for (const t of token) {
+    if (startFlag.includes(t.content)) {
+      stack.push(t.content);
+    } else if (endFlag.includes(t.content)) {
+      stack.pop();
+    }
+  }
+
+  return stack.length !== 0;
+}
+
+function findEndIndex(tokens: TransformTokens, startIndex: number) {
+  const stack: string[] = ["flag"];
+
+  for (let i = startIndex; i < tokens.length; i++) {
+    const token = tokens[i];
+
+    for (const line of token) {
+      const transformLine = line.content.replace(/\$/g, "");
+
+      if (startFlag.includes(transformLine)) {
+        stack.push("flag");
+      } else if (endFlag.includes(transformLine)) {
+        stack.pop();
+      }
+
+      if (stack.length === 0) {
+        return i;
+      }
+    }
+  }
+
+  return -1;
+}
+
+function checkIsElement(lineContent: string) {
+  return {
+    isStartTag: isElementStartRegex.test(lineContent),
+    isEndTag: isElementEndRegex.test(lineContent),
+  };
+}
+
+function getElementName(lineContent: string) {
+  const startElementName = lineContent.match(/^\s*<([a-zA-Z.]+)/);
+  const endElementName = lineContent.match(/^\s*<\/([a-zA-Z.]+)>/);
+
+  return {
+    startElementName: startElementName?.[1] || (lineContent.includes("<>") ? "<>" : ""),
+    endElementName: endElementName?.[1] || (lineContent.includes("</>") ? "</>" : ""),
+  };
+}
+
+function getLineContent(token: TransformTokens[0]) {
+  return token.reduce((acc, t) => acc + t.content, "");
+}
+
+function checkIsObjectContent(lineContent: string) {
+  lineContent = lineContent.trim();
+  // first: match { a }
+  // second: match { a: b }
+  // third: match { a (b) }
+  // fourth: match /** */
+  const isObjectContent = /^([\w]+,?$)|([\w\[.\]]+:)|([\w]+\s?\(.*?\)$)|(^\/\*\*)/.test(
+    lineContent,
+  );
+  const hasEqual = /\s=\s/.test(lineContent);
+  const hasFunction = lineContent.includes("function");
+  const hasVariable = /var|let|const/.test(lineContent);
+
+  return isObjectContent && !hasEqual && !hasFunction && !hasVariable;
+}

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

@@ -1,4 +1,4 @@
-import {Tabs, Tab, Snippet} from "@nextui-org/react";
+import {Tabs, Tab, Snippet} from "@heroui/react";
 
 import Codeblock from "./codeblock";
 
@@ -26,7 +26,7 @@ export const ImportTabs = ({commands}: ImportTabsProps) => {
   return (
     <Tabs
       disableAnimation
-      aria-label="NextUI import commands"
+      aria-label="HeroUI import commands"
       classNames={{
         base: "group mt-4",
         tabList: "relative h-10",

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

@@ -1,4 +1,6 @@
-import {Tabs, Tab, Snippet, Code} from "@nextui-org/react";
+"use client";
+
+import {Tabs, Tab, Snippet, Code} from "@heroui/react";
 import {Key, useState} from "react";
 
 import Codeblock from "./codeblock";
@@ -58,7 +60,7 @@ export const PackageManagers = ({
   return (
     <>
       <Tabs
-        aria-label="NextUI installation commands"
+        aria-label="HeroUI installation commands"
         classNames={{
           base: "group mt-4 min-w-[300px] w-full overflow-x-auto",
           tabList: "h-10",
@@ -97,9 +99,10 @@ export const PackageManagers = ({
         })}
       </Tabs>
       {showGlobalInstallWarning && (
-        <Blockquote className="my-2" color="warning">
+        <Blockquote className="my-2 text-base md:text-small" color="warning">
           The above command is for individual installation only. You may skip this step if{" "}
-          <Code>@nextui-org/react</Code> is already installed globally.
+          <Code className="px-1 py-0.5 text-small md:text-tiny font-mono">@heroui/react</Code> is
+          already installed globally.
         </Blockquote>
       )}
     </>

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

@@ -1,10 +1,10 @@
 import {parseToRgba, readableColor} from "color2k";
-import {Button, Tooltip} from "@nextui-org/react";
-import {commonColors, semanticColors} from "@nextui-org/theme";
-import {useClipboard} from "@nextui-org/use-clipboard";
+import {Button, Tooltip} from "@heroui/react";
+import {commonColors, semanticColors} from "@heroui/theme";
+import {useClipboard} from "@heroui/use-clipboard";
 import {useState} from "react";
 import {useTheme} from "next-themes";
-import {get, isEmpty} from "lodash";
+import {get, isEmpty} from "@heroui/shared-utils";
 
 type ColorsItem = {
   color: string;
@@ -106,7 +106,7 @@ const SemanticSwatch = ({
   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`, "");

apps/docs/components/docs/heroui-pro-callout.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import {usePostHog} from "posthog-js/react";
+import NextLink from "next/link";
+
+export const HeroUIProCallout = () => {
+  const posthog = usePostHog();
+
+  const handleClick = () => {
+    posthog.capture("HeroUI Pro Banner", {
+      action: "click",
+      category: "heroui-callout",
+    });
+  };
+
+  return (
+    <div className="relative w-full max-w-[12rem] flex flex-col items-center border border-default/60 hover:border-default/90 rounded-xl py-6 px-2 cursor-pointer">
+      <div>
+        <p className="leading-[1.025] tracking-tight text-center text-large font-semibold">
+          Ship&nbsp;
+          <span className="bg-clip-text text-transparent bg-gradient-to-b from-[#5EA2EF] to-[#0072F5]">
+            faster
+          </span>
+          <br />
+          with beautiful
+          <br />
+          components
+        </p>
+        <p className="text-center text-xs mt-2 px-3 font-medium text-default-500 dark:text-default-400 leading-tight">
+          Discover 210+ stunning components by HeroUI
+        </p>
+      </div>
+      <div className="mt-3 w-fit flex group items-center text-foreground hover:shadow-sm relative overflow-hidden rounded-full p-[2px]">
+        <span className="absolute inset-[-1000%] bg-[conic-gradient(from_90deg_at_50%_50%,#338EF7_0%,#F54180_50%,#338EF7_100%)]" />
+        <div className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-background transition-background p-2.5 text-xs font-medium hover:font-semibold text-foreground backdrop-blur-3xl">
+          Explore Components
+        </div>
+      </div>
+      <NextLink
+        className="absolute inset-0 z-[1]"
+        href="https://heroui.pro/components?utm_source=heroui.com&utm_medium=callout"
+        onClick={handleClick}
+      />
+    </div>
+  );
+};

apps/docs/components/docs/pager.tsx

@@ -1,15 +1,15 @@
 "use client";
 
 import * as React from "react";
-import {Link} from "@nextui-org/react";
+import {Link} from "@heroui/react";
+import {usePostHog} from "posthog-js/react";
 import {useRouter} from "next/navigation";
-import {ChevronIcon} from "@nextui-org/shared-icons";
+import {ChevronIcon} from "@heroui/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;
@@ -20,8 +20,10 @@ export const DocsPager: React.FC<FooterNavProps> = ({currentRoute}) => {
 
   const {prevRoute, nextRoute} = useDocsRoute(manifest.routes, currentRoute);
 
+  const posthog = usePostHog();
+
   const handlePress = (path: string) => {
-    trackEvent("DocsPager - Click", {
+    posthog.capture("DocsPager - Click", {
       category: "docs",
       action: "click",
       data: path || "",

apps/docs/components/docs/sidebar.tsx

@@ -1,24 +1,23 @@
 "use client";
 
-import {FC, useEffect, useState} from "react";
-import {ChevronIcon} from "@nextui-org/shared-icons";
+import {FC, useEffect, useState, useRef, useMemo, useLayoutEffect} from "react";
+import {usePostHog} from "posthog-js/react";
+import {ChevronIcon} from "@heroui/shared-icons";
 import {CollectionBase, Expandable, MultipleSelection, Node, ItemProps} from "@react-types/shared";
-import {BaseItem} from "@nextui-org/aria-utils";
-import React, {useRef, useMemo} from "react";
+import {BaseItem} from "@heroui/aria-utils";
 import {useFocusRing} from "@react-aria/focus";
 import {TreeState, useTreeState} from "@react-stately/tree";
 import {useSelectableCollection} from "@react-aria/selection";
 import {usePress} from "@react-aria/interactions";
-import {clsx, dataAttr} from "@nextui-org/shared-utils";
+import {clsx, dataAttr, debounce, isEmpty} from "@heroui/shared-utils";
 import {
   SpacerProps,
   Spacer,
-  Link as NextUILink,
+  Link as HeroUILink,
   Chip,
   dataFocusVisibleClasses,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import Link from "next/link";
-import {isEmpty} from "lodash";
 import {usePathname, useRouter} from "next/navigation";
 
 import {ScrollArea} from "../scroll-area";
@@ -27,11 +26,6 @@ import {getRoutePaths} from "./utils";
 
 import {Route} from "@/libs/docs/page";
 import {TreeKeyboardDelegate} from "@/utils/tree-keyboard-delegate";
-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 {
@@ -66,6 +60,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
 
   const router = useRouter();
   const pathname = usePathname();
+  const posthog = usePostHog();
 
   const paths = item.props.path
     ? getRoutePaths(item.props.path, item.props?.tag)
@@ -109,7 +104,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
       } else {
         router.push(paths.pathname);
 
-        trackEvent("SidebarDocs", {
+        posthog.capture("SidebarDocs", {
           category: "docs",
           action: "click",
           data: paths.pathname || "",
@@ -120,28 +115,11 @@ function TreeItem<T>(props: TreeItemProps<T>) {
 
   const {focusProps, isFocused, isFocusVisible} = useFocusRing();
 
-  const renderFeaturebaseComponent = (key: string) => {
-    if (key === "roadmap")
-      return <FbRoadmapLink className={cn} innerClassName="opacity-80 dark:opacity-60" />;
-    if (key === "changelog")
-      return (
-        <NextUILink as={Link} className={cn} color="foreground" href="#">
-          <FbChangelogButton />
-        </NextUILink>
-      );
-
-    return (
-      <NextUILink as={Link} className={cn} color="foreground" href="#" onClick={openFeedbackWidget}>
-        <FbFeedbackButton />
-      </NextUILink>
-    );
-  };
-
   const renderComponent = () => {
     if (hasChildNodes) {
       return (
         <span className="flex items-center gap-3">
-          <span>{rendered}</span>
+          <span className="font-medium sm:text-sm">{rendered}</span>
           <ChevronIcon
             className={clsx("transition-transform", {
               "-rotate-90": isExpanded,
@@ -151,14 +129,18 @@ function TreeItem<T>(props: TreeItemProps<T>) {
       );
     }
 
-    if (typeof key === "string" && ["changelog", "feedback", "roadmap"].includes(key)) {
-      return renderFeaturebaseComponent(key);
-    }
-
     return (
-      <NextUILink as={Link} className={clsx(cn)} color="foreground" href={paths.pathname}>
+      <HeroUILink
+        as={item.props?.comingSoon ? "div" : Link}
+        className={clsx(cn, {
+          "pointer-events-none": item.props?.comingSoon,
+        })}
+        color="foreground"
+        href={item.props?.comingSoon ? "#" : paths.pathname}
+      >
         <span
           className={clsx(
+            "sm:text-sm",
             isSelected
               ? "text-primary font-medium dark:text-foreground"
               : "opacity-80 dark:opacity-60",
@@ -171,7 +153,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
         </span>
         {isUpdated && (
           <Chip
-            className="ml-1 py-1 text-tiny text-default-400 bg-default-100/50"
+            className="ml-1 py-1 font-medium text-tiny text-default-500 dark:text-default-400 bg-default-100 dark:bg-default-100/50"
             color="default"
             size="sm"
             variant="flat"
@@ -180,16 +162,26 @@ function TreeItem<T>(props: TreeItemProps<T>) {
           </Chip>
         )}
         {isNew && (
-          <Chip className="ml-1 py-1 text-tiny" color="primary" size="sm" variant="flat">
+          <Chip
+            className="font-medium ml-1 py-1 text-tiny"
+            color="primary"
+            size="sm"
+            variant="flat"
+          >
             New
           </Chip>
         )}
         {item.props?.comingSoon && (
-          <Chip className="ml-1 py-1 text-tiny" color="default" size="sm" variant="flat">
+          <Chip
+            className="font-medium ml-1 py-1 text-tiny"
+            color="secondary"
+            size="sm"
+            variant="flat"
+          >
             Coming soon
           </Chip>
         )}
-      </NextUILink>
+      </HeroUILink>
     );
   };
 
@@ -200,8 +192,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
       aria-expanded={dataAttr(hasChildNodes ? isExpanded : undefined)}
       aria-selected={dataAttr(isSelected)}
       className={clsx(
-        "flex flex-col gap-3outline-none w-full tap-highlight-transparent",
-
+        "flex flex-col outline-none w-full tap-highlight-transparent",
         hasChildNodes ? "mb-4" : "first:mt-4",
         // focus ring
         ...dataFocusVisibleClasses,
@@ -210,7 +201,12 @@ function TreeItem<T>(props: TreeItemProps<T>) {
       data-focused={isFocused}
       role="treeitem"
     >
-      <div className="flex items-center gap-3 cursor-pointer" {...pressProps}>
+      <div
+        className={clsx("flex items-center gap-3 cursor-pointer", {
+          "pointer-events-none": item.props?.comingSoon,
+        })}
+        {...(item.props?.comingSoon ? {} : pressProps)}
+      >
         <Spacer x={spaceLeft} />
         {renderComponent()}
         {/* Workaround to avoid scrollbar overlapping */}
@@ -245,6 +241,8 @@ function Tree<T extends object>(props: CollectionBase<T> & Expandable & Multiple
 
   let ref = useRef<HTMLDivElement>(null);
 
+  const scrollViewPortRef = useRef<HTMLDivElement>(null);
+
   let keyboardDelegate = useMemo(
     // @ts-expect-error
     () => new TreeKeyboardDelegate(state.collection, state.disabledKeys),
@@ -257,12 +255,36 @@ function Tree<T extends object>(props: CollectionBase<T> & Expandable & Multiple
     keyboardDelegate,
   });
 
+  /*  Handle scroll preservation */
+  useLayoutEffect(() => {
+    if (typeof window !== "undefined") {
+      const savedPosition = sessionStorage.getItem("docsSidebarScrollPosition");
+
+      if (savedPosition && scrollViewPortRef.current) {
+        scrollViewPortRef.current.scrollTop = Number(savedPosition);
+      }
+    }
+  }, []);
+
+  const handleScroll = () => {
+    if (typeof window !== "undefined" && scrollViewPortRef.current) {
+      sessionStorage.setItem(
+        "docsSidebarScrollPosition",
+        scrollViewPortRef.current.scrollTop.toString(),
+      );
+    }
+  };
+
+  const debouncedHandleScroll = debounce(handleScroll, 200);
+
   return (
     <ScrollArea
       ref={ref}
-      className="h-full lg:max-h-[calc(100vh_-_64px)]"
+      className="h-full max-w-[90%] lg:max-h-[calc(100vh_-_64px)]"
       role="tree"
       {...collectionProps}
+      scrollViewPortRef={scrollViewPortRef}
+      onScroll={debouncedHandleScroll}
     >
       {[...state.collection].map((item) => {
         if (item.type === "section") {
@@ -319,7 +341,7 @@ export const DocsSidebar: FC<DocsSidebarProps> = ({routes, slug, tag, className}
         )}
       </Tree>
     );
-  }, [routes]);
+  }, [routes, slug, tag]);
 
   return (
     <div

apps/docs/components/docs/toc.tsx

@@ -1,11 +1,13 @@
 "use client";
 
 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";
+import {clsx} from "@heroui/shared-utils";
+import {Divider, Spacer} from "@heroui/react";
+import {ChevronCircleTopLinearIcon} from "@heroui/shared-icons";
 import scrollIntoView from "scroll-into-view-if-needed";
 
+import {HeroUIProCallout} from "./heroui-pro-callout";
+
 import {Heading} from "@/libs/docs/utils";
 import {useScrollSpy} from "@/hooks/use-scroll-spy";
 import {useScrollPosition} from "@/hooks/use-scroll-position";
@@ -19,7 +21,7 @@ const paddingLeftByLevel: Record<number, string> = {
   1: "pl-0",
   2: "pl-0",
   3: "pl-3",
-  4: "pl-3",
+  4: "pl-6",
 };
 
 export const DocsToc: FC<DocsTocProps> = ({headings}) => {
@@ -65,64 +67,64 @@ export const DocsToc: FC<DocsTocProps> = ({headings}) => {
   }, []);
 
   return (
-    <div
-      ref={tocRef}
-      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%"
-        }, transparent 100%)`,
-      }}
-    >
-      <p className="text-sm">On this page</p>
-      <ul className="scrollbar-hide flex flex-col gap-2">
-        {headings.map(
-          (heading, i) =>
-            heading.level > 1 && (
-              <li
-                key={i}
-                className={clsx(
-                  "transition-colors",
-                  "font-normal",
-                  "flex items-center text-sm font-normal text-default-500 dark:text-default-300",
-                  "data-[active=true]:text-foreground",
-                  "dark:data-[active=true]:text-foreground",
-                  "before:content-['']",
-                  "before:opacity-0",
-                  "data-[active=true]:before:opacity-100",
-                  "before:transition-opacity",
-                  "before:-ml-3",
-                  "before:absolute",
-                  "before:bg-default-400",
-                  "before:w-1",
-                  "before:h-1",
-                  "before:rounded-full",
-                  paddingLeftByLevel[heading.level],
-                )}
-                data-active={activeId == heading.id}
-              >
-                <a href={`#${heading.id}`}>{heading.text}</a>
-              </li>
-            ),
-        )}
-        <li
-          className="mt-2 opacity-0 data-[visible=true]:opacity-100 transition-opacity"
-          data-visible={activeIndex >= 2}
-        >
-          <Divider />
-          <Spacer y={2} />
-          <a
-            className="flex gap-2 items-center text-sm text-default-500 dark:text-foreground/30 hover:text-foreground/80 pl-4 transition-opacity"
-            href={`#${firstId}`}
+    <div className={clsx("fixed", isProBannerVisible ? "top-32" : "top-20")}>
+      <div
+        ref={tocRef}
+        className="w-full max-w-[12rem] max-h-[calc(100vh-500px)] flex flex-col gap-4 text-left pb-16 scrollbar-hide overflow-y-scroll"
+        style={{
+          WebkitMaskImage: `linear-gradient(to top, transparent 0%, #000 100px, #000 ${
+            scrollPosition > 30 ? "90%" : "100%"
+          }, transparent 100%)`,
+        }}
+      >
+        <p className="text-sm font-medium">On this page</p>
+        <ul className="scrollbar-hide flex flex-col gap-2">
+          {headings.map(
+            (heading, i) =>
+              heading.level > 1 && (
+                <li
+                  key={i}
+                  className={clsx(
+                    "transition-colors",
+                    "font-normal",
+                    "flex items-center text-tiny font-normal text-default-500 dark:text-default-300",
+                    "data-[active=true]:text-foreground",
+                    "dark:data-[active=true]:text-foreground",
+                    "before:content-['']",
+                    "before:opacity-0",
+                    "data-[active=true]:before:opacity-100",
+                    "before:transition-opacity",
+                    "before:-ml-3",
+                    "before:absolute",
+                    "before:bg-default-400",
+                    "before:w-1",
+                    "before:h-1",
+                    "before:rounded-full",
+                    paddingLeftByLevel[heading.level],
+                  )}
+                  data-active={activeId == heading.id}
+                >
+                  <a href={`#${heading.id}`}>{heading.text}</a>
+                </li>
+              ),
+          )}
+          <li
+            className="mt-2 opacity-0 data-[visible=true]:opacity-100 transition-opacity"
+            data-visible={activeIndex >= 2}
           >
-            Back to top
-            <ChevronCircleTopLinearIcon />
-          </a>
-        </li>
-      </ul>
+            <Divider />
+            <Spacer y={2} />
+            <a
+              className="flex gap-2 items-center text-tiny text-default-500 dark:text-foreground/30 hover:text-foreground/80 pl-4 transition-opacity"
+              href={`#${firstId}`}
+            >
+              Back to top
+              <ChevronCircleTopLinearIcon />
+            </a>
+          </li>
+        </ul>
+      </div>
+      <HeroUIProCallout />
     </div>
   );
 };

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

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

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

@@ -1,11 +1,10 @@
 "use client";
 
 import NextLink from "next/link";
+import {usePostHog} from "posthog-js/react";
 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";
+import {clsx} from "@heroui/shared-utils";
 
 type Props = {
   className?: string;
@@ -13,8 +12,10 @@ type Props = {
 };
 
 export const FbRoadmapLink = ({className, innerClassName}: Props) => {
+  const posthog = usePostHog();
+
   const fbLinkOnClick = () => {
-    trackEvent("Featurebase - Roadmap", {
+    posthog.capture("Featurebase - Roadmap", {
       name: "featurebase-roadmap",
       action: "press",
       category: "featurebase",