ci(changesets): version packages (#1338)

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

.changeset/config.json

@@ -1,6 +1,9 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
-  "changelog": false,
+  "changelog": [
+    "@changesets/changelog-github",
+    { "repo": "nextui-org/nextui" }
+  ],
   "commit": false,
   "fixed": [],
   "linked": [],

.eslintignore

@@ -1,6 +1,7 @@
 .now/*
 .next/*
 *.css
+.changeset
 dist
 esm/*
 public/*

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

@@ -0,0 +1,27 @@
+name: "Install"
+description: "Sets up Node.js and runs install"
+
+runs:
+  using: composite
+  steps:
+    - name: Install dependencies
+      uses: pnpm/action-setup@v2.2.4
+      with:
+        version: 8
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version-file: ".nvmrc"
+        registry-url: "https://registry.npmjs.org"
+        cache: "pnpm"
+
+    - name: Setup Git User
+      shell: bash
+      run: |
+        git config --global user.email "jrgarciadev@gmail.com"
+        git config --global user.name "Junior Garcia"
+
+    - name: Install dependencies
+      shell: bash
+      run: pnpm install

.github/workflows/QA.yaml

@@ -0,0 +1,72 @@
+name: QA
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v3
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: Build packages
+        run: pnpm build
+
+  tests:
+    name: Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v3
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: Run tests
+        run: pnpm test
+
+  eslint:
+    name: ESLint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v3
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: Run ESLint
+        run: pnpm lint
+
+  types:
+    name: TypeScript
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v3
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: Run typecheck
+        run: pnpm typecheck
+
+  prettier:
+    name: Prettier
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v3
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: Run prettier
+        run: pnpm format:check

.github/workflows/main.yaml

@@ -1,128 +0,0 @@
-name: CI/CD
-
-on:
-  push:
-    branches: [main]
-    paths-ignore: ['**/README.md']
-  pull_request:
-    branches: [main]
-    types: [opened, synchronize]
-    paths-ignore: ['**/README.md']
-
-jobs:
-  avoid_reduncy:
-    runs-on: ubuntu-20.04
-    if: ${{ github.event_name == 'push' }}
-    steps:
-      - name: Cancel Previous Redundant Builds
-        uses: styfle/cancel-workflow-action@0.9.1
-        with:
-          access_token: ${{ github.token }}
-
-  lint:
-    runs-on: ubuntu-20.04
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v3
-        with:
-          cache: 'yarn'
-          node-version: '16'
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-      - name: Lint
-        run: yarn lint
-
-  build:
-    runs-on: ubuntu-20.04
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v3
-        with:
-          cache: 'yarn'
-          node-version: '16'
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-      - uses: actions/cache@v3
-        with:
-          path: ${{ github.workspace }}/.next/cache
-          # Generate a new cache whenever packages or source files change.
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
-          # If source files changed but packages didn't, rebuild from a prior cache.
-          restore-keys: |
-            ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-
-      - name: Build
-        run: yarn build
-
-  tests:
-    needs: [lint, build]
-    runs-on: ubuntu-20.04
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v3
-        with:
-          cache: 'yarn'
-          node-version: '16'
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-      - name: Test
-        run: yarn coverage:update
-      - uses: codecov/codecov-action@v2
-        with:
-          directory: './packages/react'
-        
-  publish:
-    needs: [build, tests]
-    runs-on: ubuntu-20.04
-    if: ${{ github.event_name == 'push' }}
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          cache: 'yarn'
-          node-version: '16'
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-      - name: Pre puiblish NextUI package
-        run: yarn pre-publish:nextui
-      - uses: JS-DevTools/npm-publish@v1
-        with:
-          token: ${{ secrets.NPM_TOKEN }}
-          package: './packages/react/lib/package.json'
-      - name: Show published version
-        if: steps.publish.outputs.type != 'none'
-        run: |
-          echo "Version changed: ${{ steps.publish.outputs.old-version }} => ${{ steps.publish.outputs.version }}"
-      - name: Tag new version
-        if: steps.publish.outputs.type != 'none'
-        uses: Klemensas/action-autotag@stable
-        with:
-          GITHUB_TOKEN: ${{ github.token }}
-          tag_prefix: "v"
-          package_root: "./packages/react"
-
-  update_algolia_index:
-    needs: [publish]
-    runs-on: ubuntu-20.04
-    if: ${{ github.event_name == 'push' }}
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v3
-        with:
-          cache: 'yarn'
-          node-version: '16'
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-      - name: Upload docs on Algolia
-        run: yarn build:docs-meta
-        env: 
-            ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
-            ALGOLIA_ADMIN_API_KEY: ${{ secrets.ALGOLIA_ADMIN_API_KEY }}
-            ALGOLIA_SEARCH_API_KEY: ${{ secrets.ALGOLIA_SEARCH_API_KEY }}

.github/workflows/release.yaml

@@ -1,17 +1,51 @@
-name: Tagged Release
+name: Release
 
 on:
   push:
-    tags:
-      - "v*"
+    paths:
+      - ".changeset/**"
+      - "packages/**"
+    branches:
+      - main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
 
 jobs:
-  tagged-release:
-    name: Tagged Release
-    runs-on: ubuntu-18.04
-
+  release:
+    name: Release
+    runs-on: ubuntu-latest
     steps:
-      - uses: "marvinpinto/action-automatic-releases@latest"
+      - name: Checkout branch
+        uses: actions/checkout@v3
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: Build
+        run: pnpm build
+
+      - name: Tests
+        run: pnpm test
+
+      - name: Create Release Pull Request or Publish to NPM
+        id: changesets
+        uses: changesets/action@v1
         with:
-          repo_token: "${{ github.token }}"
-          prerelease: false
+          publish: pnpm release
+          commit: "ci(changesets): version packages"
+          setupGitUser: false
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Create @dev release
+        if: steps.changesets.outputs.published != 'true'
+        run: |
+          git checkout main
+          pnpm version:dev
+          pnpm release:dev
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -20,6 +20,7 @@ coverage
 dist/
 storybook-static
 /packages/storybook/public/tailwind.css
+
 # misc
 .DS_Store
 .env

.prettierignore

@@ -2,6 +2,7 @@ dist
 node_modules
 plop
 coverage
+.changeset
 .next
 build
 scripts

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

@@ -11,7 +11,6 @@ import {MDXContent} from "@/components/mdx-content";
 import {siteConfig} from "@/config/site";
 import {Route} from "@/libs/docs/page";
 import {ChevronRightLinearIcon} from "@/components/icons";
-import {__PROD__} from "@/utils";
 
 interface BlogPostProps {
   params: {
@@ -79,7 +78,7 @@ export async function generateStaticParams(): Promise<BlogPostProps["params"][]>
 export default async function DocPage({params}: BlogPostProps) {
   const {post} = await getBlogPostFromParams({params});
 
-  if (!post || __PROD__) {
+  if (!post) {
     notFound();
   }
 

apps/docs/app/blog/page.tsx

@@ -2,15 +2,10 @@ import {allBlogPosts} from "contentlayer/generated";
 import {compareDesc} from "date-fns";
 
 import {BlogPostList} from "@/components/blog-post";
-import {__PROD__} from "@/utils";
 
 export default function Blog() {
   const posts = allBlogPosts.sort((a, b) => compareDesc(new Date(a.date), new Date(b.date)));
 
-  if (__PROD__) {
-    return null;
-  }
-
   return (
     <div className="w-full lg:px-16 mt-12">
       <div className="text-center">

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

@@ -16,7 +16,7 @@ import {useState} from "react";
 
 export default function Page() {
   const {isOpen, onOpen, onOpenChange} = useDisclosure();
-  const [modalPlacement, setModalPlacement] = useState<ModalProps["placement"]>("auto");
+  const [modalPlacement, setModalPlacement] = useState("auto");
 
   return (
     <div className="flex px-10 min-h-[80vh] justify-center items-center flex-col gap-4">
@@ -36,7 +36,11 @@ export default function Page() {
         <Radio value="top-center">top-center</Radio>
         <Radio value="bottom-center">bottom-center</Radio>
       </RadioGroup>
-      <Modal isOpen={isOpen} placement={modalPlacement} onOpenChange={onOpenChange}>
+      <Modal
+        isOpen={isOpen}
+        placement={modalPlacement as ModalProps["placement"]}
+        onOpenChange={onOpenChange}
+      >
         <ModalContent>
           {(onClose) => (
             <>

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

@@ -8,7 +8,7 @@ import {
   NavbarMenu,
   NavbarMenuItem,
   NavbarMenuToggle,
-  Avatar,
+  Button,
   Link as NextUiLink,
   LinkProps,
 } from "@nextui-org/react";
@@ -79,16 +79,13 @@ export default function Page() {
       </NavbarContent>
 
       <NavbarContent justify="end">
+        <NavbarItem className="hidden lg:flex">
+          <Link href="#">Login</Link>
+        </NavbarItem>
         <NavbarItem>
-          <Avatar
-            isBordered
-            as="button"
-            className="transition-transform"
-            color="warning"
-            name="Jane Lee"
-            size="sm"
-            src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
-          />
+          <Button as={Link} color="warning" href="#" variant="flat">
+            Sign Up
+          </Button>
         </NavbarItem>
       </NavbarContent>
 

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

@@ -51,22 +51,19 @@ export default function Page() {
           </Link>
         </NavbarItem>
       </NavbarContent>
-      <NavbarContent justify="end">
+      <NavbarContent as="div" justify="end">
         <Dropdown placement="bottom-end">
-          <NavbarItem>
-            <DropdownTrigger>
-              <Avatar
-                isBordered
-                as={Link}
-                className="transition-transform"
-                color="secondary"
-                href="#"
-                name="Jason Hughes"
-                size="sm"
-                src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
-              />
-            </DropdownTrigger>
-          </NavbarItem>
+          <DropdownTrigger>
+            <Avatar
+              isBordered
+              as="button"
+              className="transition-transform"
+              color="secondary"
+              name="Jason Hughes"
+              size="sm"
+              src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
+            />
+          </DropdownTrigger>
           <DropdownMenu aria-label="Profile Actions" variant="flat">
             <DropdownItem key="profile" className="h-14 gap-2">
               <p className="font-semibold">Signed in as</p>

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

@@ -56,7 +56,7 @@ export default function Page() {
           </NavbarItem>
         </NavbarContent>
       </NavbarContent>
-      <NavbarContent className="items-center" justify="end">
+      <NavbarContent as="div" className="items-center" justify="end">
         <Input
           classNames={{
             base: "max-w-full sm:max-w-[10rem] h-10",
@@ -72,10 +72,9 @@ export default function Page() {
             <DropdownTrigger>
               <Avatar
                 isBordered
-                as={Link}
+                as="button"
                 className="transition-transform"
                 color="secondary"
-                href="#"
                 name="Jason Hughes"
                 size="sm"
                 src="https://i.pravatar.cc/150?u=a042581f4e29026704d"

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

@@ -179,9 +179,9 @@ const MyButton2 = extendVariants(Button, {
 });
 
 export default function NextUIPerf() {
-  const [textA, setTextA] = useState<string | undefined>("");
-  const [textB, setTextB] = useState<string | undefined>("");
-  const [textC, setTextC] = useState<string | undefined>("");
+  const [textA, setTextA] = useState<string>("");
+  const [textB, setTextB] = useState<string>("");
+  const [textC, setTextC] = useState<string>("");
 
   return (
     <div className="w-full p-24 gap-4 flex flex-col">

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

@@ -271,8 +271,6 @@ export default function Page() {
 
   const [page, setPage] = useState(1);
 
-  const pages = Math.ceil(users.length / rowsPerPage);
-
   const hasSearchFilter = Boolean(filterValue);
 
   const headerColumns = useMemo(() => {
@@ -298,6 +296,8 @@ export default function Page() {
     return filteredUsers;
   }, [users, filterValue, statusFilter]);
 
+  const pages = Math.ceil(filteredItems.length / rowsPerPage);
+
   const items = useMemo(() => {
     const start = (page - 1) * rowsPerPage;
     const end = start + rowsPerPage;
@@ -390,6 +390,11 @@ export default function Page() {
     }
   }, []);
 
+  const onClear = useCallback(() => {
+    setFilterValue("");
+    setPage(1);
+  }, []);
+
   const topContent = useMemo(() => {
     return (
       <div className="flex flex-col gap-4">
@@ -400,7 +405,7 @@ export default function Page() {
             placeholder="Search by name..."
             startContent={<SearchIcon />}
             value={filterValue}
-            onClear={() => setFilterValue("")}
+            onClear={() => onClear()}
             onValueChange={onSearchChange}
           />
           <div className="flex gap-3">
@@ -483,23 +488,22 @@ export default function Page() {
         <span className="w-[30%] text-small text-default-400">
           {selectedKeys === "all"
             ? "All items selected"
-            : `${selectedKeys.size} of ${items.length} selected`}
+            : `${selectedKeys.size} of ${filteredItems.length} selected`}
         </span>
         <Pagination
           isCompact
           showControls
           showShadow
           color="primary"
-          isDisabled={hasSearchFilter}
           page={page}
           total={pages}
           onChange={setPage}
         />
         <div className="hidden sm:flex w-[30%] justify-end gap-2">
-          <Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onPreviousPage}>
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onPreviousPage}>
             Previous
           </Button>
-          <Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onNextPage}>
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onNextPage}>
             Next
           </Button>
         </div>

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

@@ -0,0 +1,37 @@
+import Rss from "rss";
+import {allBlogPosts} from "contentlayer/generated";
+
+import {siteConfig} from "@/config/site";
+import {allCoreContent} from "@/libs/contentlayer";
+
+export async function GET() {
+  const feed = new Rss({
+    title: siteConfig.name,
+    description: siteConfig.description,
+    feed_url: `${siteConfig.siteUrl}/feed.xml`,
+    site_url: siteConfig.siteUrl,
+    webMaster: `${siteConfig.author} <${siteConfig.email}>`,
+    managingEditor: `${siteConfig.author} <${siteConfig.email}>`,
+    language: "en-US",
+  });
+
+  allCoreContent(allBlogPosts).forEach((post) => {
+    const author = post.author ? post.author : siteConfig.author;
+
+    feed.item({
+      title: post.title,
+      description: post.description ?? "",
+      url: `${siteConfig.siteUrl}/blog/${post.slug}`,
+      guid: `${siteConfig.siteUrl}/blog/${post.slug}`,
+      date: post.date,
+      author: `${author} <${siteConfig.email}>`,
+      categories: post.tags ?? [],
+    });
+  });
+
+  return new Response(feed.xml(), {
+    headers: {
+      "Content-Type": "application/xml",
+    },
+  });
+}

apps/docs/app/figma/page.tsx

@@ -0,0 +1,56 @@
+import {Button, Image, Link} from "@nextui-org/react";
+
+import {Blockquote} from "@/components/docs/components/blockquote";
+
+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">
+            <Button className="max-w-fit" color="default" variant="bordered">
+              <Link
+                isExternal
+                showAnchorIcon
+                className="text-current"
+                href="https://www.figma.com/community/file/1267584376234254760"
+              >
+                Open in Figma
+              </Link>
+            </Button>
+            <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>
+    </>
+  );
+}

apps/docs/app/layout.tsx

@@ -40,7 +40,7 @@ export const metadata: Metadata = {
   ],
   icons: {
     icon: "/favicon.ico",
-    shortcut: "/favicon-16x16.png",
+    shortcut: "/favicon-32x32.png",
     apple: "/apple-touch-icon.png",
   },
   manifest: "/manifest.json",
@@ -64,7 +64,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
       <body className={clsx("min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
         <Providers themeProps={{attribute: "class", defaultTheme: "dark"}}>
           <div className="relative flex flex-col" id="app-container">
-            <Navbar routes={manifest.routes} />
+            <Navbar mobileRoutes={manifest.mobileRoutes} routes={manifest.routes} />
             {children}
             <Footer />
           </div>

apps/docs/app/page.tsx

@@ -1,4 +1,4 @@
-import {Spacer} from "@nextui-org/react";
+import {Spacer} from "@nextui-org/spacer";
 
 import {Hero} from "@/components/marketing/hero";
 import {FeaturesGrid} from "@/components/marketing/features-grid";

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

@@ -0,0 +1,116 @@
+import React, {useCallback, useEffect} from "react";
+import Script from "next/script";
+
+import carbonOptimize from "./carbon-optimize";
+
+import {loadScript} from "@/utils/scripts";
+import {useIsMounted} from "@/hooks/use-is-mounted";
+import {__PROD__} from "@/utils";
+
+const EA_PROVIDER_RATIO = 0.85;
+
+export const CarbonAd: React.FC<unknown> = () => {
+  const carbonRef = React.useRef(null);
+  const [showEthicalAds, setShowEthicalAds] = React.useState(false);
+
+  const isMounted = useIsMounted();
+
+  const loadEthicalAds = useCallback(() => {
+    return new Promise((resolve) => {
+      const script = document.createElement("script");
+
+      script.src = "https://media.ethicalads.io/media/client/ethicalads.min.js";
+      script.async = true;
+      script.onload = () => {
+        // @ts-ignore
+        resolve(window.ethicalads);
+      };
+
+      script.onerror = () => {
+        resolve(null);
+      };
+
+      document.body.appendChild(script);
+
+      return () => {
+        document.body.removeChild(script);
+      };
+    });
+  }, []);
+
+  useEffect(() => {
+    const shouldShowEthicalAds = Math.random() < EA_PROVIDER_RATIO;
+
+    let loadCarbon: any = null;
+
+    const loadCarbonAds = () => {
+      setShowEthicalAds(false);
+      // The isolation logic of carbonads is flawed.
+      // Once the script starts loading, it will asynchronous resolve, with no way to stop it.
+      // This leads to duplication of the ad. To solve the issue, we debounce the load action.
+      loadCarbon =
+        isMounted &&
+        setTimeout(() => {
+          const script = loadScript(
+            "https://cdn.carbonads.com/carbon.js?serve=CESIC53Y&placement=nextuiorg",
+            carbonRef.current,
+          );
+
+          script.id = "_carbonads_js";
+          carbonOptimize.init();
+        });
+    };
+
+    const loadAdProvider = async () => {
+      if (shouldShowEthicalAds) {
+        try {
+          const ethicalads = await loadEthicalAds();
+
+          if (!ethicalads) {
+            loadCarbonAds();
+
+            return;
+          }
+          // @ts-ignore
+          ethicalads.wait.then((placements) => {
+            if (!placements.length) {
+              loadCarbonAds();
+            } else {
+              setShowEthicalAds(true);
+            }
+          });
+        } catch (error) {
+          loadCarbonAds();
+        }
+      } else {
+        loadCarbonAds();
+      }
+    };
+
+    loadAdProvider();
+
+    return () => {
+      loadCarbon && clearTimeout(loadCarbon);
+    };
+  }, [isMounted]);
+
+  if (!__PROD__) return null;
+
+  return (
+    <>
+      <>
+        <Script async src="https://media.ethicalads.io/media/client/ethicalads.min.js" />
+        <div
+          className="ea-container horizontal"
+          data-ea-campaign-types="paid|publisher-house|community"
+          data-ea-publisher="nextuiorg"
+          data-ea-type="image"
+          style={{display: showEthicalAds ? "block" : "none"}}
+        />
+      </>
+      <div className="carbon-ad-container" style={{display: showEthicalAds ? "none" : "block"}}>
+        <span ref={carbonRef} id="carbon-ad" />
+      </div>
+    </>
+  );
+};

apps/docs/components/ads/carbon-ad/carbon-optimize.js

@@ -0,0 +1,64 @@
+export default {
+  isRefreshAble: function () {
+    return !(
+      typeof document.addEventListener === "undefined" || this.browserSupport().hidden === undefined
+    );
+  },
+  browserSupport: function () {
+    let hidden;
+    let visibilityChange;
+
+    if (typeof document.hidden !== "undefined") {
+      // Opera 12.10 and Firefox 18 and later support
+      hidden = "hidden";
+      visibilityChange = "visibilitychange";
+    } else if (typeof document.msHidden !== "undefined") {
+      hidden = "msHidden";
+      visibilityChange = "msvisibilitychange";
+    } else if (typeof document.webkitHidden !== "undefined") {
+      hidden = "webkitHidden";
+      visibilityChange = "webkitvisibilitychange";
+    }
+
+    return {
+      hidden: hidden,
+      visibilityChange: visibilityChange,
+    };
+  },
+  handleVisibilityChange: function () {
+    const isElementInViewport = function (el) {
+      let element = document.querySelector(el);
+      let bounding = element.getBoundingClientRect();
+      let isVisible;
+
+      if (
+        bounding.top >= 0 &&
+        bounding.left >= 0 &&
+        bounding.right <= window.innerWidth &&
+        bounding.bottom <= window.innerHeight
+      ) {
+        isVisible = true;
+      } else {
+        isVisible = false;
+      }
+
+      return isVisible;
+    };
+
+    if (!document.hidden) {
+      if (typeof _carbonads !== "undefined" && isElementInViewport("#carbonads")) {
+        // eslint-disable-next-line no-undef
+        _carbonads.refresh();
+      }
+    }
+  },
+  init: function () {
+    if (this.isRefreshAble()) {
+      document.addEventListener(
+        this.browserSupport().visibilityChange,
+        this.handleVisibilityChange,
+        false,
+      );
+    }
+  },
+};

apps/docs/components/ads/carbon-ad/index.ts

@@ -0,0 +1 @@
+export * from "./carbon-ad";

apps/docs/components/blog-post.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import {BlogPost} from "contentlayer/generated";
-import {Card, CardFooter, CardBody, CardHeader, Link, Avatar} from "@nextui-org/react";
+import {Card, CardFooter, CardBody, CardHeader, Link, Avatar, Image} from "@nextui-org/react";
 import Balancer from "react-wrap-balancer";
 import {format, parseISO} from "date-fns";
 import NextLink from "next/link";
@@ -39,10 +39,9 @@ const BlogPostCard = (post: BlogPost) => {
                 <Balancer>{post.title}</Balancer>
               </Link>
             </CardHeader>
-            <CardBody className="px-3 pt-0 pb-1">
-              <p className="font-normal text-default-600">
-                <Balancer>{post.description}</Balancer>
-              </p>
+            <CardBody className="pt-0 px-2 pb-1">
+              <Image className="mb-3" src={post.image} />
+              <p className="font-normal px-1 text-default-600">{post.description}</p>
             </CardBody>
             <CardFooter className="flex justify-between items-center">
               <time className="block text-small text-default-500" dateTime={post.date}>

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

@@ -5,11 +5,14 @@ import {useInView} from "framer-motion";
 import {useRef, FC, useEffect, useState, useCallback} from "react";
 import {Button, cn, Spinner, Tooltip} from "@nextui-org/react";
 
+import {PlayBoldIcon, PauseBoldIcon} from "@/components/icons";
 import {RotateLeftLinearIcon} from "@/components/icons";
 
 interface VideoInViewProps {
   src: string;
+  playMode?: "auto" | "manual";
   autoPlay?: boolean;
+  poster?: string;
   width?: number;
   height?: number;
   controls?: boolean;
@@ -20,18 +23,25 @@ export const VideoInView: FC<VideoInViewProps> = ({
   src,
   width,
   height,
+  poster,
   autoPlay = true,
+  playMode = "manual",
   controls = false,
   className,
 }) => {
   const [isLoading, setIsLoading] = useState(true);
+  const [isPlaying, setIsPlaying] = useState(false);
 
   const videoRef = useRef<HTMLVideoElement>(null);
 
   const isVisible = useInView(videoRef);
 
-  // play video when it is visible
+  // play video when it is visible and playMode is auto
   useEffect(() => {
+    if (playMode !== "auto") {
+      return;
+    }
+
     if (isVisible) {
       videoRef.current?.play();
     } else {
@@ -39,19 +49,53 @@ export const VideoInView: FC<VideoInViewProps> = ({
     }
   }, [isVisible]);
 
-  const handleCanPlayThrough = useCallback(() => {
+  const handleCanPlay = useCallback(() => {
     setIsLoading(false);
   }, []);
 
+  useEffect(() => {
+    const videoEl = videoRef.current;
+
+    if (videoEl) {
+      if (videoEl.readyState > 3) {
+        // HAVE_FUTURE_DATA: enough data to start playing
+        handleCanPlay();
+      } else {
+        videoEl.addEventListener("canplaythrough", handleCanPlay);
+      }
+
+      // Cleanup the event listener
+      return () => {
+        videoEl.removeEventListener("canplaythrough", handleCanPlay);
+      };
+    }
+  }, []);
+
   const onRestart = useCallback(() => {
     if (videoRef.current) {
       videoRef.current.currentTime = 0;
       videoRef.current.play();
+      setIsPlaying(true);
     }
   }, []);
 
+  const onTogglePlay = useCallback(() => {
+    if (videoRef.current) {
+      if (!isPlaying) {
+        videoRef.current.play();
+      } else {
+        videoRef.current.pause();
+      }
+
+      setIsPlaying((v) => !v);
+    }
+  }, [isPlaying]);
+
   return (
-    <div className="relative">
+    <div
+      className="relative data-[playing=true]:after:opacity-0 data-[playing=true]:after:z-[-1] after:content-[''] after:absolute after:inset-0 after:bg-black/30 after:z-20 after:transition-opacity"
+      data-playing={isPlaying}
+    >
       {isLoading && (
         <Spinner
           className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
@@ -59,6 +103,22 @@ export const VideoInView: FC<VideoInViewProps> = ({
           size="lg"
         />
       )}
+      <Tooltip content={isPlaying ? "Pause" : "Play"} delay={1000}>
+        <Button
+          isIconOnly
+          className="absolute z-50 right-12 top-3 border-1 border-transparent bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100 before:rounded-lg"
+          size="sm"
+          variant="bordered"
+          onPress={onTogglePlay}
+        >
+          {isPlaying ? (
+            <PauseBoldIcon className="text-white" size={16} />
+          ) : (
+            <PlayBoldIcon className="text-white" size={16} />
+          )}
+        </Button>
+      </Tooltip>
+
       <Tooltip content="Restart" delay={1000}>
         <Button
           isIconOnly
@@ -67,24 +127,24 @@ export const VideoInView: FC<VideoInViewProps> = ({
           variant="bordered"
           onPress={onRestart}
         >
-          <RotateLeftLinearIcon size={16} />
+          <RotateLeftLinearIcon className="text-white" size={16} />
         </Button>
       </Tooltip>
       <video
         ref={videoRef}
         loop
         muted
-        autoPlay={autoPlay}
+        autoPlay={autoPlay && playMode === "auto"}
         className={cn(
           "w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg",
           className,
         )}
         controls={controls}
         height={height}
+        poster={poster}
         src={src}
         width={width}
-        onCanPlayThrough={handleCanPlayThrough}
-        onPlaying={() => setIsLoading(false)}
+        onCanPlay={handleCanPlay}
       />
     </div>
   );

apps/docs/components/cmdk.tsx

@@ -11,7 +11,7 @@ import {usePathname, useRouter} from "next/navigation";
 import MultiRef from "react-multi-ref";
 import {clsx} from "@nextui-org/shared-utils";
 import scrollIntoView from "scroll-into-view-if-needed";
-import {isAppleDevice} from "@react-aria/utils";
+import {isAppleDevice, isWebKit} from "@react-aria/utils";
 import {create} from "zustand";
 import {intersectionBy, isEmpty} from "lodash";
 import {writeStorage, useLocalStorage} from "@rehooks/local-storage";
@@ -194,8 +194,6 @@ export const Cmdk: FC<{}> = () => {
     };
 
     document.addEventListener("keydown", onKeyDown);
-
-    return () => document.removeEventListener("keydown", onKeyDown);
   }, [isOpen]);
 
   const onItemSelect = useCallback(
@@ -366,14 +364,14 @@ export const Cmdk: FC<{}> = () => {
       placement="top-center"
       scrollBehavior="inside"
       size="xl"
-      onClose={onClose}
+      onClose={() => onClose()}
     >
       <ModalContent>
         <Command className={slots.base()} label="Quick search command" shouldFilter={false}>
           <div className={slots.header()}>
             <SearchLinearIcon className={slots.searchIcon()} strokeWidth={2} />
             <Command.Input
-              autoFocus
+              autoFocus={!isWebKit()}
               className={slots.input()}
               placeholder="Search documentation"
               value={query}

apps/docs/components/docs/components/blockquote.tsx

@@ -1,8 +1,10 @@
+"use client";
+
 import {FC} from "react";
 import {tv, VariantProps} from "tailwind-variants";
 
 const blockquoteStyles = tv({
-  base: "border pl-4 bg-default-50 my-6 py-3 rounded-xl [&>p]:m-0",
+  base: "border px-4 bg-default-50 my-6 py-3 rounded-xl [&>p]:m-0",
   variants: {
     color: {
       default: "border-default-200 dark:border-default-100 bg-default-200/20",

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

@@ -1,12 +1,15 @@
-import {Button, ButtonProps, Link} from "@nextui-org/react";
+import {Button, ButtonProps, Code, Link, Tooltip} from "@nextui-org/react";
+import {ReactNode} from "react";
+import Balancer from "react-wrap-balancer";
 
-import {GithubIcon, NpmIcon, AdobeIcon, StorybookIcon} from "@/components/icons";
+import {GithubIcon, NpmIcon, AdobeIcon, StorybookIcon, NextJsIcon} from "@/components/icons";
 import {COMPONENT_PATH, COMPONENT_THEME_PATH} from "@/libs/github/constants";
 
 export interface ComponentLinksProps {
   component: string;
   styles?: string;
   storybook?: string;
+  rscCompatible?: boolean;
   reactAriaHook?: string;
 }
 
@@ -14,27 +17,40 @@ const ButtonLink = ({
   children,
   href,
   startContent,
+  tooltip,
   ...props
 }: ButtonProps & {
   href: string;
-}) => (
-  <Button
-    isExternal
-    as={Link}
-    className="!text-small py-4 bg-default-100 dark:bg-default-50 text-default-700"
-    href={href}
-    size="sm"
-    startContent={startContent}
-    {...props}
-  >
-    {children}
-  </Button>
-);
+  tooltip?: string | ReactNode;
+}) => {
+  const button = (
+    <Button
+      isExternal
+      as={Link}
+      className="!text-small py-4 bg-default-100 dark:bg-default-50 text-default-700"
+      href={href}
+      size="sm"
+      startContent={startContent}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+
+  return tooltip ? (
+    <Tooltip className="max-w-[230px]" content={tooltip}>
+      {button}
+    </Tooltip>
+  ) : (
+    button
+  );
+};
 
 export const ComponentLinks = ({
   component,
   storybook,
   styles,
+  rscCompatible,
   reactAriaHook,
 }: ComponentLinksProps) => {
   if (!component) {
@@ -44,7 +60,7 @@ export const ComponentLinks = ({
   return (
     <div className="flex flex-wrap gap-3 mt-6">
       <ButtonLink
-        href={`https://storiesv2.nextui.org/?path=/story/components-${storybook || component}`}
+        href={`https://storybook.nextui.org/?path=/story/components-${storybook || component}`}
         startContent={<StorybookIcon className="text-lg text-[#ff4785]" />}
       >
         Storybook
@@ -63,6 +79,26 @@ export const ComponentLinks = ({
           React Aria
         </ButtonLink>
       )}
+      {rscCompatible && (
+        <ButtonLink
+          href="https://nextjs.org/docs/getting-started/react-essentials#server-components"
+          startContent={<NextJsIcon size={18} />}
+          tooltip={
+            <p>
+              <Balancer>
+                This component doesn&apos;t use the
+                <Code className="font-normal bg-transparent px-0 py-0 text-code-mdx">
+                  `use client;`
+                </Code>
+                directive making it compatible with RSC.
+              </Balancer>
+            </p>
+          }
+        >
+          Server component
+        </ButtonLink>
+      )}
+
       <ButtonLink href={`${COMPONENT_PATH}/${component}`} startContent={<GithubIcon size={20} />}>
         Source
       </ButtonLink>

apps/docs/components/icons/bold/index.ts

@@ -14,3 +14,5 @@ export * from "./info";
 export * from "./document-code";
 export * from "./hash";
 export * from "./more-square";
+export * from "./play";
+export * from "./pause";

apps/docs/components/icons/bold/pause.tsx

@@ -0,0 +1,23 @@
+import {IconSvgProps} from "@/types";
+
+export const PauseBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <path
+      d="M10.65 19.11V4.89C10.65 3.54 10.08 3 8.64 3H5.01C3.57 3 3 3.54 3 4.89V19.11C3 20.46 3.57 21 5.01 21H8.64C10.08 21 10.65 20.46 10.65 19.11Z"
+      fill="currentColor"
+    />
+    <path
+      d="M21 19.11V4.89C21 3.54 20.43 3 18.99 3H15.36C13.93 3 13.35 3.54 13.35 4.89V19.11C13.35 20.46 13.92 21 15.36 21H18.99C20.43 21 21 20.46 21 19.11Z"
+      fill="currentColor"
+    />
+  </svg>
+);

apps/docs/components/icons/bold/play.tsx

@@ -0,0 +1,19 @@
+import {IconSvgProps} from "@/types";
+
+export const PlayBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <path
+      d="M4 11.9999V8.43989C4 4.01989 7.13 2.2099 10.96 4.4199L14.05 6.1999L17.14 7.9799C20.97 10.1899 20.97 13.8099 17.14 16.0199L14.05 17.7999L10.96 19.5799C7.13 21.7899 4 19.9799 4 15.5599V11.9999Z"
+      fill="currentColor"
+    />
+  </svg>
+);

apps/docs/components/mdx-components.tsx

@@ -7,6 +7,7 @@ import NextImage from "next/image";
 import {ThemeSwitch} from "./theme-switch";
 
 import {Sandpack} from "@/components/sandpack";
+import {CarbonAd} from "@/components/ads/carbon-ad";
 import * as DocsComponents from "@/components/docs/components";
 import * as BlogComponents from "@/components/blog/components";
 import {Codeblock} from "@/components/docs/components";
@@ -195,7 +196,7 @@ export const MDXComponents = {
   thead: Thead,
   tr: Trow,
   td: Tcol,
-  // CarbonAd,
+  CarbonAd,
   code: Code,
   ul: List,
   a: (props: React.HTMLAttributes<HTMLAnchorElement>) => <Link {...props} />,

apps/docs/components/navbar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import {useRef, useState, FC, ReactNode} from "react";
+import {useRef, useState, FC, ReactNode, Key} from "react";
 import {
   link,
   Navbar as NextUINavbar,
@@ -16,6 +16,7 @@ import {
   DropdownMenu,
   DropdownItem,
   DropdownTrigger,
+  Chip,
 } from "@nextui-org/react";
 import {dataFocusVisibleClasses} from "@nextui-org/theme";
 import {ChevronDownIcon, LinkIcon} from "@nextui-org/shared-icons";
@@ -42,16 +43,16 @@ import {
 import {useIsMounted} from "@/hooks/use-is-mounted";
 import {DocsSidebar} from "@/components/docs/sidebar";
 import {useCmdkStore} from "@/components/cmdk";
-import {__PROD__} from "@/utils";
 
 export interface NavbarProps {
   routes: Route[];
+  mobileRoutes?: Route[];
   tag?: string;
   slug?: string;
   children?: ReactNode;
 }
 
-export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
+export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], slug, tag}) => {
   const [isMenuOpen, setIsMenuOpen] = useState<boolean | undefined>(false);
   const [commandKey, setCommandKey] = useState<"ctrl" | "command">("command");
 
@@ -60,7 +61,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
 
   const pathname = usePathname();
 
-  const cmkdStore = useCmdkStore();
+  const cmdkStore = useCmdkStore();
 
   useEffect(() => {
     if (isMenuOpen) {
@@ -73,7 +74,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
   }, []);
 
   const {pressProps} = usePress({
-    onPress: () => cmkdStore.onOpen(),
+    onPress: () => cmdkStore.onOpen(),
   });
   const {focusProps, isFocusVisible} = useFocusRing();
 
@@ -99,7 +100,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
           strokeWidth={2}
         />
       }
-      onPress={() => cmkdStore.onOpen()}
+      onPress={() => cmdkStore.onOpen()}
     >
       Quick Search...
     </Button>
@@ -109,10 +110,15 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
     return null;
   }
 
-  const navLinkClasses = clsx(
-    link({color: "foreground"}),
-    "data-[active=true]:text-primary data-[active=true]:font-medium",
-  );
+  const navLinkClasses = clsx(link({color: "foreground"}), "data-[active=true]:text-primary");
+
+  const handleVersionChange = (key: Key) => {
+    if (key === "v1") {
+      const newWindow = window.open("https://v1.nextui.org", "_blank", "noopener,noreferrer");
+
+      if (newWindow) newWindow.opener = null;
+    }
+  };
 
   return (
     <NextUINavbar
@@ -158,6 +164,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
                 aria-label="NextUI versions"
                 defaultSelectedKeys={["v2"]}
                 selectionMode="single"
+                onAction={handleVersionChange}
               >
                 <DropdownItem key="v2">v2.0.0</DropdownItem>
                 <DropdownItem key="v1" endContent={<LinkIcon />}>
@@ -169,7 +176,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
             <div className="w-[74px]" />
           )}
         </NavbarBrand>
-        <ul className="hidden lg:flex gap-4 justify-start">
+        <ul className="hidden lg:flex gap-4 justify-start items-center">
           <NavbarItem>
             <NextLink
               className={navLinkClasses}
@@ -190,18 +197,16 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
               Components
             </NextLink>
           </NavbarItem>
-          {!__PROD__ && (
-            <NavbarItem>
-              <NextLink
-                className={navLinkClasses}
-                color="foreground"
-                data-active={includes(pathname, "blog")}
-                href="/blog"
-              >
-                Blog
-              </NextLink>
-            </NavbarItem>
-          )}
+          <NavbarItem>
+            <NextLink
+              className={navLinkClasses}
+              color="foreground"
+              data-active={includes(pathname, "blog")}
+              href="/blog"
+            >
+              Blog
+            </NextLink>
+          </NavbarItem>
           <NavbarItem>
             <NextLink
               className={navLinkClasses}
@@ -212,6 +217,17 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
               Figma
             </NextLink>
           </NavbarItem>
+          <NavbarItem>
+            <Chip
+              as={NextLink}
+              className="hover:bg-default-100 border-default-200/80 dark:border-default-100/80 transition-colors cursor-pointer"
+              color="secondary"
+              href="/blog/nextui-v2"
+              variant="dot"
+            >
+              Introducing NextUI v2.0
+            </Chip>
+          </NavbarItem>
         </ul>
       </NavbarContent>
 
@@ -243,7 +259,12 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
             <SearchLinearIcon className="mt-px text-default-600 dark:text-default-500" size={20} />
           </button>
         </NavbarItem>
-        <NavbarMenuToggle aria-label={isMenuOpen ? "Close menu" : "Open menu"} className="ml-2" />
+        <NavbarItem className="w-10 h-full">
+          <NavbarMenuToggle
+            aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+            className="w-full h-full pt-1"
+          />
+        </NavbarItem>
       </NavbarContent>
 
       <NavbarContent className="hidden sm:flex basis-1/5 sm:basis-full" justify="end">
@@ -273,15 +294,15 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
           >
             Sponsor
           </Button>
-        </NavbarItem>{" "}
+        </NavbarItem>
         <NavbarMenuToggle
           aria-label={isMenuOpen ? "Close menu" : "Open menu"}
-          className="hidden sm:flex lg:hidden"
+          className="hidden sm:flex lg:hidden ml-4"
         />
       </NavbarContent>
 
       <NavbarMenu>
-        <DocsSidebar className="mt-4" routes={routes} slug={slug} tag={tag} />
+        <DocsSidebar className="mt-4" routes={[...mobileRoutes, ...routes]} slug={slug} tag={tag} />
         {children}
       </NavbarMenu>
     </NextUINavbar>

apps/docs/components/sandpack/theme.ts

@@ -30,8 +30,7 @@ export const nextuiTheme: SandpackTheme = {
   },
   font: {
     body: "Inter var",
-    mono:
-      'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
     size: "14px",
     lineHeight: "1.5rem",
   },

apps/docs/components/sandpack/use-sandpack.ts

@@ -65,7 +65,7 @@ export const useSandpack = ({
 
   let dependencies = {
     "framer-motion": "10.12.16",
-    "@nextui-org/react": "dev-v2",
+    "@nextui-org/react": "latest",
   };
 
   // sort files by dependency

apps/docs/config/routes.json

@@ -318,5 +318,39 @@
         }
       ]
     }
+  ],
+  "mobileRoutes": [
+    {
+      "key": "getting-started",
+      "title": "Getting Started",
+      "defaultOpen": true,
+      "keywords": "getting started, main routes, blog, docs, components, nextui",
+      "routes": [
+        {
+          "key": "docs",
+          "title": "Documentation",
+          "keywords": "documentation, guide, nextui",
+          "path": "/docs/guide/introduction.mdx"
+        },
+        {
+          "key": "components",
+          "title": "Components",
+          "keywords": "components, nextui",
+          "path": "/docs/components/avatar"
+        },
+        {
+          "key": "blog",
+          "title": "Blog",
+          "keywords": "blog, nextui, news, updates",
+          "path": "/blog"
+        },
+        {
+          "key": "figma",
+          "title": "Figma",
+          "keywords": "figma, nextui, design, ui kit",
+          "path": "/figma"
+        }
+      ]
+    }
   ]
 }

apps/docs/config/site.ts

@@ -4,6 +4,9 @@ export const siteConfig = {
   name: "NextUI - Beautiful, fast and modern React UI Library",
   description: "Make beautiful websites regardless of your design experience.",
   ogImage: "https://nextui.org/twitter-cards/nextui.jpeg",
+  author: "Junior Garcia",
+  email: "jrgarciadev@gmail.com",
+  siteUrl: "https://nextui.org",
   creator: "@getnextui",
   openGraph: {
     type: "website",

apps/docs/content/blog/nextui-v2.mdx

@@ -1,8 +1,9 @@
 ---
-title: "Introducing NextUI Version 2"
-description: "Discover NextUI v2. TailwindCSS integration, enhanced theming, improved animations, and more."
-date: "2023-07-29"
+title: "Introducing NextUI Version 2.0"
+description: "Discover NextUI v2.0 TailwindCSS integration, enhanced theming, improved animations, and more."
+date: "2023-07-31"
 image: "/blog/nextuiv2.jpg"
+tags: ["nextui", "tailwindcss", "react", "nextjs", "react-server-components"]
 author:
   name: "Junior Garcia"
   username: "@jrgarciadev"
@@ -24,18 +25,18 @@ towards achieving that.
 
 ## Table of Contents
 
-- [Transition to TailwindCSS](#transition-to-tailwindcss) - Our shift to TailwindCSS.
+- [Transition to TailwindCSS](#transition-from-stitches-to-tailwindcss) - Our shift to TailwindCSS.
 - [TailwindCSS Plugin](#tailwindcss-plugin) - Introducing theme customization plugin.
-- [React Server Components](#react-server-components) - Enhanced performance with React Server Components.
-- [Custom Themes, Layouts, Colors](#custom-themes-layouts-colors) - New customizability options.
+- [React Server Components](#react-server-components-support) - Enhanced performance with React Server Components.
+- [Custom Themes, Layouts, Colors](#custom-themes-layouts-and-colors) - New customizability options.
 - [Enhanced Documentation](#enhanced-documentation) - A better navigation experience.
-- [New Templates & Guides](#new-templates-guides) - Easier app creation process.
+- [New Templates & Guides](#new-templates-and-guides) - Easier app creation process.
 - [Custom Variants](#custom-variants) - Customization of components' variants.
 - [Enhanced Styling Model](#enhanced-styling-model) - Effortless component styling.
 - [Tailwind Variants](#tailwind-variants) - Our new library for better TailwindCSS handling.
 - [Revamped Components](#revamped-components) - Rewritten components with react-aria hooks.
 - [Optimized Animations](#optimized-animations) - Smoother app animations.
-- [Individual Packages](#individual-packages) - Install only what you need.
+- [Individual Packages](#individual-packages-support) - Install only what you need.
 - [Dark Mode Support](#dark-mode-support) - Easier implementation of dark mode.
 - [New Components](#new-components) - Six new components added.
 - [Figma Community File](#figma-community-file) - Streamlining design-to-development process.
@@ -85,8 +86,8 @@ Thanks to the switch to TailwindCSS, **NextUI v2.0** now supports React Server C
 improves performance and allows you to use it with the latest versions of [React](https://reactjs.org/) and
 [Next.js](https://nextjs.org/).
 
-NextUI components already inclue the `use client;` directive so you can import them
-server components.
+NextUI components already include the `use client;` directive so you can import them directly 
+in your React Server Components (RSC).
 
 ```jsx
 // app/page.tsx
@@ -144,7 +145,8 @@ links at the top of each component documentation, such as the component storyboo
 the source code and styles source code.
 
 <VideoInView
-  src="https://nextui-public-resources.s3.amazonaws.com/new-docs.mp4"
+  src="https://d2u8k2ocievbld.cloudfront.net/new-docs.mp4"
+  poster="https://d2u8k2ocievbld.cloudfront.net/new-docs-poster.png"
   width={700}
   height={350}
 />
@@ -167,21 +169,23 @@ installation guides, are introduced to aid your app creation process.
 We've added a new function, `extendVariants`, that allows you to customize any NextUI components's variants.
 
 <VideoInView
-  src="https://nextui-public-resources.s3.amazonaws.com/custom-variants.mp4"
+  src="https://d2u8k2ocievbld.cloudfront.net/custom-variants.mp4"
+  poster="https://d2u8k2ocievbld.cloudfront.net/custom-variants-poster.png"
   width={700}
   height={350}
 />
 
 You can create or override the component `variants`, `defaultVariants` and `componentVariants`.
 
-> Check out the [Custom Variants](/docs/customization/variants) documentation for more information.
+> Check out the [Custom Variants](/docs/customization/custom-variants) documentation for more information.
 
 ### Enhanced Styling Model
 
 With the new slots model, you can style every part of your components effortlessly.
 
 <VideoInView
-  src="https://nextui-public-resources.s3.amazonaws.com/override-styles.mp4"
+  src="https://d2u8k2ocievbld.cloudfront.net/override-styles.mp4"
+  poster="https://d2u8k2ocievbld.cloudfront.net/override-styles-poster.png"
   width={700}
   height={350}
 />
@@ -206,7 +210,8 @@ Thanks to [framer-motion](https://www.framer.com/motion/), we've significantly i
 app feel more fluid and smooth.
 
 <VideoInView
-  src="https://nextui-public-resources.s3.amazonaws.com/dropdown-animation.mp4"
+  src="https://d2u8k2ocievbld.cloudfront.net/dropdown-animation.mp4"
+  poster="https://d2u8k2ocievbld.cloudfront.net/dropdown-animation-poster.png"
   width={700}
   height={350}
 />
@@ -251,7 +256,8 @@ ReactDOM.createRoot(document.getElementById("root")).render(
 ```
 
 <VideoInView
-  src="https://nextui-public-resources.s3.amazonaws.com/dark-mode.mp4"
+  src="https://d2u8k2ocievbld.cloudfront.net/dark-mode.mp4"
+  poster="https://d2u8k2ocievbld.cloudfront.net/dark-mode-poster.png"
   width={700}
   height={350}
 />
@@ -280,7 +286,7 @@ file helps streamline the process of transforming design ideas into functioning
 </Blockquote>
 
 <iframe
-  height="450"
+  height="600"
   width="800"
   src="https://embed.figma.com/file/1267584376234254760/hf_embed?community_viewer=true&embed_host=nextui"
   className="aspect-video w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
@@ -289,7 +295,12 @@ file helps streamline the process of transforming design ideas into functioning
 <Spacer y={10} />
 
 <Button color="default" variant="bordered">
-  <Link isExternal className="text-current" href="https://www.figma.com/community/file/1267584376234254760">
+  <Link
+    isExternal
+    showAnchorIcon
+    className="text-current"
+    href="https://www.figma.com/community/file/1267584376234254760"
+  >
     Open in Figma
   </Link>
 </Button>

apps/docs/content/components/checkbox-group/custom-styles.ts

@@ -6,7 +6,7 @@ export const CustomCheckbox = ({ user, statusColor, value }) => {
       aria-label={user.name}
       classNames={{
         base: cn(
-          "inline-flex max-w-md w-full bg-content1",
+          "inline-flex max-w-md w-full bg-content1 m-0",
           "hover:bg-content2 items-center justify-start",
           "cursor-pointer rounded-lg gap-2 p-4 border-2 border-transparent",
           "data-[selected=true]:border-primary"

apps/docs/content/components/navbar/with-avatar.ts

@@ -19,6 +19,7 @@ export default function App() {
         <AcmeLogo />
         <p className="font-bold text-inherit">ACME</p>
       </NavbarBrand>
+
       <NavbarContent className="hidden sm:flex gap-4" justify="center">
         <NavbarItem>
           <Link color="foreground" href="#">
@@ -36,22 +37,20 @@ export default function App() {
           </Link>
         </NavbarItem>
       </NavbarContent>
-      <NavbarContent justify="end">
+
+      <NavbarContent as="div" justify="end">
         <Dropdown placement="bottom-end">
-          <NavbarItem>
-            <DropdownTrigger>
-              <Avatar
-                isBordered
-                as={Link}
-                href="#"
-                className="transition-transform"
-                color="secondary"
-                name="Jason Hughes"
-                size="sm"
-                src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
-              />
-            </DropdownTrigger>
-          </NavbarItem>
+          <DropdownTrigger>
+            <Avatar
+              isBordered
+              as="button"
+              className="transition-transform"
+              color="secondary"
+              name="Jason Hughes"
+              size="sm"
+              src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
+            />
+          </DropdownTrigger>
           <DropdownMenu aria-label="Profile Actions" variant="flat">
             <DropdownItem key="profile" className="h-14 gap-2">
               <p className="font-semibold">Signed in as</p>

apps/docs/content/components/navbar/with-search-input.ts

@@ -74,7 +74,8 @@ export default function App() {
           </NavbarItem>
         </NavbarContent>
       </NavbarContent>
-      <NavbarContent className="items-center" justify="end">
+
+      <NavbarContent as="div" className="items-center" justify="end">
         <Input
           classNames={{
             base: "max-w-full sm:max-w-[10rem] h-10",
@@ -87,20 +88,17 @@ export default function App() {
           type="search"
         />
         <Dropdown placement="bottom-end">
-          <NavbarItem>
-            <DropdownTrigger>
-              <Avatar
-                isBordered
-                as={Link}
-                href="#"
-                className="transition-transform"
-                color="secondary"
-                name="Jason Hughes"
-                size="sm"
-                src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
-              />
-            </DropdownTrigger>
-          </NavbarItem>
+          <DropdownTrigger>
+            <Avatar
+              isBordered
+              as="button"
+              className="transition-transform"
+              color="secondary"
+              name="Jason Hughes"
+              size="sm"
+              src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
+            />
+          </DropdownTrigger>
           <DropdownMenu aria-label="Profile Actions" variant="flat">
             <DropdownItem key="profile" className="h-14 gap-2">
               <p className="font-semibold">Signed in as</p>

apps/docs/content/components/radio-group/custom-styles.ts

@@ -8,7 +8,7 @@ export const CustomRadio = (props) => {
       {...otherProps}
       classNames={{
         base: cn(
-          "inline-flex bg-content1 hover:bg-content2 items-center justify-between",
+          "inline-flex m-0 bg-content1 hover:bg-content2 items-center justify-between",
           "flex-row-reverse max-w-[300px] cursor-pointer rounded-lg gap-4 p-4 border-2 border-transparent",
           "data-[selected=true]:border-primary"
         ),

apps/docs/content/components/table/use-case.ts

@@ -360,8 +360,6 @@ export default function App() {
   });
   const [page, setPage] = React.useState(1);
 
-  const pages = Math.ceil(users.length / rowsPerPage);
-
   const hasSearchFilter = Boolean(filterValue);
 
   const headerColumns = React.useMemo(() => {
@@ -387,6 +385,8 @@ export default function App() {
     return filteredUsers;
   }, [users, filterValue, statusFilter]);
 
+  const pages = Math.ceil(filteredItems.length / rowsPerPage);
+
   const items = React.useMemo(() => {
     const start = (page - 1) * rowsPerPage;
     const end = start + rowsPerPage;
@@ -452,7 +452,7 @@ export default function App() {
         return cellValue;
     }
   }, []);
-  
+
   const onNextPage = React.useCallback(() => {
     if (page < pages) {
       setPage(page + 1);
@@ -479,6 +479,11 @@ export default function App() {
     }
   }, []);
 
+  const onClear = useCallback(()=>{
+    setFilterValue("")
+    setPage(1)
+  },[])
+
   const topContent = React.useMemo(() => {
     return (
       <div className="flex flex-col gap-4">
@@ -489,7 +494,7 @@ export default function App() {
             placeholder="Search by name..."
             startContent={<SearchIcon />}
             value={filterValue}
-            onClear={() => setFilterValue("")}
+            onClear={() => onClear()}
             onValueChange={onSearchChange}
           />
           <div className="flex gap-3">
@@ -572,23 +577,22 @@ export default function App() {
         <span className="w-[30%] text-small text-default-400">
           {selectedKeys === "all"
             ? "All items selected"
-            : \`\${selectedKeys.size} of \${items.length} selected\`}
+            : \`\${selectedKeys.size} of \${filteredItems.length} selected\`}
         </span>
         <Pagination
           isCompact
           showControls
           showShadow
           color="primary"
-          isDisabled={hasSearchFilter}
           page={page}
           total={pages}
           onChange={setPage}
         />
         <div className="hidden sm:flex w-[30%] justify-end gap-2">
-          <Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onPreviousPage}>
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onPreviousPage}>
             Previous
           </Button>
-          <Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onNextPage}>
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onNextPage}>
             Next
           </Button>
         </div>
@@ -682,7 +686,8 @@ export default function App() {
     column: "age",
     direction: "ascending",
   });
-  const pages = Math.ceil(users.length / rowsPerPage);
+
+  const [page, setPage] = useState(1);
 
   const hasSearchFilter = Boolean(filterValue);
 
@@ -709,6 +714,8 @@ export default function App() {
     return filteredUsers;
   }, [users, filterValue, statusFilter]);
 
+  const pages = Math.ceil(filteredItems.length / rowsPerPage);
+
   const items = React.useMemo(() => {
     const start = (page - 1) * rowsPerPage;
     const end = start + rowsPerPage;
@@ -774,7 +781,7 @@ export default function App() {
         return cellValue;
     }
   }, []);
-  
+
   const onNextPage = React.useCallback(() => {
     if (page < pages) {
       setPage(page + 1);
@@ -801,6 +808,11 @@ export default function App() {
     }
   }, []);
 
+  const onClear = useCallback(()=>{
+    setFilterValue("")
+    setPage(1)
+  },[])
+
   const topContent = React.useMemo(() => {
     return (
       <div className="flex flex-col gap-4">
@@ -811,7 +823,7 @@ export default function App() {
             placeholder="Search by name..."
             startContent={<SearchIcon />}
             value={filterValue}
-            onClear={() => setFilterValue("")}
+            onClear={() => onClear()}
             onValueChange={onSearchChange}
           />
           <div className="flex gap-3">
@@ -894,23 +906,22 @@ export default function App() {
         <span className="w-[30%] text-small text-default-400">
           {selectedKeys === "all"
             ? "All items selected"
-            : \`\${selectedKeys.size} of \${items.length} selected\`}
+            : \`\${selectedKeys.size} of \${filteredItems.length} selected\`}
         </span>
         <Pagination
           isCompact
           showControls
           showShadow
           color="primary"
-          isDisabled={hasSearchFilter}
           page={page}
           total={pages}
           onChange={setPage}
         />
         <div className="hidden sm:flex w-[30%] justify-end gap-2">
-          <Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onPreviousPage}>
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onPreviousPage}>
             Previous
           </Button>
-          <Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onNextPage}>
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onNextPage}>
             Next
           </Button>
         </div>

apps/docs/content/docs/components/accordion.mdx

@@ -13,6 +13,8 @@ Accordion display a list of high-level options that can expand/collapse to revea
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 NextUI exports 2 accordion-related components:

apps/docs/content/docs/components/avatar.mdx

@@ -14,6 +14,8 @@ The Avatar component is used to represent a user, and displays the profile pictu
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 NextUI exports 3 avatar-related components:

apps/docs/content/docs/components/badge.mdx

@@ -9,10 +9,12 @@ import {badgeContent} from "@/content/components/badge";
 
 Badges are used as a small numerical value or status descriptor for UI elements.
 
-<ComponentLinks component="badge" />
+<ComponentLinks component="badge" rscCompatible />
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/components/button.mdx

@@ -13,6 +13,8 @@ Buttons allow users to perform actions and choose with a single tap.
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 NextUI exports 2 button-related components:

apps/docs/content/docs/components/card.mdx

@@ -13,6 +13,8 @@ Card is a container for text, photos, and actions in the context of a single sub
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 NextUI exports 4 card-related components:

apps/docs/content/docs/components/checkbox-group.mdx

@@ -13,6 +13,8 @@ A CheckboxGroup allows users to select one or more items from a list of choices.
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 NextUI exports 2 checkbox-related components:

apps/docs/content/docs/components/checkbox.mdx

@@ -13,6 +13,8 @@ Checkboxes allow users to select multiple items from a list of individual items,
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/components/chip.mdx

@@ -13,6 +13,8 @@ A Chip is a small block of essential information that represent an input, attrib
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/components/circular-progress.mdx

@@ -13,6 +13,8 @@ Circular progress indicators are utilized to indicate an undetermined wait perio
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/components/code.mdx

@@ -9,10 +9,12 @@ import {codeContent} from "@/content/components/code";
 
 Code is a component used to display inline code.
 
-<ComponentLinks component="code" />
+<ComponentLinks component="code" rscCompatible />
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/components/divider.mdx

@@ -9,10 +9,12 @@ import {dividerContent} from "@/content/components/divider";
 
 Divider is a component that separates content in a page.
 
-<ComponentLinks component="divider" reactAriaHook="useSeparator" />
+<ComponentLinks component="divider" reactAriaHook="useSeparator" rscCompatible />
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/components/dropdown.mdx

@@ -13,6 +13,8 @@ Displays a list of actions or options that a user can choose.
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 NextUI exports 5 dropdown-related components:
@@ -258,7 +260,7 @@ you to customize each item individually.
 
 | Attribute | Type        | Description                                                                                                                                                                    | Default |
 | --------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |
-| children  | `ReactNode` | TThe dropdown trigger component, ensure the `children` passed is focusable. Users can tab to it using their keyboard, and it can take a ref. It is critical for accessibility. | -       |
+| children  | `ReactNode` | The dropdown trigger component, ensure the `children` passed is focusable. Users can tab to it using their keyboard, and it can take a ref. It is critical for accessibility. | -       |
 
 ---
 

apps/docs/content/docs/components/image.mdx

@@ -13,6 +13,8 @@ The Image component is used to display images with support for fallback.
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/components/input.mdx

@@ -13,6 +13,8 @@ Input is a component that allows users to enter text. It can be used to get user
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/components/kbd.mdx

@@ -9,10 +9,12 @@ import {kbdContent} from "@/content/components/kbd";
 
 Keyboard key is a component to display which key or combination of keys performs a given action.
 
-<ComponentLinks component="kbd" />
+<ComponentLinks component="kbd" rscCompatible />
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/components/link.mdx

@@ -13,6 +13,8 @@ Links allow users to click their way from page to page. This component is styled
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/components/modal.mdx

@@ -13,6 +13,8 @@ Displays a dialog with a custom content that requires attention or provides addi
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 NextUI exports 5 modal-related components:

apps/docs/content/docs/components/navbar.mdx

@@ -13,6 +13,8 @@ A responsive navigation header positioned on top side of your page that includes
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 NextUI exports 7 navbar-related components:
@@ -32,7 +34,7 @@ NextUI exports 7 navbar-related components:
   NavbarBrand, 
   NavbarContent, 
   NavbarItem, 
-  NavbarMenuToggle.
+  NavbarMenuToggle,
   NavbarMenu,
   NavbarMenuItem
 } from "@nextui-org/react";`,
@@ -41,7 +43,7 @@ NextUI exports 7 navbar-related components:
   NavbarBrand, 
   NavbarContent, 
   NavbarItem, 
-  NavbarMenuToggle.
+  NavbarMenuToggle,
   NavbarMenu,
   NavbarMenuItem
 } from "@nextui-org/navbar";`,

apps/docs/content/docs/components/pagination.mdx

@@ -13,6 +13,8 @@ The Pagination component allows you to display active page and navigate between
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 NextUI exports 3 pagination-related components:

apps/docs/content/docs/components/popover.mdx

@@ -14,6 +14,8 @@ additional rich content on top of something.
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 NextUI exports 3 popover-related components:

apps/docs/content/docs/components/progress.mdx

@@ -13,6 +13,8 @@ The Progress component allows you to view the progress of any activity.
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/components/radio-group.mdx

@@ -9,10 +9,12 @@ import {radioGroupContent} from "@/content/components/radio-group";
 
 Radio Group allow users to select a single option from a list of mutually exclusive options.
 
-<ComponentLinks component="radiogroup" reactAriaHook="useRadioGroup" />
+<ComponentLinks component="radio" reactAriaHook="useRadioGroup" />
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/components/skeleton.mdx

@@ -9,10 +9,12 @@ import {skeletonContent} from "@/content/components/skeleton";
 
 Skeleton is a placeholder to show a loading state and the expected shape of a component.
 
-<ComponentLinks component="skeleton" />
+<ComponentLinks component="skeleton" rscCompatible />
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/components/snippet.mdx

@@ -13,6 +13,8 @@ Snippet is a component that can be used to display inline or multiline code snip
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/components/spacer.mdx

@@ -9,10 +9,12 @@ import {spacerContent} from "@/content/components/spacer";
 
 Spacer is a component used to add space between components.
 
-<ComponentLinks component="spacer" />
+<ComponentLinks component="spacer" rscCompatible />
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/components/spinner.mdx

@@ -9,10 +9,12 @@ import {spinnerContent} from "@/content/components/spinner";
 
 Spinner express an unspecified wait time or display the length of a process.
 
-<ComponentLinks component="spinner" />
+<ComponentLinks component="spinner" rscCompatible />
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/components/switch.mdx

@@ -13,6 +13,8 @@ The Switch component is used as an alternative between checked and not checked s
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/components/table.mdx

@@ -13,6 +13,8 @@ Tables are used to display tabular data using rows and columns. They allow users
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 NextUI exports 6 table-related components:
@@ -231,7 +233,7 @@ import {useAsyncList} from "@react-stately/data";
 
 ### Loading more data
 
-Table sllows you to add a custom component at the end of the table, on the example below we are
+Table allows you to add a custom component at the end of the table, on the example below we are
 using a button to load more data.
 
 <CodeDemo

apps/docs/content/docs/components/tabs.mdx

@@ -13,6 +13,8 @@ Tabs organize content into multiple sections and allow users to navigate between
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 NextUI exports 2 tabs-related components:

apps/docs/content/docs/components/textarea.mdx

@@ -13,6 +13,8 @@ Textarea component is a multi-line Input which allows you to write large texts.
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/components/tooltip.mdx

@@ -13,6 +13,8 @@ Tooltips display a brief, informative message that appears when a user interacts
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/components/user.mdx

@@ -13,6 +13,8 @@ Display user information with avatar and name.
 
 ---
 
+<CarbonAd/>
+
 ## Import
 
 <ImportTabs

apps/docs/content/docs/customization/colors.mdx

@@ -8,7 +8,6 @@ description: Learn how to configure and customize colors with NextUI.
 NextUI's plugin enables you to personalize the semantic colors of the theme such as `primary`,
 `secondary`, `success`, etc.
 
-
 ```js {7,11}
 module.exports = {
   plugins: [
@@ -29,6 +28,8 @@ module.exports = {
 };
 ```
 
+<CarbonAd />
+
 > **Note**: Colors configurations apply globally across all components.
 
 ## Default Colors

apps/docs/content/docs/customization/create-theme.mdx

@@ -11,6 +11,8 @@ create it by adding the following code to your `tailwind.config.js` file.
 We recommend adding a palette that ranges from `50` to `900`. You can use tools like [Eva Design System](https://colors.eva.design/),
 [Smart Watch](https://smart-swatch.netlify.app/), [Palette](https://palettte.app/) or [Color Box](https://colorbox.io/) to generate your palette.
 
+<CarbonAd />
+
 ### Add the new theme to the plugin
 
 ```js {9-43}

apps/docs/content/docs/customization/custom-variants.mdx

@@ -8,6 +8,8 @@ description: Learn how to create new variants for the NextUI components.
 NextUI allows you to create new variants for components that better suit your project's needs.
 This can be done by extending the component and its properties, and customizing the styles.
 
+<CarbonAd />
+
 You can create or override the component `variants`, `defaultVariants` and `componentVariants`.
 
 > **Note**: For one-off customizations, refer to the [Override Styles](/docs/customization/override-styles) documentation.
@@ -122,13 +124,10 @@ allows you to create a new component based on the original component, and custom
 import {extendVariants, Input} from "@nextui-org/react";
 
 const MyInput = extendVariants(Input, {
-  variants: {
-    // <- modify/add variants
+  variants: { // <- modify/add variants
     color: {
-      stone: {
-        // <- add a new color variant
-        inputWrapper: [
-          // <- Input wrapper slot
+      stone: { // <- add a new color variant
+        inputWrapper: [ // <- Input wrapper slot
           "bg-zinc-100",
           "border",
           "shadow",
@@ -143,8 +142,7 @@ const MyInput = extendVariants(Input, {
           "dark:data-[hover=true]:bg-zinc-900",
           "dark:focus-within:bg-zinc-900",
         ],
-        input: [
-          // Input element slot
+        input: [  // <- Input element slot
           "text-zinc-800",
           "placeholder:text-zinc-600",
           // dark theme

apps/docs/content/docs/customization/customize-theme.mdx

@@ -13,6 +13,8 @@ Furthermore, you have the option to create your own theme based on the default o
 incorporates [Layout](/docs/customization/layout) tokens and [Color](/docs/customization/colors) tokens, designed 
 to facilitate your customization process.
 
+<CarbonAd />
+
 ## Customizing Layout
 
 You can modify a variety of layout aspects, including spacing units, font sizes, line heights,

apps/docs/content/docs/customization/dark-mode.mdx

@@ -32,6 +32,8 @@ This will enable the dark mode for the whole application. However, many applicat
 the capability to switch between different themes. For this purpose, we recommend using a 
 theme switch library or creating your own implementation.
 
+<CarbonAd />
+
 ## Using next-themes
 
 For applications using [Next.js](/docs/frameworks/nextjs), the [next-themes](https://github.com/pacocoursey/next-themes)

apps/docs/content/docs/customization/layout.mdx

@@ -8,6 +8,8 @@ description: NextUI offers a set of layout options to customize the theme.
 NextUI's plugin provides a variety of layout customization options. Alter spacing units, 
 font sizes, line heights, radii and more to personalize each theme to your liking. 
 
+<CarbonAd />
+
 Using layout tokens, you can ensure a uniform aesthetic across all components without 
 needing to override the default Tailwind CSS configuration.
 

apps/docs/content/docs/customization/override-styles.mdx

@@ -8,6 +8,8 @@ description: NextUI allows you to override the default styles of the components
 Overriding default component styles is as simple as passing your own class names to the `className`
 or to the `classNames` prop for components with slots.
 
+<CarbonAd />
+
 ### What's is a Slot?
 
 A slot is a part of a component that can be styled separately. For example, the [CircularProgress](/docs/components/circular-progress) component

apps/docs/content/docs/customization/theme.mdx

@@ -14,6 +14,8 @@ TailwindCSS plugin. This plugin, which is based on the [tw-colors](https://githu
 plugin developed by [L-Blondy](https://github.com/L-Blondy), allows you to customize color schemes,
 layout configurations, and more, across different components of your application.
 
+<CarbonAd />
+
 ## What is a Theme?
 
 A theme, in the context of NextUI, is a predefined set of colors, layout attributes, and other

apps/docs/content/docs/frameworks/astro.mdx

@@ -13,6 +13,8 @@ Requirements:
 
 ------
 
+<CarbonAd />
+
 To use NextUI in your Astro project, you need to follow the following steps:
 
 <Steps>
@@ -23,9 +25,9 @@ In your Astro project, run one of the following command to install NextUI:
 
 <PackageManagers
   commands={{
-    npm: 'npm i @nextui-org/react@dev-v2 framer-motion',
-    yarn: 'yarn add @nextui-org/react@dev-v2 framer-motion',
-    pnpm: 'pnpm add @nextui-org/react@dev-v2 framer-motion',
+    npm: 'npm i @nextui-org/react framer-motion',
+    yarn: 'yarn add @nextui-org/react framer-motion',
+    pnpm: 'pnpm add @nextui-org/react framer-motion',
   }}
 />
 

apps/docs/content/docs/frameworks/nextjs.mdx

@@ -15,6 +15,8 @@ Requirements:
 
 ------
 
+<CarbonAd />
+
 To use NextUI in your Next.js project, you need to follow the steps below, depending on your project structure.
 
 ## App directory Setup
@@ -45,9 +47,9 @@ In your Next.js project, run one of the following command to install NextUI:
 
 <PackageManagers
   commands={{
-    npm: 'npm i @nextui-org/react@dev-v2 framer-motion',
-    yarn: 'yarn add @nextui-org/react@dev-v2 framer-motion',
-    pnpm: 'pnpm add @nextui-org/react@dev-v2 framer-motion',
+    npm: 'npm i @nextui-org/react framer-motion',
+    yarn: 'yarn add @nextui-org/react framer-motion',
+    pnpm: 'pnpm add @nextui-org/react framer-motion',
   }}
 />
 
@@ -180,9 +182,9 @@ In your Next.js project, run one of the following command to install NextUI:
 
 <PackageManagers
   commands={{
-    npm: 'npm i @nextui-org/react@dev-v2 framer-motion',
-    yarn: 'yarn add @nextui-org/react@dev-v2 framer-motion',
-    pnpm: 'pnpm add @nextui-org/react@dev-v2 framer-motion',
+    npm: 'npm i @nextui-org/react framer-motion',
+    yarn: 'yarn add @nextui-org/react framer-motion',
+    pnpm: 'pnpm add @nextui-org/react framer-motion',
   }}
 />
 

apps/docs/content/docs/frameworks/remix.mdx

@@ -13,6 +13,8 @@ Requirements:
 
 ------
 
+<CarbonAd />
+
 To use NextUI in your Remix project, you need to follow the following steps:
 
 <Steps>
@@ -23,9 +25,9 @@ In your Remix project, run one of the following command to install NextUI:
 
 <PackageManagers
   commands={{
-    npm: 'npm i @nextui-org/react@dev-v2 framer-motion',
-    yarn: 'yarn add @nextui-org/react@dev-v2 framer-motion',
-    pnpm: 'pnpm add @nextui-org/react@dev-v2 framer-motion',
+    npm: 'npm i @nextui-org/react framer-motion',
+    yarn: 'yarn add @nextui-org/react framer-motion',
+    pnpm: 'pnpm add @nextui-org/react framer-motion',
   }}
 />
 

apps/docs/content/docs/frameworks/vite.mdx

@@ -14,6 +14,8 @@ Requirements:
 
 ------
 
+<CarbonAd />
+
 To use NextUI in your Vite project, you need to follow the following steps:
 
 <Steps>
@@ -24,9 +26,9 @@ In your Vite React project, run one of the following command to install NextUI:
 
 <PackageManagers
   commands={{
-    npm: 'npm i @nextui-org/react@dev-v2 framer-motion',
-    yarn: 'yarn add @nextui-org/react@dev-v2 framer-motion',
-    pnpm: 'pnpm add @nextui-org/react@dev-v2 framer-motion',
+    npm: 'npm i @nextui-org/react framer-motion',
+    yarn: 'yarn add @nextui-org/react framer-motion',
+    pnpm: 'pnpm add @nextui-org/react framer-motion',
   }}
 />
 

apps/docs/content/docs/guide/installation.mdx

@@ -13,6 +13,8 @@ Requirements:
 
 ---
 
+<CarbonAd />
+
 To use NextUI in your project, you need to follow the following steps:
 
 ## Global Installation
@@ -30,9 +32,9 @@ To install NextUI, run one of the following commands in your terminal:
 
 <PackageManagers
   commands={{
-    npm: "npm i @nextui-org/react@dev-v2 framer-motion",
-    yarn: "yarn add @nextui-org/react@dev-v2 framer-motion",
-    pnpm: "pnpm add @nextui-org/react@dev-v2 framer-motion",
+    npm: "npm i @nextui-org/react framer-motion",
+    yarn: "yarn add @nextui-org/react framer-motion",
+    pnpm: "pnpm add @nextui-org/react framer-motion",
   }}
 />
 

apps/docs/content/docs/guide/upgrade-to-v2.mdx

@@ -14,6 +14,8 @@ Requirements:
 
 ----- 
 
+<CarbonAd />
+
 ## Next.js upgrade steps
 
 Make sure to follow the previous steps since they are required to upgrade to v2.
@@ -34,9 +36,9 @@ In your Next.js project, run one of the following command to install NextUI:
 
 <PackageManagers
   commands={{
-    npm: 'npm i @nextui-org/react@dev-v2 framer-motion',
-    yarn: 'yarn add @nextui-org/react@dev-v2 framer-motion',
-    pnpm: 'pnpm add @nextui-org/react@dev-v2 framer-motion',
+    npm: 'npm i @nextui-org/react framer-motion',
+    yarn: 'yarn add @nextui-org/react framer-motion',
+    pnpm: 'pnpm add @nextui-org/react framer-motion',
   }}
 />
 
@@ -154,9 +156,9 @@ In your Next.js project, run one of the following command to install NextUI:
 
 <PackageManagers
   commands={{
-    npm: 'npm i @nextui-org/react@dev-v2 framer-motion',
-    yarn: 'yarn add @nextui-org/react@dev-v2 framer-motion',
-    pnpm: 'pnpm add @nextui-org/react@dev-v2 framer-motion',
+    npm: 'npm i @nextui-org/react framer-motion',
+    yarn: 'yarn add @nextui-org/react framer-motion',
+    pnpm: 'pnpm add @nextui-org/react framer-motion',
   }}
 />
 

apps/docs/contentlayer.config.js

@@ -48,6 +48,7 @@ export const BlogPost = defineDocumentType(() => ({
     title: {type: "string", required: true},
     description: {type: "string", required: true},
     date: {type: "date", required: true},
+    tags: { type: 'list', of: { type: 'string' } },
     author: {type: "nested",of: AuthorProperties, required: false},
     image: {type: "string", required: false},
   },

apps/docs/libs/contentlayer.ts

@@ -0,0 +1,103 @@
+import type {Document, MDX} from "contentlayer/core";
+
+import {slug} from "github-slugger";
+
+export type MDXDocument = Document & {body: MDX};
+export type MDXDocumentDate = MDXDocument & {
+  date: string;
+};
+export type MDXBlog = MDXDocumentDate & {
+  tags?: string[];
+  draft?: boolean;
+};
+
+export type MDXAuthor = MDXDocument & {
+  name: string;
+};
+
+export function dateSortDesc(a: string, b: string) {
+  if (a > b) return -1;
+  if (a < b) return 1;
+
+  return 0;
+}
+
+export function sortedBlogPost(allBlogs: MDXDocumentDate[]) {
+  return allBlogs.sort((a, b) => dateSortDesc(a.date, b.date));
+}
+
+type ConvertUndefined<T> = OrNull<{
+  [K in keyof T as undefined extends T[K] ? K : never]-?: T[K];
+}>;
+type OrNull<T> = {[K in keyof T]: Exclude<T[K], undefined> | null};
+type PickRequired<T> = {
+  [K in keyof T as undefined extends T[K] ? never : K]: T[K];
+};
+type ConvertPick<T> = ConvertUndefined<T> & PickRequired<T>;
+
+/**
+ * A typesafe omit helper function
+ * @example pick(content, ['title', 'description'])
+ *
+ * @param {Obj} obj
+ * @param {Keys[]} keys
+ * @return {*}  {ConvertPick<{ [K in Keys]: Obj[K] }>}
+ */
+export const pick = <Obj, Keys extends keyof Obj>(
+  obj: Obj,
+  keys: Keys[],
+): ConvertPick<{[K in Keys]: Obj[K]}> => {
+  return keys.reduce((acc, key) => {
+    acc[key] = obj[key] ?? null;
+
+    return acc;
+  }, {} as any);
+};
+
+/**
+ * A typesafe omit helper function
+ * @example omit(content, ['body', '_raw', '_id'])
+ *
+ * @param {Obj} obj
+ * @param {Keys[]} keys
+ * @return {*}  {Omit<Obj, Keys>}
+ */
+export const omit = <Obj, Keys extends keyof Obj>(obj: Obj, keys: Keys[]): Omit<Obj, Keys> => {
+  const result = Object.assign({}, obj);
+
+  keys.forEach((key) => {
+    delete result[key];
+  });
+
+  return result;
+};
+
+export type CoreContent<T> = Omit<T, "body" | "_raw" | "_id">;
+
+export function coreContent<T extends MDXDocument>(content: T) {
+  return omit(content, ["body", "_raw", "_id"]);
+}
+
+export function allCoreContent<T extends MDXDocument>(contents: T[]) {
+  return contents.map((c) => coreContent(c)).filter((c) => !("draft" in c && c.draft === true));
+}
+
+export async function getAllTags(allBlogs: MDXBlog[]) {
+  const tagCount: Record<string, number> = {};
+
+  allBlogs.forEach((file) => {
+    if (file.tags && file.draft !== true) {
+      file.tags.forEach((tag) => {
+        const formattedTag = slug(tag);
+
+        if (formattedTag in tagCount) {
+          tagCount[formattedTag] += 1;
+        } else {
+          tagCount[formattedTag] = 1;
+        }
+      });
+    }
+  });
+
+  return tagCount;
+}

apps/docs/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/docs/next-redirect.js

@@ -36,6 +36,11 @@ async function redirect() {
       destination: "/docs/guide/introduction",
       permanent: true,
     },
+    {
+      source: "/v2",
+      destination: "/blog/nextui-v2",
+      permanent: true,
+    },
     {
       source: "/docs/intro",
       destination: "/docs/guide/introduction",
@@ -73,12 +78,12 @@ async function redirect() {
     },
     {
       source: "/theme",
-      destination: "/docs/theme/default-theme",
+      destination: "/docs/customization/theme",
       permanent: true,
     },
     {
       source: "/docs/theme",
-      destination: "/docs/theme/default-theme",
+      destination: "/docs/customization/theme",
       permanent: true,
     },
     {
@@ -96,6 +101,82 @@ async function redirect() {
       destination: "/docs/components/button",
       permanent: true,
     },
+    // v1 to v2 redirects
+    {
+      source:"/docs/guide/getting-started",
+      destination: "/docs/guide/introduction",
+      permanent: true,
+    },
+    {
+      source: "/docs/theme/dark-mode",
+      destination: "/docs/customization/dark-mode",
+      permanent: true,
+    },
+    {
+      source: "/docs/guide/nextui-plus-nextjs",
+      destination: "/docs/frameworks/nextjs",
+      permanent: true,
+    },
+    {
+      source: "/docs/theme/default-theme",
+      destination: "/docs/customization/theme",
+      permanent: true,
+    },
+    {
+      source: "/docs/theme/customize-theme",
+      destination: "/docs/customization/customize-theme",
+      permanent: true,
+    },
+    {
+      source: "/docs/theme/override-styles",
+      destination: "/docs/customization/override-styles",
+      permanent: true,
+    },
+    {
+      source: "/docs/theme/typescript",
+      destination: "/docs/guide/introduction",
+      permanent: true,
+    },
+    {
+      source: "/docs/theme/utilities",
+      destination: "/docs/guide/introduction",
+      permanent: true,
+    },
+    {
+      source: "/docs/theme/media",
+      destination: "/docs/guide/introduction",
+      permanent: true,
+    },
+    {
+      source: "/docs/layout/container",
+      destination: "/docs/guide/introduction",
+      permanent: true,
+    },
+    {
+      source: "/docs/layout/grid",
+      destination: "/docs/guide/introduction",
+      permanent: true,
+    },
+    {
+      source: "/docs/layout/spacer",
+      destination: "/docs/components/spacer",
+      permanent: true,
+    },
+    {
+      source: "/docs/components/collapse",
+      destination: "/docs/components/accordion",
+      permanent: true,
+    },
+    {
+      source: "/docs/components/text",
+      destination: "/docs/guide/introduction",
+      permanent: true,
+    },
+    {
+      source: "/docs/components/button-group",
+      destination: "/docs/components/button",
+      permanent: true,
+    }
   ];
 }
 

apps/docs/package.json

@@ -11,7 +11,8 @@
     "typecheck": "contentlayer build && tsc --noEmit",
     "preinstall": "node preinstall.js",
     "build:sponsors": "tsx scripts/build-sponsors.ts",
-    "update:search-meta": "tsx scripts/update-search-meta.ts"
+    "update:search-meta": "tsx scripts/update-search-meta.ts",
+    "postbuild": "next-sitemap"
   },
   "dependencies": {
     "@codesandbox/sandpack-react": "^2.6.4",
@@ -21,6 +22,13 @@
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/theme": "workspace:*",
+    "@nextui-org/spacer": "workspace:*",
+    "@nextui-org/kbd": "workspace:*",
+    "@nextui-org/code": "workspace:*",
+    "@nextui-org/badge": "workspace:*",
+    "@nextui-org/skeleton": "workspace:*",
+    "@nextui-org/spinner": "workspace:*",
+    "@nextui-org/divider": "workspace:*",
     "@nextui-org/use-clipboard": "workspace:*",
     "@nextui-org/use-infinite-scroll": "workspace:*",
     "@nextui-org/use-is-mobile": "workspace:*",
@@ -50,7 +58,7 @@
     "match-sorter": "^6.3.1",
     "mini-svg-data-uri": "^1.4.3",
     "mitt": "3.0.0",
-    "next": "13.4.9",
+    "next": "13.4.12",
     "next-contentlayer": "^0.3.4",
     "next-themes": "^0.2.1",
     "nprogress": "^0.2.0",
@@ -72,6 +80,7 @@
     "remark-autolink-headings": "^6.0.1",
     "remark-gfm": "^3.0.1",
     "remark-slug": "^6.0.0",
+    "rss": "^1.2.2",
     "scroll-into-view-if-needed": "3.0.10",
     "sharp": "^0.32.1",
     "shelljs": "^0.8.4",
@@ -83,7 +92,7 @@
   "devDependencies": {
     "@docusaurus/utils": "2.0.0-beta.3",
     "@next/bundle-analyzer": "^13.4.6",
-    "@next/env": "^13.4.8",
+    "@next/env": "^13.4.12",
     "@react-types/shared": "^3.18.0",
     "@tailwindcss/typography": "^0.5.9",
     "@types/canvas-confetti": "^1.4.2",
@@ -96,6 +105,7 @@
     "@types/react": "18.2.8",
     "@types/react-dom": "18.2.4",
     "@types/refractor": "^3.0.2",
+    "@types/rss": "^0.0.30",
     "@types/shelljs": "^0.8.9",
     "@types/uuid": "^8.3.1",
     "algoliasearch": "^4.10.3",
@@ -103,7 +113,7 @@
     "dotenv": "^16.0.1",
     "eslint-config-next": "^11.0.0",
     "markdown-toc": "^1.2.0",
-    "next-sitemap": "^4.0.7",
+    "next-sitemap": "^4.1.8",
     "node-fetch": "^3.2.10",
     "postcss": "^8.4.21",
     "prettier": "^2.7.1",

apps/docs/public/sitemap-0.xml

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
+<url><loc>https://nextui.org/figma</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/blog/nextui-v2</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/blog</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/accordion</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/avatar</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/badge</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/button</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/card</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/checkbox-group</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/checkbox</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/chip</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/circular-progress</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/code</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/divider</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/dropdown</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/image</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/input</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/kbd</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/link</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/modal</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/navbar</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/pagination</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/popover</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/progress</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/radio-group</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/skeleton</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/snippet</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/spacer</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/spinner</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/switch</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/table</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/tabs</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/textarea</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/tooltip</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/components/user</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/customization/colors</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/customization/create-theme</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/customization/custom-variants</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/customization/customize-theme</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/customization/dark-mode</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/customization/layout</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/customization/override-styles</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/customization/theme</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/frameworks/astro</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/frameworks/nextjs</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/frameworks/remix</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/frameworks/vite</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/guide/design-principles</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/guide/installation</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/guide/introduction</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://nextui.org/docs/guide/upgrade-to-v2</loc><lastmod>2023-08-01T02:14:41.649Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+</urlset>

apps/docs/styles/ads.css

@@ -0,0 +1,177 @@
+/* 
+* --------------------------------------------------
+* Carbon Ads
+* --------------------------------------------------
+*/
+
+.carbon-ad-container {
+  @apply relative my-4 min-h-[135px] w-full z-10 rounded-medium bg-background dark:bg-default-50/50 shadow-small p-4;
+}
+
+#carbonads * {
+  margin: initial;
+  padding: initial;
+}
+#carbonads {
+  font-family: inherit;
+  max-width: 100%;
+  padding: 0px;
+}
+#carbonads {
+  display: flex;
+  width: 100%;
+  z-index: 100;
+}
+#carbonads a {
+  color: inherit;
+  text-decoration: none;
+  transition: color 0.25s ease;
+}
+#carbonads a:hover {
+  @apply !text-default-500;
+}
+#carbonads span {
+  width: 100%;
+  position: relative;
+  display: block;
+  overflow: hidden;
+}
+#carbonads .carbon-wrap {
+  display: flex;
+  flex-direction: row;
+}
+#carbonads .carbon-img {
+  @apply shadow-xl;
+  display: block;
+  line-height: 1;
+  max-width: 130px;
+  width: 100%;
+}
+#carbonads .carbon-img img {
+  display: block;
+  max-width: 100% !important;
+  width: 100%;
+  border-radius: 10px;
+  border: 0px;
+  margin: 0px;
+}
+#carbonads .carbon-text {
+  @apply !text-default-500;
+  display: block;
+  font-size: 1rem;
+  width: 100%;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+#carbonads .carbon-poweredby {
+  @apply text-default-400 dark:!text-default-300;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  padding: 10px 0;
+  text-transform: uppercase;
+  letter-space: .value 0.5px;
+  font-weight: 600;
+  font-size: 9px;
+  line-height: 0;
+  transition: all 0.25 ease;
+}
+
+@media only screen and (max-width:600px) {
+  #carbonads .carbon-text {
+    font-size: 0.9rem;
+  }
+}
+
+/*
+* --------------------------------------------------
+* Ethical Ads
+* --------------------------------------------------
+*/
+
+.ea-container {
+  @apply relative my-4 min-h-[135px] w-full z-10 rounded-medium bg-background dark:bg-default-50/50 shadow-small p-4;
+}
+.ea-container .ea-type-image {
+  width: 100%;
+}
+.ea-container .ea-pixel {
+  display: none !important;
+}
+.ea-container .ea-type-image .ea-content {
+  width: 100%;
+  height: 100% !important;
+  max-width: 100% !important;
+  display: flex;
+  margin: 0 !important;
+  padding: 0 !important;
+  background-color: transparent !important;
+  box-shadow: none !important;
+}
+
+.ea-container .ea-type-image .ea-callout {
+  display: flex !important;
+  max-width: 100% !important;
+  justify-content: flex-end !important;
+  position: absolute;
+  bottom: 0;
+  right: 1rem;
+}
+
+.ea-container .ea-type-image .ea-callout a,
+.ea-container .ea-type-image .ea-callout a .ea-headline,
+.ea-container .ea-type-image .ea-callout a .ea-cta {
+  @apply text-default-400 dark:!text-default-300;
+  font-weight: 600 !important;
+  font-size: 9px !important;
+}
+
+[data-ea-publisher].loaded .ea-content a strong {
+  @apply !text-default-500;
+}
+
+.ea-container .ea-type-image .ea-content a {
+  display: block;
+  line-height: 1;
+  max-width: 130px;
+  width: 100%;
+}
+
+.ea-container .ea-type-image .ea-text {
+  width: 100%;
+  text-align: left !important;
+  padding-top: 8px;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.ea-container .ea-type-image .ea-text a {
+  @apply !text-default-300;
+  width: 100%;
+  max-width: 100%;
+  display: block;
+  font-size: 1rem;
+  width: 100%;
+}
+
+.ea-container .ea-type-image .ea-text .ea-body {
+  @apply !text-default-500;
+}
+
+.ea-container .ea-type-image img {
+  display: block;
+  max-width: 100% !important;
+  width: 100%;
+  border-radius: 10px;
+  border: 0px;
+  margin: 0px;
+}
+
+@media only screen and (max-width: 600px) {
+  .ea-container .ea-type-image .ea-text a {
+    font-size: 0.9rem;
+  }
+}