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: |

.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.
+    about: Ask quick questions or simply chat on the `HeroUI` community Discord server.
   - name: 💬 New Updates (X)
-    url: https://x.com/getnextui
-    about: Link to our X account if you want to follow us and stay up to date with NextUI news
+    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

@@ -23,6 +23,6 @@ Closes # <!-- Github issue # here -->
 
 ## 💣 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/release.yaml

@@ -27,9 +27,18 @@ jobs:
         run: pnpm test
 
       - name: Build
-        run: pnpm 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:
@@ -43,7 +52,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - 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

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

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
@@ -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
 

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/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

@@ -2,7 +2,7 @@ import type {Metadata} from "next";
 
 import {notFound} from "next/navigation";
 import {allBlogPosts} from "contentlayer2/generated";
-import {Link, User} from "@nextui-org/react";
+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

@@ -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

@@ -2,7 +2,7 @@ import type {Metadata} from "next";
 
 import {notFound} from "next/navigation";
 import {allDocs} from "contentlayer2/generated";
-import {Link} from "@nextui-org/react";
+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";
@@ -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

@@ -16,7 +16,7 @@ import {
   Pagination,
   extendVariants,
   PaginationItem,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import {useFilter} from "@react-aria/i18n";
 import {useEffect, useMemo, useRef, useState} from "react";
 import {useSearchParams} from "next/navigation";
@@ -390,7 +390,7 @@ const usersData = [
   },
 ];
 
-export default function NextUIPerf() {
+export default function HeroUIPerf() {
   const [textA, setTextA] = useState<string>("");
   const [textB, setTextB] = useState<string>("");
   const [textC, setTextC] = useState<string>("");
@@ -430,7 +430,7 @@ export default function NextUIPerf() {
         autoCorrect="off"
         className="z-10 sticky top-1"
         placeholder="Search..."
-        spellCheck={false}
+        spellCheck="false"
         startContent={<SearchLinearIcon className="text-default-400" size={18} strokeWidth="2" />}
         type="text"
         onValueChange={setInputValue}

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 "@nextui-org/shared-utils";
+import {capitalize} from "@heroui/shared-utils";
 
 import {PlusLinearIcon} from "@/components/icons";
 import {VerticalDotsIcon} from "@/components/icons/vertical-dots";
@@ -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 "@nextui-org/shared-utils";
+import {capitalize} from "@heroui/shared-utils";
 
 import {PlusLinearIcon} from "@/components/icons";
 import {VerticalDotsIcon} from "@/components/icons/vertical-dots";
@@ -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/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,7 +1,8 @@
 import "@/styles/globals.css";
 import "@/styles/sandpack.css";
 import {Metadata, Viewport} from "next";
-import {clsx} from "@nextui-org/shared-utils";
+import {clsx} from "@heroui/shared-utils";
+import {Analytics} from "@vercel/analytics/next";
 
 import {Providers} from "./providers";
 
@@ -22,8 +23,9 @@ export const metadata: Metadata = {
   keywords: [
     "React",
     "Next.js",
-    "Tailwind CSS",
     "NextUI",
+    "Tailwind CSS",
+    "HeroUI",
     "React Aria",
     "Server Components",
     "React Components",
@@ -43,15 +45,15 @@ export const metadata: Metadata = {
   openGraph: siteConfig.openGraph,
   authors: [
     {
-      name: "getnextui",
-      url: "https://x.com/getnextui",
+      name: "hero_ui",
+      url: "https://x.com/hero_ui",
     },
   ],
-  creator: "getnextui",
+  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"}],
     },
   },
 };
@@ -83,6 +85,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
             <ProBanner />
             <Navbar mobileRoutes={manifest.mobileRoutes} routes={manifest.routes} />
             {children}
+            <Analytics mode="production" />
             <Footer />
           </div>
           <Cmdk />

apps/docs/app/page.tsx

@@ -1,4 +1,4 @@
-import {Spacer} from "@nextui-org/spacer";
+import {Spacer} from "@heroui/spacer";
 import {Suspense} from "react";
 
 import {Hero} from "@/components/marketing/hero";
@@ -13,7 +13,7 @@ import {Community} from "@/components/marketing/community";
 import Support from "@/components/marketing/support";
 import landingContent from "@/content/landing";
 import {Sponsors} from "@/components/marketing/sponsors";
-import {NextUIProSection} from "@/components/marketing/nextui-pro-section";
+import {HeroUIProSection} from "@/components/marketing/heroui-pro-section";
 
 export default async function Home() {
   return (
@@ -26,7 +26,7 @@ export default async function Home() {
         <A11yOtb />
         <DarkMode />
         <Customization />
-        <NextUIProSection />
+        <HeroUIProSection />
         <LastButNotLeast />
         <Suspense fallback={<div>Loading...</div>}>
           <Support />

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,9 +1,7 @@
 "use client";
 
-import type {ReactNode} from "react";
-
 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";
 import {useRouter} from "next/navigation";
@@ -18,32 +16,37 @@ export interface ProvidersProps {
   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();
 
-  const ProviderWrapper = ({children}: {children: ReactNode}) => {
-    useEffect(() => {
-      if (typeof window !== "undefined" && __PROD__) {
-        posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
-          api_host: "/ingest",
-          person_profiles: "identified_only",
-          ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
-        });
-      }
-    }, []);
-
-    if (__PROD__) {
-      return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
-    }
-
-    return children;
-  };
-
   return (
     <ProviderWrapper>
-      <NextUIProvider navigate={router.push}>
+      <HeroUIProvider navigate={router.push}>
+        <ToastProvider />
         <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
-      </NextUIProvider>
+      </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/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,7 +1,7 @@
 "use client";
 
 import {BlogPost} from "contentlayer2/generated";
-import {Card, CardFooter, CardBody, CardHeader, Link, Avatar, Image} from "@nextui-org/react";
+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";
@@ -45,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,16 +4,16 @@
 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 {isEmpty, intersectionBy} from "@nextui-org/shared-utils";
+import {isEmpty, intersectionBy} from "@heroui/shared-utils";
 import {writeStorage, useLocalStorage} from "@rehooks/local-storage";
 import {usePostHog} from "posthog-js/react";
 

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

@@ -8,7 +8,7 @@ import css from "refractor/lang/css";
 import diff from "refractor/lang/diff";
 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";
@@ -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,7 +1,8 @@
-import {FC} from "react";
-import {Button, ButtonProps} from "@nextui-org/react";
-import {useClipboard} from "@nextui-org/use-clipboard";
-import {clsx} from "@nextui-org/shared-utils";
+import {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";
 
@@ -9,35 +10,28 @@ export interface CopyButtonProps extends ButtonProps {
   value?: string;
 }
 
-export const CopyButton: FC<CopyButtonProps> = ({value, className, ...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={clsx(
-        "absolute z-50 right-3 text-zinc-300 top-8 border-1 border-transparent bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100 before:rounded-lg",
-        className,
-      )}
-      size="sm"
-      variant="bordered"
-      onPress={handleCopy}
-      {...buttonProps}
-    >
-      <CheckLinearIcon
-        className="absolute opacity-0 scale-50 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 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,11 +6,11 @@ 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 {CodeWindow} from "@/components/code-window";
@@ -56,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,7 +1,7 @@
 "use client";
 
 import {useRef} from "react";
-import {Button} from "@nextui-org/react";
+import {Button} from "@heroui/react";
 import {usePostHog} from "posthog-js/react";
 
 export const CustomButton = () => {

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 {

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,8 +1,8 @@
 "use client";
 
 import {useState} from "react";
-import {Card, CardHeader, Button, Avatar, CardBody, CardFooter} from "@nextui-org/react";
-import {clsx} from "@nextui-org/shared-utils";
+import {Card, CardHeader, Button, Avatar, CardBody, CardFooter} from "@heroui/react";
+import {clsx} from "@heroui/shared-utils";
 
 interface UserTwitterCardProps {
   className?: string;
@@ -44,7 +44,7 @@ export const UserTwitterCard = ({className}: UserTwitterCardProps) => {
       </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";

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

@@ -1,7 +1,7 @@
 import React from "react";
 import {LivePreview, LiveProvider, LiveError} from "react-live";
-import {clsx} from "@nextui-org/shared-utils";
-import * as NextUI 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";
@@ -10,6 +10,8 @@ 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;
@@ -21,10 +23,11 @@ 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 @nextui-org/react
+// it also has a "Form" component that will override the one from @heroui/react
 const reactHookForm = {
   useForm: reactHookFormBase.useForm,
   Controller: reactHookFormBase.Controller,
@@ -32,7 +35,7 @@ const reactHookForm = {
 
 export const scope = {
   React,
-  ...NextUI,
+  ...HeroUI,
   ...intlDateUtils,
   ...reactAriaI18n,
   ...reactHookForm,
@@ -49,11 +52,18 @@ export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
   height,
   className,
   noInline,
+  typescriptStrict = false,
 }) => {
   const content = (
     <>
       {files?.[DEFAULT_FILE] && (
-        <div className="absolute top-[-28px] right-[-8px] z-50">
+        <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}

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

@@ -11,7 +11,7 @@ export const transformCode = (
 ) => {
   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 = imports[componentName];
 

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

@@ -4,10 +4,10 @@ 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 {clsx, dataAttr, getUniqueID} from "@heroui/shared-utils";
 import BaseHighlight, {defaultProps} from "prism-react-renderer";
-import {debounce, omit} from "@nextui-org/shared-utils";
-import {cn} from "@nextui-org/react";
+import {debounce, omit} from "@heroui/shared-utils";
+import {cn} from "@heroui/react";
 
 import defaultTheme from "@/libs/prism-theme";
 
@@ -25,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) => {
@@ -99,6 +99,10 @@ const CodeBlockHighlight = ({
       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 ? (

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

@@ -1,4 +1,4 @@
-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";
@@ -78,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]" />}
@@ -86,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/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,6 +1,6 @@
 "use client";
 
-import {Tabs, Tab, Snippet, Code} from "@nextui-org/react";
+import {Tabs, Tab, Snippet, Code} from "@heroui/react";
 import {Key, useState} from "react";
 
 import Codeblock from "./codeblock";
@@ -60,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",
@@ -99,10 +99,10 @@ export const PackageManagers = ({
         })}
       </Tabs>
       {showGlobalInstallWarning && (
-        <Blockquote className="my-2 text-small" 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 className="px-1 py-0.5 text-tiny font-mono">@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 "@nextui-org/shared-utils";
+import {get, isEmpty} from "@heroui/shared-utils";
 
 type ColorsItem = {
   color: string;

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,10 +1,10 @@
 "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";

apps/docs/components/docs/sidebar.tsx

@@ -1,25 +1,23 @@
 "use client";
 
-import {FC, useEffect, useState} from "react";
+import {FC, useEffect, useState, useRef, useMemo, useLayoutEffect} from "react";
 import {usePostHog} from "posthog-js/react";
-import {ChevronIcon} from "@nextui-org/shared-icons";
+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 "@nextui-org/shared-utils";
 import {usePathname, useRouter} from "next/navigation";
 
 import {ScrollArea} from "../scroll-area";
@@ -132,7 +130,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
     }
 
     return (
-      <NextUILink
+      <HeroUILink
         as={item.props?.comingSoon ? "div" : Link}
         className={clsx(cn, {
           "pointer-events-none": item.props?.comingSoon,
@@ -183,7 +181,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
             Coming soon
           </Chip>
         )}
-      </NextUILink>
+      </HeroUILink>
     );
   };
 
@@ -243,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),
@@ -255,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 max-w-[90%] lg:max-h-[calc(100vh_-_64px)]"
       role="tree"
       {...collectionProps}
+      scrollViewPortRef={scrollViewPortRef}
+      onScroll={debouncedHandleScroll}
     >
       {[...state.collection].map((item) => {
         if (item.type === "section") {
@@ -317,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";
@@ -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 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-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-small 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-roadmap-link.tsx

@@ -4,7 +4,7 @@ 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 {clsx} from "@heroui/shared-utils";
 
 type Props = {
   className?: string;

apps/docs/components/figma-button.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import {Button, Link} from "@nextui-org/react";
+import {Button, Link} from "@heroui/react";
 import {usePostHog} from "posthog-js/react";
 
 export const FigmaButton = () => {

apps/docs/components/footer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import {usePathname} from "next/navigation";
-import {Link} from "@nextui-org/react";
+import {Link} from "@heroui/react";
 
 import {getCurrentYear} from "@/utils/time";
 import {XIcon, GithubIcon, DiscordIcon} from "@/components/icons";

apps/docs/components/heroui-logo.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+import {cn} from "@heroui/theme";
+
+import {IconSvgProps} from "@/types";
+import {dataAttr} from "@/utils";
+export interface LogoProps extends IconSvgProps {
+  auto?: boolean;
+  small?: boolean;
+  outlined?: boolean;
+  fill?: string;
+  className?: string;
+}
+
+export const SmallLogoOutlined: React.FC<LogoProps> = ({
+  auto,
+  size,
+  width,
+  height,
+  className,
+  ...props
+}) => (
+  <svg
+    className={cn("data-[auto=true]:sm:hidden block text-foreground", className)}
+    data-auto={dataAttr(auto)}
+    fill="none"
+    height={height || size || 25}
+    viewBox="0 0 126 126"
+    width={width || size || 25}
+    {...props}
+  >
+    <path
+      d="M33.3529 5H92.6471C108.306 5 121 17.694 121 33.3529V92.6471C121 108.306 108.306 121 92.6471 121H33.3529C17.694 121 5 108.306 5 92.6471V33.3529C5 17.694 17.694 5 33.3529 5Z"
+      stroke="currentColor"
+      strokeWidth="10"
+    />
+    <path d="M94.9539 36V89.6887H86.3363V36H94.9539Z" fill="currentColor" />
+    <path
+      d="M69.0885 36H77.7339V71.3118C77.7339 75.0694 76.795 78.3987 74.9172 81.2998C73.0394 84.1835 70.3993 86.4555 66.9969 88.1158C63.5945 89.7586 59.6064 90.58 55.0327 90.58C50.4776 90.58 46.4988 89.7586 43.0964 88.1158C39.694 86.4555 37.0539 84.1835 35.1761 81.2998C33.2983 78.3987 32.3594 75.0694 32.3594 71.3118V36H40.9769V70.6565C40.9769 73.0857 41.544 75.2441 42.6781 77.1316C43.8308 79.0191 45.4577 80.5046 47.5586 81.5882C49.6595 82.6543 52.1509 83.1873 55.0327 83.1873C57.9331 83.1873 60.4338 82.6543 62.5347 81.5882C64.6542 80.5046 66.2718 79.0191 67.3873 77.1316C68.5214 75.2441 69.0885 73.0857 69.0885 70.6565V36Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const SmallLogo: React.FC<LogoProps> = ({
+  auto,
+  size,
+  width,
+  height,
+  className,
+  ...props
+}) => (
+  <svg
+    className={cn("data-[auto=true]:sm:hidden block text-foreground", className)}
+    data-auto={dataAttr(auto)}
+    fill="none"
+    height={height || size || 25}
+    viewBox="0 0 126 126"
+    width={width || size || 25}
+    {...props}
+  >
+    <path
+      d="M92.6471 0H33.3529C14.9326 0 0 14.9326 0 33.3529V92.6471C0 111.067 14.9326 126 33.3529 126H92.6471C111.067 126 126 111.067 126 92.6471V33.3529C126 14.9326 111.067 0 92.6471 0Z"
+      fill="currentColor"
+    />
+    <path className="fill-background" d="M86.3181 89.4661V36H92.9271V89.4661H86.3181Z" />
+    <path
+      className="fill-background"
+      d="M54.0894 90.58C49.9557 90.58 46.3046 89.726 43.1363 88.0181C39.9679 86.3101 37.4803 83.9215 35.6733 80.8521C33.8911 77.758 33 74.1317 33 69.9733V36.0371L39.6833 36V69.4163C39.6833 71.9411 40.1041 74.1441 40.9457 76.0253C41.812 77.8818 42.9506 79.4289 44.3616 80.6665C45.7725 81.9041 47.3195 82.8324 49.0027 83.4512C50.7107 84.0453 52.4062 84.3423 54.0894 84.3423C55.7974 84.3423 57.5053 84.0329 59.2133 83.4141C60.9212 82.7952 62.4682 81.8794 63.8544 80.6665C65.2653 79.4289 66.3916 77.8694 67.2332 75.9882C68.0748 74.107 68.4956 71.9164 68.4956 69.4163V36H75.1788V69.9733C75.1788 74.107 74.2754 77.7209 72.4684 80.815C70.6862 83.9091 68.2109 86.3101 65.0425 88.0181C61.8742 89.726 58.2231 90.58 54.0894 90.58Z"
+    />
+  </svg>
+);
+
+export const LargeLogo: React.FC<LogoProps> = ({auto, className, ...props}) => (
+  <svg
+    className={cn(
+      "data-[auto=true]:hidden data-[auto=true]:sm:block block text-foreground",
+      className,
+    )}
+    data-auto={dataAttr(auto)}
+    fill="none"
+    viewBox="0 0 384 96"
+    {...props}
+  >
+    <path d="M374.28 93.12V0.959961H383.688V93.12H374.28Z" fill="currentColor" />
+    <path
+      d="M319.093 95.04C312.053 95.04 305.824 93.5893 300.405 90.688C295.029 87.7866 290.805 83.6906 287.733 78.4C284.661 73.1093 283.125 66.9226 283.125 59.84V1.02396L292.597 0.959961V58.624C292.597 63.4026 293.408 67.5413 295.029 71.04C296.65 74.496 298.762 77.3546 301.365 79.616C304.01 81.8346 306.89 83.4773 310.005 84.544C313.12 85.6106 316.149 86.144 319.093 86.144C322.08 86.144 325.13 85.6106 328.245 84.544C331.36 83.4773 334.218 81.8346 336.821 79.616C339.424 77.3546 341.536 74.496 343.157 71.04C344.778 67.5413 345.589 63.4026 345.589 58.624V0.959961H355.061V59.84C355.061 66.9226 353.525 73.1093 350.453 78.4C347.381 83.648 343.136 87.744 337.717 90.688C332.341 93.5893 326.133 95.04 319.093 95.04Z"
+      fill="currentColor"
+    />
+    <path
+      d="M236.239 95.04C229.37 95.04 223.503 93.4827 218.639 90.368C213.775 87.2534 210.042 82.944 207.439 77.44C204.836 71.936 203.535 65.6214 203.535 58.496C203.535 51.2427 204.858 44.8854 207.503 39.424C210.148 33.9627 213.903 29.7173 218.767 26.688C223.674 23.616 229.498 22.08 236.239 22.08C243.151 22.08 249.039 23.6373 253.903 26.752C258.81 29.824 262.543 34.112 265.103 39.616C267.706 45.0774 269.007 51.3707 269.007 58.496C269.007 65.7494 267.706 72.128 265.103 77.632C262.5 83.0934 258.746 87.36 253.839 90.432C248.932 93.504 243.066 95.04 236.239 95.04ZM236.239 86.016C243.919 86.016 249.636 83.4773 253.391 78.4C257.146 73.28 259.023 66.6454 259.023 58.496C259.023 50.1333 257.124 43.4773 253.327 38.528C249.572 33.5787 243.876 31.104 236.239 31.104C231.076 31.104 226.81 32.2773 223.439 34.624C220.111 36.928 217.615 40.1494 215.951 44.288C214.33 48.384 213.519 53.12 213.519 58.496C213.519 66.816 215.439 73.4933 219.279 78.528C223.119 83.52 228.772 86.016 236.239 86.016Z"
+      fill="currentColor"
+    />
+    <path
+      d="M162.5 93.12V24H170.948V40.64L169.284 38.464C170.052 36.416 171.055 34.5387 172.292 32.832C173.529 31.0827 174.873 29.6533 176.324 28.544C178.116 26.9653 180.207 25.7707 182.596 24.96C184.985 24.1067 187.396 23.616 189.828 23.488C192.26 23.3173 194.479 23.488 196.484 24V32.832C193.967 32.192 191.215 32.0427 188.228 32.384C185.241 32.7253 182.489 33.92 179.972 35.968C177.668 37.76 175.94 39.9147 174.788 42.432C173.636 44.9067 172.868 47.552 172.484 50.368C172.1 53.1413 171.908 55.8933 171.908 58.624V93.12H162.5Z"
+      fill="currentColor"
+    />
+    <path
+      d="M116.873 95.04C110.132 95.04 104.286 93.5467 99.337 90.56C94.4304 87.5734 90.6117 83.3707 87.881 77.952C85.1504 72.5334 83.785 66.176 83.785 58.88C83.785 51.328 85.129 44.8 87.817 39.296C90.505 33.792 94.281 29.5467 99.145 26.56C104.052 23.5733 109.833 22.08 116.489 22.08C123.316 22.08 129.14 23.6587 133.961 26.816C138.782 29.9307 142.43 34.4107 144.905 40.256C147.38 46.1014 148.51 53.0773 148.297 61.184H138.697V57.856C138.526 48.896 136.585 42.1333 132.873 37.568C129.204 33.0027 123.828 30.72 116.745 30.72C109.321 30.72 103.625 33.1307 99.657 37.952C95.7317 42.7734 93.769 49.6427 93.769 58.56C93.769 67.264 95.7317 74.0267 99.657 78.848C103.625 83.6267 109.236 86.016 116.489 86.016C121.438 86.016 125.748 84.8853 129.417 82.624C133.129 80.32 136.052 77.0134 138.185 72.704L146.953 76.096C144.222 82.112 140.19 86.784 134.857 90.112C129.566 93.3974 123.572 95.04 116.873 95.04ZM99 61.184V53.312H143.241V61.184H99Z"
+      fill="currentColor"
+    />
+    <path
+      d="M0 93.12V0.959961H9.408V42.496H60.352V0.959961H69.696V93.12H60.352V51.52H9.408V93.12H0Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const HeroUILogo: React.FC<LogoProps> = ({auto, small, outlined, ...props}) => {
+  if (outlined) {
+    return <SmallLogoOutlined {...props} />;
+  }
+
+  if (auto) {
+    return (
+      <div>
+        <SmallLogo auto={auto} {...props} />
+        <LargeLogo auto={auto} {...props} />
+      </div>
+    );
+  }
+
+  if (small) {
+    return <SmallLogo {...props} />;
+  }
+
+  return <LargeLogo auto={auto} {...props} />;
+};

apps/docs/components/icons/crop.tsx

@@ -0,0 +1,39 @@
+import {IconSvgProps} from "@/types";
+
+export const CropMinimalistic = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-label="Minimalistic Crop"
+    focusable="false"
+    height={size || height}
+    viewBox="0 0 20 20"
+    width={size || width}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      clipRule="evenodd"
+      d="M4.16699 1.04169C4.51217 1.04169 4.79199 1.32151 4.79199 1.66669V9.16669C4.79199 10.7557 4.79332 11.8846 4.90846 12.741C5.02118 13.5794 5.23257 14.0624 5.58524 14.4151C5.93792 14.7678 6.42096 14.9792 7.25937 15.0919C8.11575 15.207 9.24464 15.2084 10.8337 15.2084H18.3337C18.6788 15.2084 18.9587 15.4882 18.9587 15.8334C18.9587 16.1785 18.6788 16.4584 18.3337 16.4584H16.4587V18.3334C16.4587 18.6785 16.1788 18.9584 15.8337 18.9584C15.4885 18.9584 15.2087 18.6785 15.2087 18.3334V16.4584H10.7867C9.25518 16.4584 8.04215 16.4584 7.09281 16.3307C6.11579 16.1994 5.325 15.9226 4.70136 15.299C4.07773 14.6754 3.80096 13.8846 3.6696 12.9075C3.54197 11.9582 3.54198 10.7452 3.54199 9.2137L3.54199 4.79169H1.66699C1.32181 4.79169 1.04199 4.51187 1.04199 4.16669C1.04199 3.82151 1.32181 3.54169 1.66699 3.54169H3.54199V1.66669C3.54199 1.32151 3.82181 1.04169 4.16699 1.04169ZM12.7413 4.90815C11.8849 4.79301 10.756 4.79169 9.16699 4.79169H6.66699C6.32181 4.79169 6.04199 4.51187 6.04199 4.16669C6.04199 3.82151 6.32181 3.54169 6.66699 3.54169L9.21401 3.54169C10.7455 3.54167 11.9585 3.54166 12.9078 3.6693C13.8849 3.80066 14.6757 4.07742 15.2993 4.70106C15.9229 5.32469 16.1997 6.11548 16.331 7.0925C16.4587 8.04185 16.4587 9.25488 16.4587 10.7863V13.3334C16.4587 13.6785 16.1788 13.9584 15.8337 13.9584C15.4885 13.9584 15.2087 13.6785 15.2087 13.3334V10.8334C15.2087 9.24434 15.2073 8.11545 15.0922 7.25906C14.9795 6.42065 14.7681 5.93761 14.4154 5.58494C14.0627 5.23226 13.5797 5.02087 12.7413 4.90815Z"
+      fill="#A1A1AA"
+      fillRule="evenodd"
+    />
+  </svg>
+);
+
+export const Crop = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-label="Crop"
+    focusable="false"
+    height={size || height}
+    viewBox="0 0 20 20"
+    width={size || width}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      clipRule="evenodd"
+      d="M4.16699 1.04163C4.51217 1.04163 4.79199 1.32145 4.79199 1.66663V9.16663C4.79199 10.7556 4.79332 11.8845 4.90846 12.7409C5.02118 13.5793 5.23257 14.0624 5.58524 14.415C5.93792 14.7677 6.42096 14.9791 7.25937 15.0918C8.11575 15.207 9.24464 15.2083 10.8337 15.2083H18.3337C18.6788 15.2083 18.9587 15.4881 18.9587 15.8333C18.9587 16.1785 18.6788 16.4583 18.3337 16.4583H16.4587V18.3333C16.4587 18.6785 16.1788 18.9583 15.8337 18.9583C15.4885 18.9583 15.2087 18.6785 15.2087 18.3333V16.4583H10.7867C9.25518 16.4583 8.04215 16.4583 7.09281 16.3307C6.11579 16.1993 5.325 15.9226 4.70136 15.2989C4.07773 14.6753 3.80096 13.8845 3.6696 12.9075C3.54197 11.9581 3.54198 10.7451 3.54199 9.21364L3.54199 4.79163H1.66699C1.32181 4.79163 1.04199 4.5118 1.04199 4.16663C1.04199 3.82145 1.32181 3.54163 1.66699 3.54163H3.54199V1.66663C3.54199 1.32145 3.82181 1.04163 4.16699 1.04163ZM12.7413 4.90809C11.8849 4.79295 10.756 4.79163 9.16699 4.79163H6.66699C6.32181 4.79163 6.04199 4.5118 6.04199 4.16663C6.04199 3.82145 6.32181 3.54163 6.66699 3.54163L9.21401 3.54163C10.7455 3.54161 11.9585 3.5416 12.9078 3.66924C13.8849 3.80059 14.6757 4.07736 15.2993 4.701C15.9229 5.32463 16.1997 6.11542 16.331 7.09244C16.4587 8.04179 16.4587 9.25482 16.4587 10.7863V13.3333C16.4587 13.6785 16.1788 13.9583 15.8337 13.9583C15.4885 13.9583 15.2087 13.6785 15.2087 13.3333V10.8333C15.2087 9.24428 15.2073 8.11539 15.0922 7.259C14.9795 6.42059 14.7681 5.93755 14.4154 5.58488C14.0627 5.2322 13.5797 5.02081 12.7413 4.90809ZM9.54252 6.45829H10.4581C11.0122 6.45826 11.4896 6.45823 11.8719 6.50963C12.2816 6.56471 12.6743 6.68893 12.9928 7.00747C13.3114 7.32601 13.4356 7.71873 13.4907 8.12842C13.5421 8.51071 13.542 8.9881 13.542 9.54215V10.4578C13.542 11.0118 13.5421 11.4892 13.4907 11.8715C13.4356 12.2812 13.3114 12.6739 12.9928 12.9925C12.6743 13.311 12.2816 13.4352 11.8719 13.4903C11.4896 13.5417 11.0122 13.5417 10.4581 13.5416H9.54252C8.98846 13.5417 8.51108 13.5417 8.12879 13.4903C7.71909 13.4352 7.32637 13.311 7.00783 12.9925C6.68929 12.6739 6.56508 12.2812 6.51 11.8715C6.4586 11.4892 6.45863 11.0118 6.45866 10.4578V9.54215C6.45863 8.9881 6.4586 8.51071 6.51 8.12842C6.56508 7.71873 6.68929 7.32601 7.00783 7.00747C7.32637 6.68893 7.71909 6.56471 8.12879 6.50963C8.51108 6.45823 8.98846 6.45826 9.54252 6.45829ZM8.29535 7.74848C8.02426 7.78493 7.93929 7.84377 7.89172 7.89135C7.84414 7.93893 7.7853 8.0239 7.74885 8.29498C7.70999 8.58405 7.70866 8.97637 7.70866 9.58329V10.4166C7.70866 11.0236 7.70999 11.4159 7.74885 11.7049C7.7853 11.976 7.84414 12.061 7.89172 12.1086C7.93929 12.1561 8.02426 12.215 8.29535 12.2514C8.58442 12.2903 8.97674 12.2916 9.58366 12.2916H10.417C11.0239 12.2916 11.4162 12.2903 11.7053 12.2514C11.9764 12.215 12.0614 12.1561 12.1089 12.1086C12.1565 12.061 12.2154 11.976 12.2518 11.7049C12.2907 11.4159 12.292 11.0236 12.292 10.4166V9.58329C12.292 8.97637 12.2907 8.58405 12.2518 8.29498C12.2154 8.0239 12.1565 7.93893 12.1089 7.89135C12.0614 7.84377 11.9764 7.78493 11.7053 7.74848C11.4162 7.70962 11.0239 7.70829 10.417 7.70829H9.58366C8.97673 7.70829 8.58441 7.70962 8.29535 7.74848Z"
+      fill="#A1A1AA"
+      fillRule="evenodd"
+    />
+  </svg>
+);

apps/docs/components/icons/filters.tsx

@@ -0,0 +1,19 @@
+import {IconSvgProps} from "@/types";
+
+export const Filters = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    focusable="false"
+    height={size || height}
+    viewBox="0 0 20 20"
+    width={size || width}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      clipRule="evenodd"
+      d="M10.0003 2.29166C7.58408 2.29166 5.62533 4.25041 5.62533 6.66666C5.62533 9.0829 7.58408 11.0417 10.0003 11.0417C12.4166 11.0417 14.3753 9.0829 14.3753 6.66666C14.3753 4.25041 12.4166 2.29166 10.0003 2.29166ZM4.37533 6.66666C4.37533 3.56005 6.89372 1.04166 10.0003 1.04166C13.1069 1.04166 15.6253 3.56005 15.6253 6.66666C15.6253 7.16742 15.5599 7.65289 15.4371 8.11501C17.5014 8.94794 18.9587 10.9698 18.9587 13.3333C18.9587 16.4399 16.4403 18.9583 13.3337 18.9583C12.0865 18.9583 10.9331 18.5518 10.0004 17.8647C9.06748 18.5521 7.91468 18.9583 6.66699 18.9583C3.56039 18.9583 1.04199 16.4399 1.04199 13.3333C1.04199 10.9698 2.49922 8.94794 4.56355 8.11501C4.44076 7.65289 4.37533 7.16742 4.37533 6.66666ZM5.01777 9.27963C3.41873 9.93082 2.29199 11.5011 2.29199 13.3333C2.29199 15.7496 4.25075 17.7083 6.66699 17.7083C9.08324 17.7083 11.042 15.7496 11.042 13.3333C11.042 12.9481 10.9923 12.5751 10.8993 12.2202C10.6066 12.2672 10.3063 12.2917 10.0003 12.2917C7.83695 12.2917 5.95882 11.0704 5.01777 9.27963ZM12.1037 11.8852C12.2266 12.3477 12.292 12.8333 12.292 13.3333C12.292 14.7315 11.7818 16.0106 10.9375 16.9945C11.6258 17.4461 12.4487 17.7083 13.3337 17.7083C15.7499 17.7083 17.7087 15.7496 17.7087 13.3333C17.7087 11.5011 16.5819 9.93082 14.9829 9.27963C14.3653 10.4548 13.3442 11.3848 12.1037 11.8852Z"
+      fill="#A1A1AA"
+      fillRule="evenodd"
+    />
+  </svg>
+);

apps/docs/components/icons/index.ts

@@ -13,3 +13,7 @@ export * from "./two-tone";
 export * from "./bold";
 export * from "./linear";
 export * from "./bug";
+export * from "./mirror-left";
+export * from "./palette-round";
+export * from "./filters";
+export * from "./scaling";

apps/docs/components/icons/mirror-left.tsx

@@ -0,0 +1,25 @@
+import {IconSvgProps} from "@/types";
+
+export const MirrorLeft = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    focusable="false"
+    height={size || height}
+    viewBox="0 0 20 20"
+    width={size || width}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      clipRule="evenodd"
+      d="M11.1174 2.50001C11.1174 2.15483 11.3972 1.87501 11.7424 1.87501H12.5018C12.8633 1.87501 13.2005 1.87501 13.5128 1.8777C13.858 1.88068 14.1354 2.1629 14.1324 2.50807C14.1294 2.85323 13.8472 3.13063 13.502 3.12765C13.1956 3.12501 12.8635 3.12501 12.5 3.12501H11.7424C11.3972 3.12501 11.1174 2.84518 11.1174 2.50001ZM15.3093 2.54551C15.4118 2.21588 15.762 2.03171 16.0917 2.13416C16.5211 2.26764 16.8934 2.47397 17.2097 2.7903C17.526 3.10662 17.7324 3.47886 17.8659 3.90836C17.9683 4.23798 17.7841 4.58824 17.4545 4.69069C17.1249 4.79313 16.7746 4.60896 16.6722 4.27933C16.589 4.01168 16.477 3.8254 16.3258 3.67418C16.1746 3.52296 15.9883 3.41102 15.7207 3.32784C15.391 3.22539 15.2069 2.87513 15.3093 2.54551ZM17.4919 5.86761C17.8371 5.86463 18.1193 6.14203 18.1223 6.48719C18.125 6.79951 18.125 7.13663 18.125 7.49809V8.63637C18.125 8.98155 17.8452 9.26137 17.5 9.26137C17.1548 9.26137 16.875 8.98155 16.875 8.63637V7.5C16.875 7.1365 16.875 6.80442 16.8724 6.49798C16.8694 6.15281 17.1468 5.87059 17.4919 5.86761ZM17.5 10.7386C17.8452 10.7386 18.125 11.0185 18.125 11.3636V12.5019C18.125 12.8634 18.125 13.2005 18.1223 13.5128C18.1193 13.858 17.8371 14.1354 17.4919 14.1324C17.1468 14.1294 16.8694 13.8472 16.8724 13.502C16.875 13.1956 16.875 12.8635 16.875 12.5V11.3636C16.875 11.0185 17.1548 10.7386 17.5 10.7386ZM17.4545 15.3093C17.7841 15.4118 17.9683 15.762 17.8659 16.0917C17.7324 16.5211 17.526 16.8934 17.2097 17.2097C16.8934 17.526 16.5211 17.7324 16.0917 17.8659C15.762 17.9683 15.4118 17.7841 15.3093 17.4545C15.2069 17.1249 15.391 16.7746 15.7207 16.6722C15.9883 16.589 16.1746 16.4771 16.3258 16.3258C16.477 16.1746 16.589 15.9883 16.6722 15.7207C16.7746 15.391 17.1249 15.2069 17.4545 15.3093ZM14.1324 17.4919C14.1354 17.8371 13.858 18.1193 13.5128 18.1223C13.2005 18.125 12.8634 18.125 12.5019 18.125H11.7424C11.3972 18.125 11.1174 17.8452 11.1174 17.5C11.1174 17.1548 11.3972 16.875 11.7424 16.875H12.5C12.8635 16.875 13.1956 16.875 13.502 16.8724C13.8472 16.8694 14.1294 17.1468 14.1324 17.4919Z"
+      fill="#71717A"
+      fillRule="evenodd"
+    />
+    <path
+      clipRule="evenodd"
+      d="M10 1.04167C10.3452 1.04167 10.625 1.32149 10.625 1.66667V18.3333C10.625 18.6785 10.3452 18.9583 10 18.9583C9.65482 18.9583 9.375 18.6785 9.375 18.3333V18.125H9.11966C7.58819 18.125 6.37516 18.125 5.42581 17.9974C4.4488 17.866 3.65801 17.5893 3.03437 16.9656C2.41073 16.342 2.13397 15.5512 2.00261 14.5742C1.87498 13.6248 1.87499 12.4118 1.875 10.8804V9.11966C1.87499 7.58819 1.87498 6.37516 2.00261 5.42582C2.13397 4.4488 2.41073 3.65801 3.03437 3.03437C3.65801 2.41074 4.4488 2.13397 5.42581 2.00262C6.37516 1.87498 7.58819 1.87499 9.11965 1.875L9.375 1.87501V1.66667C9.375 1.32149 9.65482 1.04167 10 1.04167ZM9.375 3.12501H9.16667C7.57765 3.12501 6.44876 3.12633 5.59237 3.24147C4.75397 3.35419 4.27093 3.56558 3.91825 3.91826C3.56558 4.27093 3.35419 4.75397 3.24147 5.59238C3.12633 6.44877 3.125 7.57766 3.125 9.16667V10.8333C3.125 12.4224 3.12633 13.5512 3.24147 14.4076C3.35419 15.246 3.56558 15.7291 3.91825 16.0818C4.27093 16.4344 4.75397 16.6458 5.59237 16.7585C6.44876 16.8737 7.57765 16.875 9.16667 16.875H9.375V3.12501Z"
+      fill="#A1A1AA"
+      fillRule="evenodd"
+    />
+  </svg>
+);

apps/docs/components/icons/palette-round.tsx

@@ -0,0 +1,19 @@
+import {IconSvgProps} from "@/types";
+
+export const PaletteRound = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    focusable="false"
+    height={size || height}
+    viewBox="0 0 20 20"
+    width={size || width}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      clipRule="evenodd"
+      d="M1.04199 4.99999C1.04199 2.81386 2.8142 1.04166 5.00033 1.04166C7.18645 1.04166 8.95866 2.81386 8.95866 4.99999V5.36L10.6531 3.66556C12.1989 2.11973 14.7052 2.11973 16.251 3.66556C17.7969 5.21138 17.7969 7.71766 16.251 9.26349L14.4729 11.0417H15.0003C17.1865 11.0417 18.9587 12.8139 18.9587 15C18.9587 17.1861 17.1865 18.9583 15.0003 18.9583H5.00033C2.8142 18.9583 1.04199 17.1861 1.04199 15V4.99999ZM7.88709 17.7083H15.0003C16.4961 17.7083 17.7087 16.4958 17.7087 15C17.7087 13.5042 16.4961 12.2917 15.0003 12.2917H13.2229L8.24107 17.2734C8.13333 17.4268 8.01498 17.5721 7.88709 17.7083ZM8.95866 14.7881L15.3671 8.3796C16.4248 7.32193 16.4248 5.60711 15.3671 4.54944C14.3095 3.49177 12.5947 3.49177 11.537 4.54944L8.95866 7.12777V14.7881ZM5.00033 2.29166C3.50455 2.29166 2.29199 3.50422 2.29199 4.99999V15C2.29199 16.4958 3.50455 17.7083 5.00033 17.7083C6.4961 17.7083 7.70866 16.4958 7.70866 15V4.99999C7.70866 3.50422 6.4961 2.29166 5.00033 2.29166ZM5.00033 14.7917C4.88527 14.7917 4.79199 14.8849 4.79199 15C4.79199 15.115 4.88527 15.2083 5.00033 15.2083C5.11538 15.2083 5.20866 15.115 5.20866 15C5.20866 14.8849 5.11538 14.7917 5.00033 14.7917ZM3.54199 15C3.54199 14.1946 4.19491 13.5417 5.00033 13.5417C5.80574 13.5417 6.45866 14.1946 6.45866 15C6.45866 15.8054 5.80574 16.4583 5.00033 16.4583C4.19491 16.4583 3.54199 15.8054 3.54199 15Z"
+      fill="#A1A1AA"
+      fillRule="evenodd"
+    />
+  </svg>
+);

apps/docs/components/icons/radial-blur.tsx

@@ -0,0 +1,58 @@
+import {IconSvgProps} from "@/types";
+
+export const RadialBlur = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-label="Radial blur"
+    focusable="false"
+    height={size || height}
+    viewBox="0 0 20 20"
+    width={size || width}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      clipRule="evenodd"
+      d="M10.9211 2.34618C9.32167 2.1523 7.64915 2.45613 6.1457 3.32414C2.45886 5.45274 1.19566 10.1671 3.32426 13.8539C5.45285 17.5408 10.1672 18.804 13.854 16.6754C15.3575 15.8074 16.4569 14.5108 17.0887 13.0287C18.0077 10.873 17.9362 8.32926 16.6755 6.14559C15.4147 3.96192 13.2475 2.62817 10.9211 2.34618ZM5.5207 2.24161C7.2666 1.23361 9.21255 0.879928 11.0716 1.10526C13.7714 1.43252 16.2924 2.98206 17.758 5.52059C19.2236 8.05912 19.3051 11.0172 18.2386 13.5189C17.5042 15.2415 16.2249 16.7499 14.479 17.7579C10.1943 20.2317 4.7155 18.7636 2.24172 14.4789C-0.232051 10.1942 1.236 4.71539 5.5207 2.24161Z"
+      fill="#A1A1AA"
+      fillRule="evenodd"
+    />
+    <path
+      clipRule="evenodd"
+      d="M8.1247 7.49999C7.77952 7.49999 7.4997 7.77981 7.4997 8.12499C7.4997 8.47017 7.77952 8.74999 8.1247 8.74999C8.46987 8.74999 8.7497 8.47017 8.7497 8.12499C8.7497 7.77981 8.46987 7.49999 8.1247 7.49999ZM6.66636 8.12499C6.66636 7.31957 7.31928 6.66666 8.1247 6.66666C8.93011 6.66666 9.58303 7.31958 9.58303 8.12499C9.58303 8.93041 8.93011 9.58332 8.1247 9.58332C7.31928 9.58332 6.66636 8.93041 6.66636 8.12499ZM11.8747 7.49999C11.5295 7.49999 11.2497 7.77981 11.2497 8.12499C11.2497 8.47017 11.5295 8.74999 11.8747 8.74999C12.2199 8.74999 12.4997 8.47017 12.4997 8.12499C12.4997 7.77981 12.2199 7.49999 11.8747 7.49999ZM10.4164 8.12499C10.4164 7.31957 11.0693 6.66666 11.8747 6.66666C12.6801 6.66666 13.333 7.31957 13.333 8.12499C13.333 8.93041 12.6801 9.58332 11.8747 9.58332C11.0693 9.58332 10.4164 8.93041 10.4164 8.12499ZM8.1247 11.25C7.77952 11.25 7.4997 11.5298 7.4997 11.875C7.4997 12.2202 7.77952 12.5 8.1247 12.5C8.46987 12.5 8.7497 12.2202 8.7497 11.875C8.7497 11.5298 8.46987 11.25 8.1247 11.25ZM6.66636 11.875C6.66636 11.0696 7.31928 10.4167 8.1247 10.4167C8.93011 10.4167 9.58303 11.0696 9.58303 11.875C9.58303 12.6804 8.93011 13.3333 8.1247 13.3333C7.31928 13.3333 6.66636 12.6804 6.66636 11.875ZM11.8747 11.25C11.5295 11.25 11.2497 11.5298 11.2497 11.875C11.2497 12.2202 11.5295 12.5 11.8747 12.5C12.2199 12.5 12.4997 12.2202 12.4997 11.875C12.4997 11.5298 12.2199 11.25 11.8747 11.25ZM10.4164 11.875C10.4164 11.0696 11.0693 10.4167 11.8747 10.4167C12.6801 10.4167 13.333 11.0696 13.333 11.875C13.333 12.6804 12.6801 13.3333 11.8747 13.3333C11.0693 13.3333 10.4164 12.6804 10.4164 11.875Z"
+      fill="#A1A1AA"
+      fillRule="evenodd"
+    />
+    <path
+      d="M12.4997 4.79166C12.4997 5.13684 12.2199 5.41666 11.8747 5.41666C11.5295 5.41666 11.2497 5.13684 11.2497 4.79166C11.2497 4.44648 11.5295 4.16666 11.8747 4.16666C12.2199 4.16666 12.4997 4.44648 12.4997 4.79166Z"
+      fill="#A1A1AA"
+    />
+    <path
+      d="M8.7497 4.79166C8.7497 5.13684 8.46987 5.41666 8.1247 5.41666C7.77952 5.41666 7.4997 5.13684 7.4997 4.79166C7.4997 4.44648 7.77952 4.16666 8.1247 4.16666C8.46987 4.16666 8.7497 4.44648 8.7497 4.79166Z"
+      fill="#A1A1AA"
+    />
+    <path
+      d="M15.208 7.49999C15.5532 7.49999 15.833 7.77981 15.833 8.12499C15.833 8.47017 15.5532 8.74999 15.208 8.74999C14.8629 8.74999 14.583 8.47017 14.583 8.12499C14.583 7.77981 14.8629 7.49999 15.208 7.49999Z"
+      fill="#A1A1AA"
+    />
+    <path
+      d="M4.79136 7.49999C5.13654 7.49999 5.41636 7.77981 5.41636 8.12499C5.41636 8.47017 5.13654 8.74999 4.79136 8.74999C4.44619 8.74999 4.16636 8.47017 4.16636 8.12499C4.16636 7.77981 4.44619 7.49999 4.79136 7.49999Z"
+      fill="#A1A1AA"
+    />
+    <path
+      d="M15.208 11.25C15.5532 11.25 15.833 11.5298 15.833 11.875C15.833 12.2202 15.5532 12.5 15.208 12.5C14.8629 12.5 14.583 12.2202 14.583 11.875C14.583 11.5298 14.8629 11.25 15.208 11.25Z"
+      fill="#A1A1AA"
+    />
+    <path
+      d="M4.79136 11.25C5.13654 11.25 5.41636 11.5298 5.41636 11.875C5.41636 12.2202 5.13654 12.5 4.79136 12.5C4.44619 12.5 4.16636 12.2202 4.16636 11.875C4.16636 11.5298 4.44619 11.25 4.79136 11.25Z"
+      fill="#A1A1AA"
+    />
+    <path
+      d="M12.4997 15.2083C12.4997 15.5535 12.2199 15.8333 11.8747 15.8333C11.5295 15.8333 11.2497 15.5535 11.2497 15.2083C11.2497 14.8631 11.5295 14.5833 11.8747 14.5833C12.2199 14.5833 12.4997 14.8631 12.4997 15.2083Z"
+      fill="#A1A1AA"
+    />
+    <path
+      d="M8.7497 15.2083C8.7497 15.5535 8.46987 15.8333 8.1247 15.8333C7.77952 15.8333 7.4997 15.5535 7.4997 15.2083C7.4997 14.8631 7.77952 14.5833 8.1247 14.5833C8.46987 14.5833 8.7497 14.8631 8.7497 15.2083Z"
+      fill="#A1A1AA"
+    />
+  </svg>
+);

apps/docs/components/icons/scaling.tsx

@@ -0,0 +1,21 @@
+import {IconSvgProps} from "@/types";
+
+export const Scaling = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <path
+      clipRule="evenodd"
+      d="M11.4072 3.45187L12.21 4.25472C12.4541 4.49879 12.4541 4.89452 12.21 5.1386C11.966 5.38268 11.5702 5.38268 11.3262 5.1386L10.5227 4.33519L9.63886 5.21907L11.0315 6.61174C11.2756 6.85582 11.2756 7.25154 11.0315 7.49562C10.7874 7.7397 10.3917 7.7397 10.1476 7.49562L8.75498 6.10296L7.87109 6.98684L8.6745 7.79025C8.91858 8.03433 8.91858 8.43006 8.6745 8.67413C8.43042 8.91821 8.0347 8.91821 7.79062 8.67413L6.98721 7.87073L6.10332 8.75461L7.49599 10.1473C7.74007 10.3914 7.74007 10.7871 7.49599 11.0312C7.25191 11.2752 6.85618 11.2752 6.61211 11.0312L5.21944 9.63849L4.33556 10.5224L5.13897 11.3258C5.38304 11.5699 5.38304 11.9656 5.13897 12.2097C4.89489 12.4537 4.49916 12.4537 4.25508 12.2097L3.45223 11.4068C3.06534 11.7973 2.78623 12.0911 2.59 12.3483C2.34834 12.665 2.29199 12.8517 2.29199 13.0131C2.29199 13.1745 2.34834 13.3611 2.59 13.6778C2.84267 14.009 3.23276 14.401 3.81341 14.9816L5.01866 16.1869C5.59931 16.7675 5.99128 17.1576 6.32244 17.4103C6.63917 17.6519 6.8258 17.7083 6.98721 17.7083C7.14862 17.7083 7.33524 17.6519 7.65198 17.4103C7.98314 17.1576 8.37511 16.7675 8.95576 16.1869L16.1872 8.95539C16.7679 8.37474 17.158 7.98277 17.4107 7.65161C17.6523 7.33488 17.7087 7.14825 17.7087 6.98684C17.7087 6.82543 17.6523 6.63881 17.4107 6.32207C17.158 5.99091 16.7679 5.59894 16.1872 5.01829L14.982 3.81304C14.4013 3.23239 14.0094 2.8423 13.6782 2.58963C13.3615 2.34797 13.1749 2.29163 13.0134 2.29163C12.852 2.29163 12.6654 2.34797 12.3487 2.58963C12.0915 2.78586 11.7976 3.06497 11.4072 3.45187ZM11.5904 1.59586C12.0184 1.26936 12.4688 1.04163 13.0134 1.04163C13.558 1.04163 14.0085 1.26936 14.4364 1.59586C14.8423 1.90551 15.2932 2.35643 15.8351 2.8984L17.1019 4.16516C17.6438 4.70709 18.0948 5.15799 18.4044 5.56385C18.7309 5.99177 18.9587 6.44224 18.9587 6.98684C18.9587 7.53145 18.7309 7.98191 18.4044 8.40984C18.0948 8.81569 17.6438 9.2666 17.1019 9.80853L9.80889 17.1015C9.26696 17.6435 8.81606 18.0944 8.41021 18.4041C7.98228 18.7306 7.53182 18.9583 6.98721 18.9583C6.4426 18.9583 5.99214 18.7306 5.56421 18.4041C5.15836 18.0944 4.70746 17.6435 4.16552 17.1015L2.89876 15.8347C2.3568 15.2928 1.90587 14.8419 1.59622 14.4361C1.26973 14.0081 1.04199 13.5577 1.04199 13.0131C1.04199 12.4685 1.26973 12.018 1.59622 11.5901C1.90588 11.1842 2.35682 10.7333 2.89879 10.1914L10.1918 2.89841C10.7337 2.35644 11.1846 1.90551 11.5904 1.59586Z"
+      fill="#A1A1AA"
+      fillRule="evenodd"
+    />
+  </svg>
+);

apps/docs/components/icons/social.tsx

@@ -423,6 +423,23 @@ const CodeSandboxIcon: React.FC<IconSvgProps> = ({width = "1em", height = "1em",
   );
 };
 
+const StackblitzIcon: React.FC<IconSvgProps> = ({...props}) => {
+  return (
+    <svg
+      height={16}
+      viewBox="0 0 1024 1024"
+      width={16}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M848 359.3H627.7L825.8 109c4.1-5.3.4-13-6.3-13H436c-2.8 0-5.5 1.5-6.9 4L170 547.5c-3.1 5.3.7 12 6.9 12h174.4l-89.4 357.6c-1.9 7.8 7.5 13.3 13.3 7.7L853.5 373c5.2-4.9 1.7-13.7-5.5-13.7M378.2 732.5l60.3-241H281.1l189.6-327.4h224.6L487 427.4h211z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
 const JavascriptIcon: React.FC<IconSvgProps> = ({width = "1em", height = "1em", ...props}) => {
   return (
     <svg
@@ -470,6 +487,7 @@ export {
   NewNextJSIcon,
   StorybookIcon,
   CodeSandboxIcon,
+  StackblitzIcon,
   JavascriptIcon,
   TypescriptIcon,
   BunIcon,

apps/docs/components/icons/text-square.tsx

@@ -0,0 +1,23 @@
+import {IconSvgProps} from "@/types";
+
+export const TextSquare = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    focusable="false"
+    height={size || height}
+    viewBox="0 0 20 20"
+    width={size || width}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M7.29363 4.20835C6.93542 4.20829 6.60053 4.20824 6.32693 4.24911C6.01785 4.29528 5.70032 4.40444 5.44651 4.68645C5.20118 4.95903 5.11457 5.28386 5.07703 5.59413C5.04193 5.88416 5.04196 6.24367 5.04199 6.64964L5.04199 7.12502C5.04199 7.4702 5.32181 7.75002 5.66699 7.75002C6.01217 7.75002 6.29199 7.4702 6.29199 7.12502V6.68521C6.29199 6.23278 6.29307 5.95012 6.31798 5.74429C6.32966 5.64773 6.34427 5.59208 6.35607 5.5602C6.36604 5.53329 6.37315 5.5254 6.37551 5.52278L6.37619 5.522C6.37733 5.52063 6.37816 5.51963 6.38568 5.51619C6.39953 5.50986 6.43506 5.49683 6.51161 5.48539C6.6817 5.45999 6.92125 5.45835 7.33366 5.45835H8.37533V12.5417H6.91699C6.57181 12.5417 6.29199 12.8215 6.29199 13.1667C6.29199 13.5119 6.57181 13.7917 6.91699 13.7917H11.5003C11.8455 13.7917 12.1253 13.5119 12.1253 13.1667C12.1253 12.8215 11.8455 12.5417 11.5003 12.5417H9.62533V5.45835H10.667C11.0794 5.45835 11.319 5.45999 11.489 5.48539C11.5656 5.49683 11.6011 5.50986 11.615 5.51619C11.6225 5.51963 11.6233 5.52063 11.6245 5.522L11.625 5.52265C11.6274 5.52528 11.6346 5.53329 11.6446 5.5602C11.6564 5.59208 11.671 5.64773 11.6827 5.74429C11.7076 5.95012 11.7087 6.23278 11.7087 6.68521V7.12502C11.7087 7.4702 11.9885 7.75002 12.3337 7.75002C12.6788 7.75002 12.9587 7.4702 12.9587 7.12502L12.9587 6.64963C12.9587 6.24367 12.9587 5.88415 12.9236 5.59413C12.8861 5.28386 12.7995 4.95903 12.5541 4.68645C12.3003 4.40444 11.9828 4.29528 11.6737 4.24911C11.4001 4.20824 11.0652 4.20829 10.707 4.20835H7.29363Z"
+      fill="#A1A1AA"
+    />
+    <path
+      clipRule="evenodd"
+      d="M8.95251 0.0416872C7.02885 0.0416765 5.52132 0.041668 4.34508 0.199809C3.14113 0.361676 2.19111 0.699459 1.44544 1.44513C0.699764 2.19081 0.361981 3.14083 0.200114 4.34478C0.0419731 5.52101 0.0419816 7.02854 0.0419924 8.95221V9.04784C0.0419816 10.9715 0.0419731 12.479 0.200114 13.6553C0.361981 14.8592 0.699764 15.8092 1.44544 16.5549C2.19111 17.3006 3.14113 17.6384 4.34508 17.8002C5.52132 17.9584 7.02885 17.9584 8.95252 17.9584H9.04814C10.9718 17.9584 12.4793 17.9584 13.6556 17.8002C14.8595 17.6384 15.8095 17.3006 16.5552 16.5549C17.3009 15.8092 17.6387 14.8592 17.8005 13.6553C17.9587 12.479 17.9587 10.9715 17.9587 9.04783V8.95221C17.9587 7.02855 17.9587 5.52102 17.8005 4.34478C17.6387 3.14083 17.3009 2.19081 16.5552 1.44513C15.8095 0.699459 14.8595 0.361676 13.6556 0.199809C12.4793 0.041668 10.9718 0.0416765 9.04814 0.0416872H8.95251ZM2.32932 2.32902C2.80404 1.8543 3.4463 1.58189 4.51164 1.43866C5.59496 1.29301 7.01847 1.29169 9.00033 1.29169C10.9822 1.29169 12.4057 1.29301 13.489 1.43866C14.5543 1.58189 15.1966 1.8543 15.6713 2.32902C16.146 2.80373 16.4185 3.446 16.5617 4.51133C16.7073 5.59465 16.7087 7.01817 16.7087 9.00002C16.7087 10.9819 16.7073 12.4054 16.5617 13.4887C16.4185 14.554 16.146 15.1963 15.6713 15.671C15.1966 16.1457 14.5543 16.4181 13.489 16.5614C12.4057 16.707 10.9822 16.7084 9.00033 16.7084C7.01847 16.7084 5.59496 16.707 4.51164 16.5614C3.4463 16.4181 2.80404 16.1457 2.32932 15.671C1.85461 15.1963 1.5822 14.554 1.43897 13.4887C1.29332 12.4054 1.29199 10.9819 1.29199 9.00002C1.29199 7.01817 1.29332 5.59465 1.43897 4.51133C1.5822 3.446 1.85461 2.80373 2.32932 2.32902Z"
+      fill="#A1A1AA"
+      fillRule="evenodd"
+    />
+  </svg>
+);

apps/docs/components/index.ts

@@ -1,4 +1,4 @@
-export * from "./nextui-logo";
+export * from "./heroui-logo";
 export * from "./theme-switch";
 export * from "./looper-bg";
 export * from "./code-window";

apps/docs/components/marketing/a11y-otb.tsx

@@ -4,21 +4,21 @@
 import {
   Button,
   Image,
-  Link as NextUILink,
+  Link as HeroUILink,
   Dropdown,
   DropdownSection,
   DropdownMenu,
   DropdownItem,
   Tooltip,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import {useInView} from "framer-motion";
-import {clsx} from "@nextui-org/shared-utils";
+import {clsx} from "@heroui/shared-utils";
 import {
   AddNoteBulkIcon,
   CopyDocumentBulkIcon,
   EditDocumentBulkIcon,
   DeleteDocumentBulkIcon,
-} from "@nextui-org/shared-icons";
+} from "@heroui/shared-icons";
 import Link from "next/link";
 import dynamic from "next/dynamic";
 import {Fragment, useEffect, useRef, useState} from "react";
@@ -102,15 +102,15 @@ export const A11yOtb = () => {
             </div>
           </div>
           <p className={subtitle()}>
-            NextUI components are built on top of&nbsp;
-            <NextUILink
+            HeroUI components are built on top of&nbsp;
+            <HeroUILink
               isExternal
               className="text-xl text-default-500 font-light [&>svg]:ml-1"
               href="https://react-spectrum.adobe.com/react-aria/"
               underline="always"
             >
               React Aria
-            </NextUILink>
+            </HeroUILink>
             &nbsp;ensuring exceptional accessibility support as a top priority.
           </p>
         </div>
@@ -169,6 +169,7 @@ export const A11yOtb = () => {
               <Dropdown
                 className="shadow-xl"
                 closeOnSelect={true}
+                isDismissable={false}
                 isOpen={isDropdownOpen}
                 placement="bottom"
                 portalContainer={ref.current}

apps/docs/components/marketing/community.tsx

@@ -1,4 +1,4 @@
-import {Spacer} from "@nextui-org/react";
+import {Spacer} from "@heroui/react";
 
 import {sectionWrapper, titleWrapper, title, subtitle} from "../primitives";
 

apps/docs/components/marketing/custom-themes/custom-themes.tsx

@@ -2,7 +2,7 @@
 
 /* eslint-disable react/display-name */
 import {useMemo, useState} from "react";
-import {Tabs, Tab, Card, CardBody, Image, Button, RadioGroup, Radio} from "@nextui-org/react";
+import {Tabs, Tab, Card, CardBody, Image, Button, RadioGroup, Radio} from "@heroui/react";
 import NextLink from "next/link";
 import NextImage from "next/image";
 
@@ -10,25 +10,33 @@ import {shopCartStyles} from "./styles";
 
 import {title, subtitle, titleWrapper, sectionWrapper} from "@/components/primitives";
 import {PaletteIcon, MagicIcon, GamingConsoleIcon, StarIcon} from "@/components/icons";
-import {NextUILogo, CodeWindow} from "@/components";
+import {HeroUILogo, CodeWindow} from "@/components";
 import landingContent from "@/content/landing";
 import {useIsMobile} from "@/hooks/use-media-query";
 
 const themesTabs = (isMobile: boolean) => [
   {
-    id: "nextui",
-    title: () => <p className="group-data-[selected=true]:text-primary">NextUI</p>,
+    id: "heroui",
+    title: () => (
+      <p className="group-data-[selected=true]:text-foreground group-data-[selected=true]:font-medium">
+        HeroUI
+      </p>
+    ),
     icon: () => (
-      <NextUILogo
-        small
-        className="text-default-400 group-data-[selected=true]:text-primary"
+      <HeroUILogo
+        outlined
+        className="text-default-400 group-data-[selected=true]:text-foreground"
         size={isMobile ? 34 : 44}
       />
     ),
   },
   {
     id: "modern",
-    title: () => <p className="group-data-[selected=true]:text-secondary">Modern</p>,
+    title: () => (
+      <p className="group-data-[selected=true]:text-secondary group-data-[selected=true]:font-medium">
+        Modern
+      </p>
+    ),
     icon: () => (
       <PaletteIcon
         className="group-data-[selected=true]:text-secondary"
@@ -38,12 +46,20 @@ const themesTabs = (isMobile: boolean) => [
   },
   {
     id: "elegant",
-    title: () => <p className="group-data-[selected=true]:text-foreground">Elegant</p>,
+    title: () => (
+      <p className="group-data-[selected=true]:text-foreground group-data-[selected=true]:font-medium">
+        Elegant
+      </p>
+    ),
     icon: () => <MagicIcon size={isMobile ? 34 : 44} />,
   },
   {
     id: "retro",
-    title: () => <p className="group-data-[selected=true]:text-warning">Retro</p>,
+    title: () => (
+      <p className="group-data-[selected=true]:text-warning group-data-[selected=true]:font-medium">
+        Retro
+      </p>
+    ),
     icon: () => (
       <GamingConsoleIcon
         className="group-data-[selected=true]:text-warning"
@@ -53,13 +69,13 @@ const themesTabs = (isMobile: boolean) => [
   },
 ];
 
-type Theme = "nextui" | "modern" | "elegant" | "retro";
+type Theme = "heroui" | "modern" | "elegant" | "retro";
 type Tab = {id: string; title: () => JSX.Element; icon: () => JSX.Element};
 
 const itemSizes = ["xs", "s", "m", "l", "xl"];
 
 const codeHighlights = {
-  nextui: "6-19",
+  heroui: "6-19",
   modern: "26-39",
   elegant: "46-59",
   retro: "66-84",
@@ -163,7 +179,7 @@ const CustomThemesExample = ({
               <Button
                 className={slots.buyButton()}
                 color="primary"
-                variant={selectedTheme === "nextui" ? "shadow" : "solid"}
+                variant={selectedTheme === "heroui" ? "shadow" : "solid"}
               >
                 Buy now
               </Button>
@@ -224,7 +240,7 @@ export const CustomThemes = () => {
             </div>
           </div>
           <p className={subtitle()}>
-            NextUI provides a custom TailwindCSS plugin that allows you to customize the default
+            HeroUI provides a custom TailwindCSS plugin that allows you to customize the default
             themes or create your own.
           </p>
         </div>

apps/docs/components/marketing/custom-themes/styles.ts

@@ -71,7 +71,7 @@ export const shopCartStyles = tv({
   },
   variants: {
     theme: {
-      nextui: {
+      heroui: {
         card: "py-5",
         imageWrapper: ["before:rounded-2xl", "before:from-[#010187] before:to-[#18000E]"],
         sizeOption: [
@@ -211,7 +211,7 @@ export const shopCartStyles = tv({
     },
   },
   defaultVariants: {
-    theme: "nextui",
+    theme: "heroui",
   },
 });
 

apps/docs/components/marketing/customization.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 /* eslint-disable react/display-name */
-import {Button, Link} from "@nextui-org/react";
+import {Button, Link} from "@heroui/react";
 import NextLink from "next/link";
 
 import {title, subtitle, titleWrapper, sectionWrapper} from "@/components/primitives";
@@ -22,7 +22,7 @@ export const Customization = () => {
             </div>
           </div>
           <p className={subtitle()}>
-            NextUI is based on{" "}
+            HeroUI is based on{" "}
             <Link
               isExternal
               className="text-xl text-default-500 font-light [&>svg]:ml-1"

apps/docs/components/marketing/dark-mode.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 /* eslint-disable react/display-name */
-import {Code, Button, Tooltip} from "@nextui-org/react";
+import {Code, Button, Tooltip} from "@heroui/react";
 import {useState} from "react";
 import NextLink from "next/link";
 import dynamic from "next/dynamic";
@@ -33,7 +33,7 @@ export const DarkMode = () => {
             </div>
           </div>
           <p className={subtitle()}>
-            NextUI comes with a fully well-scaled default dark theme that you can apply to your
+            HeroUI comes with a fully well-scaled default dark theme that you can apply to your
             application with just adding the <Code>dark</Code> attribute to your <Code>html</Code>.
           </p>
         </div>
@@ -91,7 +91,7 @@ export const DarkMode = () => {
       <DemoCodeModal
         code={landingContent.darkModeExampleCode}
         isOpen={isModalOpen}
-        subtitle="A simple music player component built using components from NextUI."
+        subtitle="A simple music player component built using components from HeroUI."
         title="MusicPlayer"
         onClose={() => setIsModalOpen(false)}
       />