Refactor/rebrand (#4532 )

* chore: rebrand in progress * chore: update docs to use heroui * chore: components renbranded * chore: figma moved to the docs files * fix: posthog config * fix(docs): extra classname in form example (#4465) * chore: clean git * chore: make heroui private * chore: new logo * chore: node env var renamed * chore: public robots txt deleted * chore: wrangler installed * chore: wrangler renamed * chore: cloudlfare workers removed * chore: force vercel deploy * refactor: first migration and provider * refactor: rename nextui plugin * refactor: rename github site * refactor: rename CONTRIBUTING * refactor: rename package name * refactor: nextjs image hostname * refactor: mdx repo nextui-org rename frontio-ai * refactor: nextui.org rename heroui.com * refactor: add heroui to missing places * fix: heroui plugin name * fix: update docs * docs: nextui to heroui add npmrc pnpm migratation * chore: rename all packages with new org name * chore: replace frontio-ai by frontioai * chore: revert previous changes * chore: small adjustment * chore: doc updated * feat: blog * chore: avatar updated * fix: url * chore: add new ogimage * fix: ogimage command * fix: heroui name and storybook welcome page * fix: og image url * feat: favicon and icon changed --------- Co-authored-by: աӄա <wingkwong.code@gmail.com> Co-authored-by: winches <329487092@qq.com>
fix(input): use onPress for wrapper click focus (#4483 )
2025-01-16 15:03:45 -03:00 · 2025-01-15 22:11:40 +08:00 · 2025-01-13 16:23:29 +08:00 · 2025-01-13 11:41:05 +08:00 · 2025-01-13 11:39:44 +08:00 · 2025-01-12 15:28:39 +09:00
1539 changed files with 30052 additions and 26660 deletions
@@ -2,7 +2,7 @@
  "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
  "changelog": [
    "@changesets/changelog-github",
-    { "repo": "nextui-org/nextui" }
+    { "repo": "frontio-ai/heroui" }
  ],
  "commit": false,
  "fixed": [],
@@ -14,7 +14,7 @@
    "onlyUpdatePeerDependentsWhenOutOfRange": true
  },
  "ignore": [
-    "@nextui-org/docs",
-    "@nextui-org/storybook"
+    "@heroui/docs",
+    "@heroui/storybook"
  ]
 }
@@ -0,0 +1,5 @@
+---
+"@nextui-org/input": patch
+---
+
+fixed input inconsistent focus behaviour on wrapper click (#4287)
@@ -0,0 +1,5 @@
+---
+"@nextui-org/alert": patch
+---
+
+propagate className (#4533)
@@ -0,0 +1,5 @@
+---
+"@nextui-org/alert": patch
+---
+
+fix title type in Avatar (#4525)
@@ -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/frontio-ai/heroui/blob/main/CONTRIBUTING.md#commit-convention",
  rules: {
    ...conventional.rules,
    "type-enum": [
@@ -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/frontio-ai/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/frontio-ai/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/frontio-ai/heroui/pulls?q=is%3Apr+is%3Aopen+sort%3Aupdated-desc)
+         - HeroUI's [closed issues tab](https://github.com/frontio-ai/heroui/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed)
+         - HeroUI's [Discussions tab](https://github.com/frontio-ai/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: |
@@ -1,11 +1,11 @@
 blank_issues_enabled: true
 contact_links:
  - name: 🤔 Long question or ideas?
-    url: https://github.com/nextui-org/nextui/discussions
+    url: https://github.com/frontio-ai/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
@@ -2,7 +2,7 @@ name: Feature request
 title: "[Feature Request] YOUR_FEATURE_TITLE_HERE_REPLACE_ME"
 labels: [feature request]
 description:  |
-  💡 Suggest an idea for the `NextUI` project
+  💡 Suggest an idea for the `HeroUI` project
  Examples
    - propose a new component
    - improve an exiting component
@@ -12,7 +12,7 @@ body:
    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).
+        If you want to report a bug, please use the [bug report form](https://github.com/frontio-ai/heroui/issues/new?assignees=&labels=&template=bug_report.yml).
  - type: textarea
    validations:
      required: true
@@ -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
@@ -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
@@ -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*
@@ -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/frontio-ai/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/frontio-ai/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/frontio-ai/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.
@@ -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

@@ -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/
@@ -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";
@@ -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 />
@@ -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>
@@ -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 (
@@ -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 />
@@ -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 = {
@@ -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;
@@ -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 = [
@@ -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 (
@@ -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}>
@@ -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">
@@ -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
@@ -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">
@@ -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
@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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
@@ -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";

@@ -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>("");
@@ -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;
@@ -10,7 +10,7 @@ import {
  getKeyValue,
  Spinner,
  Pagination,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import {useMemo, useState} from "react";
 import useSWR from "swr";

@@ -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";
@@ -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 = {
@@ -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";

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

@@ -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";
@@ -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 />
-    </>
-  );
-}
@@ -1,7 +1,7 @@
 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 {Providers} from "./providers";

@@ -22,8 +22,9 @@ export const metadata: Metadata = {
  keywords: [
    "React",
    "Next.js",
-    "Tailwind CSS",
    "NextUI",
+    "Tailwind CSS",
+    "HeroUI",
    "React Aria",
    "Server Components",
    "React Components",
@@ -43,15 +44,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: "frontio-ai",
  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"}],
    },
  },
 };
@@ -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 />
@@ -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>
+    </>
+  );
+}
@@ -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>
+  );
+}
@@ -1,9 +1,7 @@
 "use client";

-import type {ReactNode} from "react";
-
 import * as React from "react";
-import {NextUIProvider} from "@nextui-org/react";
+import {HeroUIProvider} from "@heroui/react";
 import {ThemeProvider as NextThemesProvider} from "next-themes";
 import {ThemeProviderProps} from "next-themes";
 import {useRouter} from "next/navigation";
@@ -18,32 +16,33 @@ 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,
+      });
+    }
+  }, []);
+
+  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}>
        <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
-      </NextUIProvider>
+      </HeroUIProvider>
    </ProviderWrapper>
  );
 }
@@ -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;
@@ -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"
@@ -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/frontio-ai/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/frontio-ai/next-pages-template",
  },
 ];

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

@@ -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;
@@ -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>
  );
 };
@@ -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;
@@ -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;
@@ -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";
@@ -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.
              </>
            )}
@@ -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 = () => {
@@ -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 {
@@ -4,7 +4,7 @@ import {
  CircularProgress,
  CircularProgressProps,
  circularProgress,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import {FC} from "react";

 const speedProgress = tv({
@@ -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>
@@ -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";
@@ -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}
@@ -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];

@@ -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 ? (
@@ -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.org/?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
@@ -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}
    />
@@ -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",
@@ -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>
      )}
    </>
@@ -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;
@@ -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>
+  );
+};
@@ -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";
@@ -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
@@ -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-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}
-        >
-          <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}`}
+    <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>
  );
 };
@@ -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;
@@ -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 = () => {
@@ -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";
@@ -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} />;
+};
@@ -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,
@@ -1,4 +1,4 @@
-export * from "./nextui-logo";
+export * from "./heroui-logo";
 export * from "./theme-switch";
 export * from "./looper-bg";
 export * from "./code-window";
@@ -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>
@@ -1,4 +1,4 @@
-import {Spacer} from "@nextui-org/react";
+import {Spacer} from "@heroui/react";

 import {sectionWrapper, titleWrapper, title, subtitle} from "../primitives";

@@ -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>
@@ -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",
  },
 });

@@ -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"
@@ -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)}
      />
@@ -3,9 +3,9 @@
 import React, {ReactNode} from "react";
 import {usePostHog} from "posthog-js/react";
 import {tv} from "tailwind-variants";
-import {Card, CardHeader, CardBody, LinkProps, SlotsToClasses} from "@nextui-org/react";
+import {Card, CardHeader, CardBody, LinkProps, SlotsToClasses} from "@heroui/react";
 import {useRouter} from "next/navigation";
-import {LinkIcon} from "@nextui-org/shared-icons";
+import {LinkIcon} from "@heroui/shared-icons";

 const styles = tv({
  slots: {
@@ -1,6 +1,6 @@
 "use client";

-import {clsx} from "@nextui-org/shared-utils";
+import {clsx} from "@heroui/shared-utils";

 import {useIsMounted} from "@/hooks/use-is-mounted";

@@ -9,8 +9,8 @@ import {
  Switch,
  Spinner,
  Pagination,
-} from "@nextui-org/react";
-import {MoonFilledIcon, SunFilledIcon} from "@nextui-org/shared-icons";
+} from "@heroui/react";
+import {MoonFilledIcon, SunFilledIcon} from "@heroui/shared-icons";
 import {useTheme} from "next-themes";
 import NextImage from "next/image";

@@ -19,7 +19,7 @@ import {FloatingTabs} from "./floating-tabs";
 import {UserTwitterCard} from "@/components/demos/user-twitter-card";
 import {useIsMounted} from "@/hooks/use-is-mounted";
 import {useMediaQuery} from "@/hooks/use-media-query";
-import {NextUILogo} from "@/components/nextui-logo";
+import {HeroUILogo} from "@/components/heroui-logo";

 export const FloatingComponents: React.FC<{}> = () => {
  const {theme, setTheme} = useTheme();
@@ -52,7 +52,7 @@ export const FloatingComponents: React.FC<{}> = () => {
        <Input
          className="absolute -top-[60px] -right-[80px] animate-[levitate_10s_ease_infinite] w-[200px]"
          color="secondary"
-          defaultValue="NextUI"
+          defaultValue="HeroUI"
          label="Input"
          labelPlacement="outside"
          variant="bordered"
@@ -86,7 +86,7 @@ export const FloatingComponents: React.FC<{}> = () => {
          shadow="lg"
        >
          <CardBody>
-            <NextUILogo small size={60} />
+            <HeroUILogo small size={60} />
          </CardBody>
        </Card>

@@ -1,6 +1,6 @@
 "use client";

-import {Tab, Tabs} from "@nextui-org/react";
+import {Tab, Tabs} from "@heroui/react";

 export const FloatingTabs: React.FC<{}> = () => {
  return (
@@ -1,8 +1,8 @@
 "use client";

 import NextLink from "next/link";
-import {Button, Link, Chip, Snippet} from "@nextui-org/react";
-import {ArrowRightIcon} from "@nextui-org/shared-icons";
+import {Button, Link, Chip, Snippet} from "@heroui/react";
+import {ArrowRightIcon} from "@heroui/shared-icons";
 import dynamic from "next/dynamic";
 import {usePostHog} from "posthog-js/react";

@@ -10,6 +10,7 @@ import {FloatingComponents} from "./floating-components";

 import {GithubIcon} from "@/components/icons";
 import {title, subtitle} from "@/components/primitives";
+import {siteConfig} from "@/config/site";

 const BgLooper = dynamic(() => import("./bg-looper").then((mod) => mod.BgLooper), {
  ssr: false,
@@ -33,16 +34,18 @@ export const Hero = () => {
        <div className="flex justify-center w-full md:hidden">
          <Chip
            as={NextLink}
-            className="bg-primary-100/50 border-1 hover:bg-primary-100/80 border-primary-200/50 cursor-pointer"
+            className="bg-foreground-100/50 border-1 hover:bg-foreground-100/80 border-foreground-200/50 cursor-pointer"
            classNames={{
-              content: "font-semibold text-primary-500 dark:text-primary-600 text-xs ",
+              content: "font-semibold text-foreground text-xs ",
            }}
            color="primary"
-            href="/blog/v2.6.0"
+            href="/blog/introducing-heroui"
            variant="flat"
-            onClick={() => handlePressAnnouncement("New version v2.6.0", "/blog/v2.6.0")}
+            onClick={() =>
+              handlePressAnnouncement("Introducing HeroUI", "/blog/introducing-heroui")
+            }
          >
-            New version v2.6.0&nbsp;
+            Introducing HeroUI&nbsp;
            <span aria-label="emoji" role="img">
              🔥
            </span>
@@ -55,8 +58,9 @@ export const Hero = () => {
          </div>
          <h1 className={title()}>websites regardless of your design experience.</h1>
        </div>
-        <h2 className={subtitle({fullWidth: true, class: "text-center md:text-left"})}>
-          Beautiful, fast and modern React UI library.
+        <h2 className={subtitle({fullWidth: true, class: "text-center md:text-left lg:pr-8"})}>
+          Beautiful, fast and modern React UI library for building accessible and customizable web
+          applications.
        </h2>
        <div className="flex flex-col items-center gap-4 md:flex-row">
          <Button
@@ -93,18 +97,18 @@ export const Hero = () => {
                name: "Copy",
                action: "click",
                category: "landing-page",
-                data: "npx nextui-cli@latest init",
+                data: "npx heroui-cli@latest init",
              });
            }}
          >
-            npx nextui-cli@latest init
+            npx heroui-cli@latest init
          </Snippet>
          <Button
            fullWidth
            isExternal
            as={Link}
            className="w-full md:hidden"
-            href="https://github.com/nextui-org/nextui"
+            href={siteConfig.links.github}
            radius="full"
            size="lg"
            startContent={<GithubIcon />}
@@ -114,7 +118,7 @@ export const Hero = () => {
                name: "Github",
                action: "click",
                category: "landing-page",
-                data: "https://github.com/nextui-org/nextui",
+                data: siteConfig.links.github,
              });
            }}
          >
@@ -1,6 +1,6 @@
 "use client";

-import {Button, Chip} from "@nextui-org/react";
+import {Button, Chip} from "@heroui/react";
 import {useEffect, useState} from "react";
 import {useTheme} from "next-themes";

@@ -10,7 +10,7 @@ import Marquee from "./marquee";

 import {useIsMobile} from "@/hooks/use-media-query";

-export const NextUIProSection = () => {
+export const HeroUIProSection = () => {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
@@ -96,7 +96,7 @@ export const NextUIProSection = () => {
          </div>
          <p className={subtitle({class: "pr-12 text-foreground-500"})}>
            Premade templates of over 210+ beautiful and responsive components, professionally
-            created by the team behind NextUI.
+            created by the team behind HeroUI.
          </p>
          <div className="mt-4 text-foreground-600 font-medium">
            <div className="flex gap-x-4 items-center">
@@ -121,11 +121,11 @@ export const NextUIProSection = () => {
              as={"a"}
              className="px-6 flex items-center"
              color="primary"
-              href="https://nextui.pro?utm_source=nextui.org&utm_medium=nextui-homepage-section"
+              href="https://heroui.pro?utm_source=heroui.org&utm_medium=heroui-homepage-section"
              rel="noopener noreferrer"
              target="_blank"
            >
-              Explore NextUI Pro
+              Explore HeroUI Pro
              <svg
                fill="none"
                height="21"
@@ -0,0 +1,32 @@
+import {Button} from "@heroui/react";
+
+export const HeroUIProButton = () => (
+  <Button
+    as={"a"}
+    className="px-6 flex items-center"
+    color="primary"
+    href="https://heroui.pro?utm_source=heroui.com&utm_medium=heroui-homepage-section"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    Explore HeroUI Pro
+    <svg fill="none" height="21" viewBox="0 0 20 21" width="20" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.0254 5.44189L17.0837 10.5002L12.0254 15.5586"
+        stroke="white"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M2.91602 10.5H16.941"
+        stroke="white"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        strokeWidth="1.5"
+      />
+    </svg>
+  </Button>
+);
@@ -0,0 +1,14 @@
+import {Chip} from "@heroui/react";
+
+export const HeroUIProChip = () => (
+  <Chip
+    classNames={{
+      base: "ml-0.5 transition-colors bg-gradient-to-br from-cyan-600 to-blue-600",
+      content: "text-tiny font-semibold",
+    }}
+    color="primary"
+    size="sm"
+  >
+    PRO
+  </Chip>
+);
@@ -0,0 +1,32 @@
+"use client";
+
+import {useTheme} from "next-themes";
+import NextImage from "next/image";
+import {useEffect, useState} from "react";
+
+export const HeroUIProImage = () => {
+  const [mounted, setMounted] = useState(false);
+  const {theme} = useTheme();
+  const isDarkMode = theme === "dark";
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  let imgSrc = isDarkMode
+    ? "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/nextuipro-section-background.webp"
+    : "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/nextuipro-section-background-light.webp";
+
+  if (!mounted) return null;
+
+  return (
+    <NextImage
+      alt="Hero Background"
+      className="opacity-0 animate-fadeIn"
+      height={3255}
+      quality={100}
+      src={imgSrc}
+      width={1920}
+    />
+  );
+};
@@ -0,0 +1,105 @@
+import {memo} from "react";
+import clsx from "clsx";
+
+import {sectionWrapper, title, titleWrapper, subtitle} from "../../primitives";
+import Marquee from "../marquee";
+
+import {HeroUIProButton} from "./heroui-pro-button";
+import {HeroUIProChip} from "./heroui-pro-chip";
+import {HeroUIProImage} from "./heroui-pro-image";
+
+const CheckmarkIcon = memo(() => (
+  <svg fill="none" height="11" viewBox="0 0 13 11" width="13" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M1 6.4L4.14286 10L12 1"
+      stroke="#006FEE"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
+  </svg>
+));
+
+CheckmarkIcon.displayName = "CheckmarkIcon";
+
+export const HeroUIProSection = () => {
+  return (
+    <section
+      className={sectionWrapper({
+        class: "flex-row items-end relative mt-16 lg:mt-44 overflow-hidden",
+      })}
+    >
+      <div className="flex min-h-[480px]">
+        <div className="w-full w-full relative z-30 flex h-full flex-col items-start justify-center leading-8 pt-4">
+          <HeroUIProChip />
+          <div className={titleWrapper({class: "mt-2 inline md:block"})}>
+            <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+              Ship&nbsp;
+            </h1>
+            <h1
+              className={title({
+                size: "lg",
+                color: "blue",
+                class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]",
+              })}
+            >
+              faster&nbsp;
+            </h1>
+            <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+              with&nbsp;
+            </h1>
+            <div className="flex flex-col sm:flex-row">
+              <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+                beautiful&nbsp;
+              </h1>
+              <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+                components
+              </h1>
+            </div>
+          </div>
+          <p className={subtitle({class: "pr-12 text-foreground-500"})}>
+            Premade templates of over 210+ beautiful and responsive components, professionally
+            created by the team behind HeroUI.
+          </p>
+          <ul className="mt-4 text-foreground-600 font-medium">
+            <li className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              210+ Components
+            </li>
+            <li className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              Lifetime Access
+            </li>
+            <li className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              Free Updates
+            </li>
+            <li className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              Figma Files Included
+            </li>
+          </ul>
+          <div className="mt-4">
+            <HeroUIProButton />
+          </div>
+        </div>
+      </div>
+      <div className="hidden md:block w-screen">
+        <Marquee
+          vertical
+          className="hidden md:block relative flex overflow-visible items-center min-h-[480px]"
+          duration={90}
+          wrapperClassName="absolute md:top-24 -left-[47%] w-[1000px]"
+        >
+          <HeroUIProImage />
+        </Marquee>
+        <div
+          className={clsx(
+            "absolute inset-0 pointer-events-none z-20 bg-white dark:bg-black",
+            "[-webkit-mask-image:radial-gradient(at_70%_50%,_rgba(255,255,255,0)_20%,_rgba(255,255,255,0.8)_40%,_rgba(0,0,0,1)_60%)]",
+          )}
+        />
+      </div>
+    </section>
+  );
+};
--- a/Show More
+++ b/Show More