feat(docs): second section done desktop

2025-12-08 19:26:11 +00:00 · 2023-04-30 21:34:36 -03:00 · 2023-04-30 21:34:36 -03:00 · ea70b2783e
commit ea70b2783e
parent 3a077ee43a
159 changed files with 3999 additions and 624 deletions
--- a/apps/docs/components/code-window/code-block.tsx
+++ b/apps/docs/components/code-window/code-block.tsx
@ -0,0 +1,166 @@
+// Inspired by https://github.dev/modulz/stitches-site code demo
+import React from "react";
+import refractor from "refractor/core";
+import js from "refractor/lang/javascript";
+import jsx from "refractor/lang/jsx";
+import bash from "refractor/lang/bash";
+import css from "refractor/lang/css";
+import diff from "refractor/lang/diff";
+import hastToHtml from "hast-util-to-html";
+import rangeParser from "parse-numeric-range";
+import {clsx} from "@nextui-org/shared-utils";
+
+import {Pre} from "./pre";
+import {WindowActions} from "./window-actions";
+
+import highlightLine from "@/libs/rehype-highlight-line";
+import highlightWord from "@/libs/rehype-highlight-word";
+
+refractor.register(js);
+refractor.register(jsx);
+refractor.register(bash);
+refractor.register(css);
+refractor.register(diff);
+
+type PreProps = Omit<React.ComponentProps<typeof Pre>, "css">;
+
+export type CodeBlockProps = PreProps & {
+  language: "js" | "jsx" | "bash" | "css" | "diff";
+  title?: string;
+  value?: string;
+  highlightLines?: string;
+  mode?: "static" | "typewriter";
+  showLineNumbers?: boolean;
+  showWindowIcons?: boolean;
+  className?: string;
+};
+
+/**
+ * recursively get all text nodes as an array for a given element
+ */
+function getTextNodes(node: any): any[] {
+  let childTextNodes = [];
+
+  if (!node.hasChildNodes()) return [];
+
+  const childNodes = node.childNodes;
+
+  for (let i = 0; i < childNodes.length; i++) {
+    if (childNodes[i].nodeType == Node.TEXT_NODE) {
+      childTextNodes.push(childNodes[i]);
+    } else if (childNodes[i].nodeType == Node.ELEMENT_NODE) {
+      Array.prototype.push.apply(childTextNodes, getTextNodes(childNodes[i]));
+    }
+  }
+
+  return childTextNodes;
+}
+
+/**
+ * given a text node, wrap each character in the
+ * given tag.
+ */
+function wrapEachCharacter(textNode: any, tag: string, count: number) {
+  const text = textNode.nodeValue;
+  const parent = textNode.parentNode;
+
+  const characters = text.split("");
+
+  characters.forEach(function (character: any, letterIndex: any) {
+    const delay = (count + letterIndex) * 50;
+    var element = document.createElement(tag);
+    var characterNode = document.createTextNode(character);
+
+    element.appendChild(characterNode);
+    element.style.opacity = "0";
+    element.style.transition = `all ease 0ms ${delay}ms`;
+
+    parent.insertBefore(element, textNode);
+
+    // skip a couple of frames to trigger transition
+    requestAnimationFrame(() => requestAnimationFrame(() => (element.style.opacity = "1")));
+  });
+
+  parent.removeChild(textNode);
+}
+
+function CodeTypewriter({value, className, css, ...props}: any) {
+  const wrapperRef = React.useRef(null);
+
+  React.useEffect(() => {
+    const wrapper = wrapperRef.current as any;
+
+    if (wrapper) {
+      var allTextNodes = getTextNodes(wrapper);
+
+      let count = 0;
+
+      allTextNodes?.forEach((textNode) => {
+        wrapEachCharacter(textNode, "span", count);
+        count = count + textNode.nodeValue.length;
+      });
+      wrapper.style.opacity = "1";
+    }
+
+    return () => (wrapper.innerHTML = value);
+  }, []);
+
+  return (
+    <Pre className={className} css={css} {...props}>
+      <code
+        ref={wrapperRef}
+        className={className}
+        dangerouslySetInnerHTML={{__html: value}}
+        style={{opacity: 0}}
+      />
+    </Pre>
+  );
+}
+
+const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>((_props, forwardedRef) => {
+  const {
+    language,
+    value,
+    title,
+    highlightLines = "0",
+    className = "",
+    mode,
+    showLineNumbers,
+    showWindowIcons,
+    ...props
+  } = _props;
+
+  let result: any = refractor.highlight(value || "", language);
+
+  result = highlightLine(result, rangeParser(highlightLines));
+
+  result = highlightWord(result);
+
+  // convert to html
+  result = hastToHtml(result);
+
+  // TODO reset theme
+
+  const classes = `language-${language}`;
+  const codeClasses = clsx("absolute w-full", showWindowIcons ? "top-8" : "top-0");
+
+  if (mode === "typewriter") {
+    return <CodeTypewriter className={classes} css={css} value={result} {...props} />;
+  }
+
+  return (
+    <Pre
+      ref={forwardedRef}
+      className={clsx("code-block", classes, showWindowIcons ? "pt-8" : "", className)}
+      data-line-numbers={showLineNumbers}
+      {...props}
+    >
+      <code className={clsx(classes, codeClasses)} dangerouslySetInnerHTML={{__html: result}} />
+      {showWindowIcons && <WindowActions title={title} />}
+    </Pre>
+  );
+});
+
+CodeBlock.displayName = "NextUI - CodeBlock";
+
+export default CodeBlock;
--- a/apps/docs/components/code-window/code-window.tsx
+++ b/apps/docs/components/code-window/code-window.tsx
@ -0,0 +1,84 @@
+// Inspired by https://github.dev/modulz/stitches-site code demo
+import React from "react";
+import rangeParser from "parse-numeric-range";
+
+import CodeBlock, {CodeBlockProps} from "./code-block";
+
+export const CodeWindow: React.FC<CodeBlockProps> = ({highlightLines, ...props}) => {
+  const wrapperRef = React.useRef<HTMLPreElement>(null);
+
+  React.useEffect(() => {
+    const pre = wrapperRef.current;
+
+    if (!pre) return;
+
+    const PADDING = 15;
+    let codeInner = pre.querySelector("code") ?? null;
+    const codeBlockHeight = pre.clientHeight - PADDING * 2;
+
+    const lines = pre.querySelectorAll<HTMLElement>(".highlight-line");
+
+    if (!highlightLines) {
+      lines.forEach((line) => {
+        line.classList.remove("off");
+      });
+
+      if (codeInner) {
+        codeInner.style.transform = `translate3d(0, 0, 0)`;
+      }
+
+      return;
+    }
+
+    const linesToHighlight = rangeParser(highlightLines);
+
+    const firstLineNumber = Math.max(0, linesToHighlight[0] - 1);
+    const lastLineNumber = Math.min(lines.length - 1, [...linesToHighlight].reverse()[0] - 1);
+    const firstLine = lines[firstLineNumber];
+    const lastLine = lines[lastLineNumber];
+
+    // Prevent errors in case the right line doesn't exist
+    if (!firstLine || !lastLine) {
+      // eslint-disable-next-line no-console
+      console.warn(`CodeWindow: Error finding the right line`);
+
+      return;
+    }
+
+    const linesHeight = lastLine.offsetTop - firstLine.offsetTop;
+
+    const maxDistance = (codeInner?.clientHeight || 0) - codeBlockHeight;
+
+    const codeFits = linesHeight < codeBlockHeight;
+    const lastLineIsBelow = lastLine.offsetTop > codeBlockHeight - PADDING;
+    const lastLineIsAbove = !lastLineIsBelow;
+
+    let translateY = 0;
+
+    if (codeFits && lastLineIsAbove) {
+      translateY = 0;
+    } else if (codeFits && lastLineIsBelow) {
+      const dist = firstLine.offsetTop - (codeBlockHeight - linesHeight) / 2;
+
+      translateY = dist > maxDistance ? maxDistance : dist;
+    } else {
+      translateY = firstLine.offsetTop;
+    }
+
+    lines.forEach((line, i) => {
+      const lineIndex = i + 1;
+
+      if (linesToHighlight.includes(lineIndex)) {
+        line.setAttribute("data-highlighted", "true");
+      } else {
+        line.setAttribute("data-highlighted", "false");
+      }
+    });
+
+    requestAnimationFrame(
+      () => codeInner && (codeInner.style.transform = `translate3d(0, ${-translateY}px, 0)`),
+    );
+  }, [highlightLines]);
+
+  return <CodeBlock ref={wrapperRef} {...props} />;
+};
--- a/apps/docs/components/code-window/index.ts
+++ b/apps/docs/components/code-window/index.ts
@ -0,0 +1 @@
+export * from "./code-window";
--- a/apps/docs/components/code-window/pre.tsx
+++ b/apps/docs/components/code-window/pre.tsx
@ -0,0 +1,26 @@
+import {forwardRef} from "react";
+import {clsx} from "@nextui-org/shared-utils";
+
+export interface PreProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Pre = forwardRef<HTMLPreElement, PreProps>(
+  ({className = "", children, ...props}, forwardedRef) => {
+    return (
+      <pre
+        ref={forwardedRef}
+        className={clsx(
+          "relative w-full h-full box-border shadow-md text-white/80 px-4 py-6 leading-5 whitespace-pre text-sm font-mono bg-code-background rounded-xl overflow-hidden [&>code]:transition-transform",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </pre>
+    );
+  },
+);
+
+Pre.displayName = "CodeBlock.Pre";
--- a/apps/docs/components/code-window/styles.ts
+++ b/apps/docs/components/code-window/styles.ts
@ -0,0 +1,37 @@
+import {tv, VariantProps} from "tailwind-variants";
+
+export const codeWindowStyles = tv({
+  slots: {
+    container: [
+      "relative",
+      "overflow-hidden",
+      "shadow-xl",
+      "flex",
+      "bg-slate-800",
+      "h-[31.625rem]",
+      "max-h-[60vh]",
+      "sm:max-h-[none]",
+      "sm:rounded-xl",
+      "lg:h-[34.6875rem]",
+      "xl:h-[31.625rem]",
+      "dark:bg-slate-900/70",
+      "dark:backdrop-blur",
+      "dark:ring-1",
+      "dark:ring-inset",
+      "dark:ring-white/10",
+    ],
+    code: ["w-full", "flex-auto", "flex", "min-h-0", "overflow-auto"],
+    lineNumbers: [
+      "hidden",
+      "md:block",
+      "text-slate-600",
+      "flex-none",
+      "py-4",
+      "pr-4",
+      "text-right",
+      "select-none",
+    ],
+  },
+});
+
+export type CodeWindowProps = VariantProps<typeof codeWindowStyles>;
--- a/apps/docs/components/code-window/window-actions.tsx
+++ b/apps/docs/components/code-window/window-actions.tsx
@ -0,0 +1,41 @@
+import React from "react";
+import {tv} from "tailwind-variants";
+import {clsx} from "@nextui-org/shared-utils";
+
+export type WindowActionsProps = {
+  title?: string;
+  className?: string;
+};
+
+const windowIconStyles = tv({
+  base: "w-3 h-3 rounded-full",
+  variants: {
+    color: {
+      red: "bg-red-500",
+      yellow: "bg-yellow-500",
+      green: "bg-green-500",
+    },
+  },
+});
+
+export const WindowActions: React.FC<WindowActionsProps> = ({title, className, ...props}) => {
+  return (
+    <div
+      className={clsx(
+        "flex items-center absolute top-0 left-0 px-4 z-10 justify-between h-8 bg-code-background w-full",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex items-center gap-2 basis-1/3">
+        <div className={windowIconStyles({color: "red"})} />
+        <div className={windowIconStyles({color: "yellow"})} />
+        <div className={windowIconStyles({color: "green"})} />
+      </div>
+      <div className="flex basis-1/3 h-full justify-center items-center">
+        {title && <p className="text-white/30 text-xs font-light">{title}</p>}
+      </div>
+      <div className="flex basis-1/3" />
+    </div>
+  );
+};
--- a/apps/docs/components/custom-themes.tsx
+++ b/apps/docs/components/custom-themes.tsx
@ -1,19 +0,0 @@
-import {title, subtitle, titleWrapper, sectionWrapper} from "@/components/primitives";
-
-export const CustomThemes = () => {
-  return (
-    <section className={sectionWrapper({class: "pb-56"})}>
-      <div className={titleWrapper()}>
-        <h1 className={title({size: "lg"})}>Apply your own</h1>
-        <div>
-          <h1 className={title({color: "blue", size: "lg"})}>theming&nbsp;</h1>
-          <h1 className={title({size: "lg"})}>decisions.</h1>
-        </div>
-      </div>
-      <p className={subtitle()}>
-        NextUI provides a custom TailwindCSS plugin that allows you to customize the default themes
-        or create your own.
-      </p>
-    </section>
-  );
-};
--- a/apps/docs/components/custom-themes/custom-themes.tsx
+++ b/apps/docs/components/custom-themes/custom-themes.tsx
@ -0,0 +1,230 @@
+/* eslint-disable react/display-name */
+import {useMemo, useState} from "react";
+import {Tabs, TabItem, Card, CardBody, Image, Button, RadioGroup, Radio} from "@nextui-org/react";
+import get from "lodash/get";
+import Link from "next/link";
+
+import {shopCartStyles} from "./styles";
+
+import {title, subtitle, titleWrapper, sectionWrapper} from "@/components/primitives";
+import {PaletteIcon, MagicIcon, GamingConsoleIcon, StarIcon} from "@/components/icons";
+import {NextUILogo, CodeWindow} from "@/components";
+import landingContent from "@/content/landing";
+
+const themesTabs = [
+  {
+    id: "nextui",
+    title: () => <p className="group-data-[selected=true]:text-primary">NextUI</p>,
+    icon: () => (
+      <NextUILogo
+        small
+        className="text-neutral-400 group-data-[selected=true]:text-primary"
+        size={44}
+      />
+    ),
+  },
+  {
+    id: "modern",
+    title: () => <p className="group-data-[selected=true]:text-secondary">Modern</p>,
+    icon: () => <PaletteIcon className="group-data-[selected=true]:text-secondary" size={44} />,
+  },
+  {
+    id: "elegant",
+    title: () => <p className="group-data-[selected=true]:text-foreground">Elegant</p>,
+    icon: () => <MagicIcon size={44} />,
+  },
+  {
+    id: "retro",
+    title: () => <p className="group-data-[selected=true]:text-warning">Retro</p>,
+    icon: () => <GamingConsoleIcon className="group-data-[selected=true]:text-warning" size={44} />,
+  },
+];
+
+type Theme = "nextui" | "modern" | "elegant" | "retro";
+
+const itemSizes = ["xs", "s", "m", "l", "xl"];
+
+const codeHighlights = {
+  nextui: "6-15",
+  modern: "22-31",
+  elegant: "38-47",
+  retro: "54-67",
+};
+
+const CustomThemesExample = ({
+  selectedTheme,
+  onChangeTheme,
+}: {
+  selectedTheme: Theme;
+  onChangeTheme: (theme: Theme) => void;
+}) => {
+  const [liked, setLiked] = useState(false);
+
+  const slots = useMemo(
+    () =>
+      shopCartStyles({
+        theme: selectedTheme as Theme,
+      }),
+    [selectedTheme],
+  );
+
+  const onSelectionChange = (value: React.Key) => {
+    onChangeTheme(value as Theme);
+  };
+
+  return (
+    <div className="flex flex-col gap-6 ">
+      <Tabs
+        disableAnimation
+        disableCursor
+        aria-label="Custom themes tabs"
+        classNames={{
+          base: "max-w-[50%]",
+          tab: "h-auto data-[selected=true]:bg-transparent",
+          tabList: "max-w-1/2 justify-start gap-4",
+          tabContent: "text-neutral-400 text-base",
+        }}
+        items={themesTabs}
+        variant="light"
+        onSelectionChange={onSelectionChange}
+      >
+        {(item) => (
+          <TabItem
+            key={item.id}
+            title={
+              <div className="flex flex-col justify-center items-center gap-2">
+                {item.icon()}
+                {item.title()}
+              </div>
+            }
+          />
+        )}
+      </Tabs>
+      <Card className={slots.wrapper()} radius="2xl">
+        <CardBody className="relative flex-col md:flex-row md:items-center gap-4 md:gap-9 overflow-visible">
+          <div className={slots.imageWrapper()}>
+            <Image
+              removeWrapper
+              alt="Shoes theme example"
+              className={slots.img()}
+              src="/images/shoes-1.png"
+            />
+          </div>
+          <div className={slots.contentWrapper()}>
+            <div className="relative flex flex-wrap items-baseline">
+              <h1 className={slots.title()}>Nike Adapt BB 2.0</h1>
+              <p className={slots.description()}>Consistent, customized fit, game-changing.</p>
+              <p className={slots.price()}>$279.97</p>
+              <p className={slots.previousPrice()}>$350</p>
+              <p className={slots.percentOff()}>20% off</p>
+            </div>
+            <RadioGroup
+              aria-label="select size"
+              classNames={{
+                base: "my-4",
+              }}
+              defaultValue="xs"
+              orientation="horizontal"
+            >
+              {itemSizes.map((itemSize) => (
+                <Radio
+                  key={itemSize}
+                  classNames={{
+                    wrapper: "hidden",
+                    labelWrapper: slots.sizeOption(),
+                    label: "text-sm font-semibold text-inherit",
+                  }}
+                  value={itemSize}
+                >
+                  {itemSize.toUpperCase()}
+                </Radio>
+              ))}
+            </RadioGroup>
+            <div className="flex space-x-4">
+              <Button
+                className={slots.buyButton()}
+                color="primary"
+                radius="xl"
+                variant={selectedTheme === "nextui" ? "shadow" : "solid"}
+              >
+                Buy now
+              </Button>
+              <Button
+                className={slots.addToBagButton()}
+                color="primary"
+                radius="xl"
+                variant="bordered"
+              >
+                Add to bag
+              </Button>
+            </div>
+          </div>
+          <Button
+            isIconOnly
+            className={slots.starButton()}
+            data-liked={liked}
+            radius="full"
+            variant="light"
+            onPress={() => setLiked((v) => !v)}
+          >
+            <StarIcon fill={liked ? "currentColor" : "none"} size={20} />
+          </Button>
+        </CardBody>
+      </Card>
+      <Button
+        as={Link}
+        className="max-w-fit"
+        color="primary"
+        href="/docs/theme/customize-theme"
+        radius="full"
+        size="sm"
+        variant="flat"
+      >
+        Learn more
+      </Button>
+    </div>
+  );
+};
+
+export const CustomThemes = () => {
+  const [selectedTheme, setSelectedTheme] = useState<Theme>(themesTabs[0].id as Theme);
+
+  return (
+    <section className={sectionWrapper({class: "pb-56"})}>
+      <div className="flex flex-col gap-8">
+        <div>
+          <div className={titleWrapper()}>
+            <h1 className={title({size: "lg"})}>Apply your own</h1>
+            <div>
+              <h1 className={title({color: "blue", size: "lg"})}>theming&nbsp;</h1>
+              <h1 className={title({size: "lg"})}>decisions.</h1>
+            </div>
+          </div>
+          <p className={subtitle()}>
+            NextUI provides a custom TailwindCSS plugin that allows you to customize the default
+            themes or create your own.
+          </p>
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <CustomThemesExample selectedTheme={selectedTheme} onChangeTheme={setSelectedTheme} />
+          <CodeWindow
+            showWindowIcons
+            className="max-h-[440px] mt-12"
+            highlightLines={get(codeHighlights, selectedTheme)}
+            language="jsx"
+            title="tailwind.config.js"
+            value={landingContent.themingCode}
+          />
+        </div>
+      </div>
+      <div className="absolute -bottom-[25%] -left-[30%] -z-[1]">
+        <Image
+          removeWrapper
+          alt="custom themes background"
+          className="h-full"
+          src="/gradients/blue-purple-1.svg"
+        />
+      </div>
+    </section>
+  );
+};
--- a/apps/docs/components/custom-themes/index.ts
+++ b/apps/docs/components/custom-themes/index.ts
@ -0,0 +1 @@
+export * from "./custom-themes";
--- a/apps/docs/components/custom-themes/styles.ts
+++ b/apps/docs/components/custom-themes/styles.ts
@ -0,0 +1,195 @@
+import {tv, VariantProps} from "tailwind-variants";
+
+export const shopCartStyles = tv({
+  slots: {
+    wrapper: "overflow-visible h-[240px] dark:border-none",
+    imageWrapper: [
+      "flex-none",
+      "w-full",
+      "sm:w-48",
+      "h-48",
+      "mb-6",
+      "sm:mb-0",
+      "relative",
+      "z-10",
+      "before:absolute",
+      "before:top-0",
+      "before:left-0",
+      "before:w-full",
+      "before:h-full",
+      "before:bg-gradient-to-br",
+      "transition-all",
+      "!ease-soft-spring",
+      "!duration-500",
+      "will-change-auto",
+      "before:transition-all",
+    ],
+    img: [
+      "overflow-visible",
+      "sm:scale-125",
+      "absolute",
+      "z-10",
+      "top-2",
+      "sm:left-2",
+      "inset-0",
+      "w-full",
+      "h-full",
+      "object-cover",
+      "rounded-lg",
+      "transition-all",
+      "will-change-auto",
+      "!ease-soft-spring",
+      "!duration-300",
+    ],
+    contentWrapper: "flex flex-col justify-center transition-all h-full h-[200px]",
+    title: [
+      "relative",
+      "w-full",
+      "flex-none",
+      "text-xl",
+      "font-semibold",
+      "text-foreground",
+      "transition-all",
+      "will-change-auto",
+      "!duration-500",
+    ],
+    description: [
+      "my-2",
+      "w-full",
+      "text-base",
+      "text-neutral-500",
+      "transition-all",
+      "will-change-auto",
+      "!duration-500",
+    ],
+    price: "relative text-lg font-semibold text-foreground",
+    previousPrice: "relative line-through font-semibold text-neutral-400 ml-3",
+    percentOff: "relative font-normal text-success ml-3",
+    sizeOption: [
+      "w-8",
+      "h-8",
+      "flex",
+      "m-0",
+      "justify-center",
+      "items-center",
+      "text-sm",
+      "rounded-full",
+    ],
+    buyButton: ["text-sm", "font-normal"],
+    addToBagButton: ["text-sm", "font-normal"],
+    starButton: "absolute top-3 right-3 text-neutral-400 data-[liked=true]:text-warning",
+  },
+  variants: {
+    theme: {
+      nextui: {
+        imageWrapper: ["before:rounded-2xl", "before:from-[#010187] before:to-[#18000E]"],
+        sizeOption: [
+          "group-data-[checked=true]:bg-primary",
+          "group-data-[checked=true]:text-primary-foreground",
+        ],
+      },
+      modern: {
+        wrapper: "rounded-3xl",
+        contentWrapper: "ml-3",
+        imageWrapper: [
+          "scale-[1.3]",
+          "before:rounded-3xl",
+          "before:from-[#870172] before:to-[#18000E]",
+          "shadow-lg",
+        ],
+        img: "sm:scale-90 sm:left-0",
+        title: "text-2xl",
+        description: "text-sm",
+        sizeOption: [
+          "group-data-[checked=true]:bg-secondary",
+          "group-data-[checked=true]:text-secondary-foreground",
+        ],
+        percentOff: "text-pink-500",
+        buyButton: ["bg-secondary", "text-sm", "font-normal", "rounded-full"],
+        addToBagButton: [
+          "border-secondary",
+          "text-secondary",
+          "text-sm",
+          "font-normal",
+          "rounded-full",
+        ],
+      },
+      elegant: {
+        wrapper: "rounded-md",
+        contentWrapper: "ml-3",
+        imageWrapper: [
+          "scale-[1.3]",
+          "before:rounded-md",
+          "before:from-[#323232] before:to-[#000000]",
+          "shadow-xl",
+        ],
+        img: "sm:scale-75 sm:left-0 saturate-0",
+        title: "text-xl font-mono font-thin",
+        description: "text-sm font-mono font-light",
+        sizeOption: [
+          "group-data-[checked=true]:bg-foreground",
+          "group-data-[checked=true]:text-background",
+        ],
+        price: "font-mono font-thin",
+        previousPrice: "font-mono font-light ml-2",
+        percentOff: "text-neutral-500 font-mono text-sm",
+        buyButton: ["bg-foreground", "text-background", "text-sm", "font-normal", "rounded-sm"],
+        addToBagButton: [
+          "border-foreground",
+          "text-foreground",
+          "text-sm",
+          "font-normal",
+          "rounded-sm",
+        ],
+      },
+      retro: {
+        wrapper: "bg-[#F4E8D1] dark:bg-[#E1CA9E] rounded-sm",
+        contentWrapper: "ml-3",
+        imageWrapper: [
+          "before:rounded-none",
+          "before:from-[#FFD34E] before:to-[#EE457E]",
+          "before:shadow-md",
+          "after:-z-10",
+          "after:absolute",
+          "after:top-2",
+          "after:left-2",
+          "after:w-full",
+          "after:h-full",
+          "after:bg-[#FFD34E]",
+        ],
+        img: "sm:scale-125",
+        title: "text-xl uppercase text-black",
+        description: "text-[0.7rem] uppercase text-black",
+        sizeOption: [
+          "text-black/80",
+          "group-data-[checked=true]:bg-[#EE457E]",
+          "group-data-[checked=true]:text-white",
+        ],
+        price: "text-black",
+        previousPrice: "text-black/60 ml-2",
+        percentOff: "text-black/40 font-mono text-sm",
+        buyButton: [
+          "bg-[#FFD34E]",
+          "text-black",
+          "font-medium",
+          "uppercase",
+          "text-sm",
+          "rounded-sm",
+        ],
+        addToBagButton: [
+          "border-[#FFD34E]",
+          "text-black",
+          "uppercase",
+          "font-medium",
+          "text-sm",
+          "rounded-sm",
+        ],
+      },
+    },
+  },
+  defaultVariants: {
+    theme: "nextui",
+  },
+});
+
+export type ShopCartProps = VariantProps<typeof shopCartStyles>;
--- a/apps/docs/components/hero.tsx
+++ b/apps/docs/components/hero.tsx
@ -23,19 +23,14 @@ import {GithubIcon} from "@/components/icons";
 import {UserTwitterCard} from "@/components/demos";

 const DynamicLopperBG = dynamic(() => import("./looper-bg").then((mod) => mod.LooperBg), {
-  ssr: true,
+  ssr: false,
 });

-const FloatingComponents: React.FC = () => {
+const FloatingComponents: React.FC<{mounted: boolean}> = ({mounted}) => {
  const {theme, setTheme} = useTheme();
-  const [mounted, setMounted] = useState(false);

  const isSelected = theme === "dark" && mounted;

-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
  const onChange = () => {
    theme === "light" ? setTheme("dark") : setTheme("light");
  };
@ -73,7 +68,7 @@ const FloatingComponents: React.FC = () => {
        radius="2xl"
      >
        <Image
-          className="object-cover -translate-y-6 h-[120%]"
+          className="object-cover -translate-y-12 h-[100%]"
          src="/images/card-example-6.jpeg"
          width={120}
        />
@ -89,7 +84,6 @@ const FloatingComponents: React.FC = () => {
        classNames={{
          base: "absolute left-[170px] -top-[160px] h-10 animate-[levitate_17s_ease_infinite_1s]",
          tabList: "max-w-[200px] bg-content1 shadow-sm",
-          panel: "hidden",
        }}
        radius="full"
        size="xs"
@ -165,6 +159,12 @@ const FloatingComponents: React.FC = () => {
 };

 export const Hero = () => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
  return (
    <section className="flex relative w-full flex-nowrap justify-between items-center h-[calc(100vh_-_64px)] 2xl:h-[calc(84vh_-_64px)]">
      <div className="flex flex-col gap-6 w-1/2 xl:mt-10">
@ -196,9 +196,12 @@ export const Hero = () => {
        </div>
      </div>

-      <FloatingComponents />
+      <FloatingComponents mounted={mounted} />

-      <DynamicLopperBG className="absolute translate-y-[10%] -z-50" />
+      <DynamicLopperBG
+        className="absolute translate-y-[10%] -z-50 opacity-0 data-[mounted=true]:opacity-100 transition-opacity"
+        data-mounted={mounted}
+      />
    </section>
  );
 };
--- a/apps/docs/components/icons/gaming-console.tsx
+++ b/apps/docs/components/icons/gaming-console.tsx
@ -0,0 +1,39 @@
+import {IconSvgProps} from "@/types";
+
+export const GamingConsoleIcon = ({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="M21 7v10c0 3-1.5 5-5 5H8c-3.5 0-5-2-5-5V7c0-3 1.5-5 5-5h8c3.5 0 5 2 5 5Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit={10}
+      strokeWidth={1.5}
+    />
+    <path
+      d="M16.25 11h-8.5C6.79 11 6 10.21 6 9.25v-2.5C6 5.79 6.79 5 7.75 5h8.5c.96 0 1.75.79 1.75 1.75v2.5c0 .96-.79 1.75-1.75 1.75ZM10.3 15.28 8 17.58M8.03 15.31l2.3 2.3"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit={10}
+      strokeWidth={1.5}
+    />
+    <path
+      d="M16.49 15.33h.02M14.49 17.5v-.02"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit={10}
+      strokeWidth={2}
+    />
+  </svg>
+);
--- a/apps/docs/components/icons/index.ts
+++ b/apps/docs/components/icons/index.ts
@ -6,3 +6,6 @@ export * from "./heart";
 export * from "./magic";
 export * from "./flash";
 export * from "./devices";
+export * from "./palette";
+export * from "./gaming-console";
+export * from "./star";
--- a/apps/docs/components/icons/palette.tsx
+++ b/apps/docs/components/icons/palette.tsx
@ -0,0 +1,26 @@
+import {IconSvgProps} from "@/types";
+
+export const PaletteIcon = ({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}
+  >
+    <g
+      fill="none"
+      stroke="currentcolor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+    >
+      <path d="M10 4.5V18a4.007 4.007 0 01-1.14 2.79l-.04.04a3.149 3.149 0 01-.28.25 3.5 3.5 0 01-.99.6c-.11.05-.22.09-.33.13A3.888 3.888 0 016 22a4.255 4.255 0 01-.8-.08c-.13-.03-.26-.06-.39-.1a3.611 3.611 0 01-.46-.17c0-.01 0-.01-.01 0a5.042 5.042 0 01-.8-.49l-.01-.01a2.744 2.744 0 01-.36-.32c-.11-.12-.22-.24-.33-.37a5.042 5.042 0 01-.49-.8c.01-.01.01-.01 0-.01a.031.031 0 00-.01-.02c-.06-.14-.11-.29-.16-.44-.04-.13-.07-.26-.1-.39A4.255 4.255 0 012 18V4.5A2.362 2.362 0 014.5 2h3A2.362 2.362 0 0110 4.5z" />
+      <path d="M22 16.5v3a2.362 2.362 0 01-2.5 2.5H6a3.888 3.888 0 001.22-.19c.11-.04.22-.08.33-.13a3.5 3.5 0 00.99-.6 3.149 3.149 0 00.28-.25l.04-.04 6.8-6.79h3.84a2.362 2.362 0 012.5 2.5zM4.81 21.82a3.835 3.835 0 01-1.64-.99 3.835 3.835 0 01-.99-1.64 4.02 4.02 0 002.63 2.63z" />
+      <path d="M18.37 11.29L15.66 14l-6.8 6.79A4.007 4.007 0 0010 18V8.335l2.71-2.705a2.368 2.368 0 013.54 0l2.12 2.12a2.368 2.368 0 010 3.54zM7 18a1 1 0 11-1-1 1 1 0 011 1z" />
+    </g>
+  </svg>
+);
--- a/apps/docs/components/icons/star.tsx
+++ b/apps/docs/components/icons/star.tsx
@ -0,0 +1,22 @@
+import {IconSvgProps} from "@/types";
+
+export const StarIcon = ({size = 24, width, height, fill = "none", ...props}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill={fill}
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <path
+      d="M13.73 3.51001L15.49 7.03001C15.73 7.52002 16.37 7.99001 16.91 8.08001L20.1 8.61001C22.14 8.95001 22.62 10.43 21.15 11.89L18.67 14.37C18.25 14.79 18.02 15.6 18.15 16.18L18.86 19.25C19.42 21.68 18.13 22.62 15.98 21.35L12.99 19.58C12.45 19.26 11.56 19.26 11.01 19.58L8.01997 21.35C5.87997 22.62 4.57997 21.67 5.13997 19.25L5.84997 16.18C5.97997 15.6 5.74997 14.79 5.32997 14.37L2.84997 11.89C1.38997 10.43 1.85997 8.95001 3.89997 8.61001L7.08997 8.08001C7.61997 7.99001 8.25997 7.52002 8.49997 7.03001L10.26 3.51001C11.22 1.60001 12.78 1.60001 13.73 3.51001Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+  </svg>
+);
--- a/apps/docs/components/index.ts
+++ b/apps/docs/components/index.ts
@ -5,3 +5,4 @@ export * from "./hero";
 export * from "./looper-bg";
 export * from "./features-grid";
 export * from "./custom-themes";
+export * from "./code-window";
--- a/apps/docs/components/nextui-logo.tsx
+++ b/apps/docs/components/nextui-logo.tsx
@ -1,8 +1,8 @@
 import React from "react";
+import {clsx} from "@nextui-org/shared-utils";

 import {IconSvgProps} from "@/types";
 import {dataAttr} from "@/utils";
-
 export interface LogoProps extends IconSvgProps {
  auto?: boolean;
  small?: boolean;
@ -11,10 +11,18 @@ export interface LogoProps extends IconSvgProps {
  className?: string;
 }

-export const NextUILogo: React.FC<LogoProps> = ({auto, size, width, height, small, ...props}) => {
+export const NextUILogo: React.FC<LogoProps> = ({
+  auto,
+  size,
+  width,
+  height,
+  small,
+  className,
+  ...props
+}) => {
  const Small = () => (
    <svg
-      className="data-[auto=true]:sm:hidden block text-foreground"
+      className={clsx("data-[auto=true]:sm:hidden block text-foreground", className)}
      data-auto={dataAttr(auto)}
      fill="currentColor"
      height={height || size || 25}
@ -28,7 +36,10 @@ export const NextUILogo: React.FC<LogoProps> = ({auto, size, width, height, smal

  const Large = () => (
    <svg
-      className="data-[auto=true]:hidden data-[auto=true]:sm:block block text-foreground"
+      className={clsx(
+        "data-[auto=true]:hidden data-[auto=true]:sm:block block text-foreground",
+        className,
+      )}
      data-auto={dataAttr(auto)}
      fill="currentColor"
      height={24.48}
--- a/apps/docs/components/primitives.ts
+++ b/apps/docs/components/primitives.ts
@ -36,7 +36,7 @@ export const title = tv({
 });

 export const subtitle = tv({
-  base: "w-full md:w-1/2 text-xl font-light text-neutral-500 block max-w-full",
+  base: "w-full md:w-1/2 my-2 text-xl font-light text-neutral-500 block max-w-full",
  variants: {
    fullWidth: {
      true: "!w-full",
@ -45,5 +45,5 @@ export const subtitle = tv({
 });

 export const sectionWrapper = tv({
-  base: "z-10 flex flex-col gap-2 w-full my-56",
+  base: "relative z-10 flex flex-col gap-2 w-full my-56",
 });
--- a/apps/docs/content/landing/index.tsx
+++ b/apps/docs/content/landing/index.tsx
@ -89,4 +89,74 @@ export default {
  //     icon: <Magic fill="#FF4ECD" />,
  //   },
  // ]
+  themingCode: `const { nextui } = require("@nextui-org/react");
+
+module.exports = {
+  // ...
+  plugins: [
+    nextui({
+      themes: {
+        light: {
+          primary: "#0072f5",
+        },
+        dark: {
+          primary: "#0072f5",
+        },
+      },
+    }),
+  ],
+};
+
+module.exports = {
+  // ...
+  plugins: [
+    nextui({
+      themes: {
+        light: {
+          primary: "#7828c8",
+        },
+        dark: {
+          primary: "#9353d3",
+        },
+      },
+    }),
+  ],
+};
+
+module.exports = {
+  // ...
+  plugins: [
+    nextui({
+      themes: {
+        light: {
+          primary: "#FFFFFF",
+        },
+        dark: {
+          primary: "#000000",
+        },
+      },
+    }),
+  ],
+};
+
+module.exports = {
+  // ...
+  plugins: [
+    nextui({
+      themes: {
+        light: {
+          primary: "#FFD34E",
+          secondary: "#EE457E",
+          background:"#F4E8D1"
+        },
+        dark: {
+          primary: "#FFD34E",
+          secondary: "#EE457E",
+          background: "#E1CA9E"
+        },
+      },
+    }),
+  ],
+};
+`,
 };
--- a/apps/docs/libs/prism-theme.ts
+++ b/apps/docs/libs/prism-theme.ts
@ -0,0 +1,156 @@
+import {PrismTheme} from "prism-react-renderer";
+import {commonColors} from "@nextui-org/react";
+
+const codeTheme: PrismTheme = {
+  plain: {
+    backgroundColor: "var(--nextui-colors-codeBackground)",
+    color: "#F4F4F4",
+    fontWeight: "500",
+    fontStyle: "normal",
+    fontFamily: "$mono",
+    fontSize: "$xs",
+    textRendering: "geometricPrecision",
+  },
+  styles: [
+    {
+      types: ["comment", "prolog", "doctype", "cdata"],
+      style: {
+        color: "var(--nextui-colors-codeComment)",
+      },
+    },
+    {
+      types: ["symbol", "text"],
+      style: {
+        color: "var(--nextui-colors-white)",
+      },
+    },
+    {
+      types: ["punctuation"],
+      style: {
+        color: commonColors.green[500],
+      },
+    },
+    {
+      types: ["function"],
+      style: {
+        color: "#61AFEF",
+      },
+    },
+    {
+      types: ["namespace"],
+      style: {
+        opacity: 1,
+      },
+    },
+    {
+      types: ["tag", "operator", "number"],
+      style: {
+        color: "#E5C07B",
+      },
+    },
+    {
+      types: ["property", "function"],
+      style: {
+        color: "var(--nextui-colors-success)",
+      },
+    },
+    {
+      types: ["tag-id", "selector", "atrule-id"],
+      style: {
+        color: "#E06C75",
+      },
+    },
+    {
+      types: ["attr-name"],
+      style: {
+        color: "var(--nextui-colors-yellow600)",
+      },
+    },
+    {
+      types: [
+        "boolean",
+        "string",
+        "entity",
+        "url",
+        "attr-value",
+        "keyword",
+        "control",
+        "directive",
+        "unit",
+        "statement",
+        "regex",
+        "at-rule",
+        "placeholder",
+        "variable",
+      ],
+      style: {
+        color: "#98C379",
+      },
+    },
+    {
+      types: ["deleted"],
+      style: {
+        textDecorationLine: "line-through",
+      },
+    },
+    {
+      types: ["language-javascript", "script"],
+      style: {
+        color: "var(--nextui-colors-success)",
+      },
+    },
+    {
+      types: ["inserted"],
+      style: {
+        textDecorationLine: "underline",
+      },
+    },
+    {
+      types: ["italic"],
+      style: {
+        fontStyle: "italic",
+      },
+    },
+    {
+      types: ["important", "bold"],
+      style: {
+        fontWeight: "bold",
+      },
+    },
+    {
+      types: ["important", "primitive"],
+      style: {
+        color: "#c678dd",
+      },
+    },
+  ],
+};
+
+export const getCodeThemeColors = () => {
+  const stringColor = codeTheme.styles.find((style) => style.types.includes("string"));
+  const punctuationColor = codeTheme.styles.find((style) => style.types.includes("punctuation"));
+  const numberColor = codeTheme.styles.find((style) => style.types.includes("number"));
+  const textColor = codeTheme.styles.find((style) => style.types.includes("text"));
+  const selectorColor = codeTheme.styles.find((style) => style.types.includes("selector"));
+  const commentColor = codeTheme.styles.find((style) => style.types.includes("comment"));
+  const classnameColor = codeTheme.styles.find((style) => style.types.includes("tag"));
+  const attrColor = codeTheme.styles.find((style) => style.types.includes("attr-name"));
+  const functionColor = codeTheme.styles.find((style) => style.types.includes("function"));
+  const primitiveColor = codeTheme.styles.find((style) => style.types.includes("primitive"));
+
+  return {
+    ...codeTheme.plain,
+    stringColor,
+    punctuationColor,
+    numberColor,
+    textColor,
+    selectorColor,
+    commentColor,
+    classnameColor,
+    attrColor,
+    functionColor,
+    primitiveColor,
+  };
+};
+
+export default codeTheme;
--- a/apps/docs/libs/rehype-highlight-line.js
+++ b/apps/docs/libs/rehype-highlight-line.js
@ -0,0 +1,122 @@
+// Inspired by https://github.dev/modulz/stitches-site
+
+const hastToHtml = require("hast-util-to-html");
+const unified = require("unified");
+const parse = require("rehype-parse");
+
+const lineNumberify = function lineNumberify(ast, lineNum = 1) {
+  let lineNumber = lineNum;
+
+  return ast.reduce(
+    (result, node) => {
+      if (node.type === "text") {
+        if (node.value.indexOf("\n") === -1) {
+          node.lineNumber = lineNumber;
+          result.nodes.push(node);
+
+          return result;
+        }
+
+        const lines = node.value.split("\n");
+
+        for (let i = 0; i < lines.length; i++) {
+          // eslint-disable-next-line no-plusplus
+          if (i !== 0) ++lineNumber;
+          if (i === lines.length - 1 && lines[i].length === 0) continue;
+          result.nodes.push({
+            type: "text",
+            value: i === lines.length - 1 ? lines[i] : `${lines[i]}\n`,
+            lineNumber: lineNumber,
+          });
+        }
+
+        result.lineNumber = lineNumber;
+
+        return result;
+      }
+
+      if (node.children) {
+        node.lineNumber = lineNumber;
+        const processed = lineNumberify(node.children, lineNumber);
+
+        node.children = processed.nodes;
+        result.lineNumber = processed.lineNumber;
+        result.nodes.push(node);
+
+        return result;
+      }
+
+      result.nodes.push(node);
+
+      return result;
+    },
+    {nodes: [], lineNumber: lineNumber},
+  );
+};
+
+const wrapLines = function wrapLines(ast, linesToHighlight) {
+  const highlightAll = linesToHighlight.length === 1 && linesToHighlight[0] === 0;
+  const allLines = Array.from(new Set(ast.map((x) => x.lineNumber)));
+  let i = 0;
+  const wrapped = allLines.reduce((nodes, marker) => {
+    const line = marker;
+    const children = [];
+
+    for (; i < ast.length; i++) {
+      if (ast[i].lineNumber < line) {
+        nodes.push(ast[i]);
+        continue;
+      }
+
+      if (ast[i].lineNumber === line) {
+        children.push(ast[i]);
+        continue;
+      }
+
+      if (ast[i].lineNumber > line) {
+        break;
+      }
+    }
+
+    nodes.push({
+      type: "element",
+      tagName: "div",
+      properties: {
+        dataLine: line,
+        className: "highlight-line",
+        dataHighlighted: linesToHighlight.includes(line) || highlightAll ? "true" : "false",
+      },
+      children: children,
+      lineNumber: line,
+    });
+
+    return nodes;
+  }, []);
+
+  return wrapped;
+};
+
+// https://github.com/gatsbyjs/gatsby/pull/26161/files
+const MULTILINE_TOKEN_SPAN = /<span class="token ([^"]+)">[^<]*\n[^<]*<\/span>/g;
+
+const applyMultilineFix = function (ast) {
+  // AST to HTML
+  let html = hastToHtml(ast);
+
+  // Fix JSX issue
+  html = html.replace(MULTILINE_TOKEN_SPAN, (match, token) =>
+    match.replace(/\n/g, `</span>\n<span class="token ${token}">`),
+  );
+
+  // HTML to AST
+  const hast = unified().use(parse, {emitParseErrors: true, fragment: true}).parse(html);
+
+  return hast.children;
+};
+
+module.exports = function (ast, lines) {
+  const formattedAst = applyMultilineFix(ast);
+  const numbered = lineNumberify(formattedAst).nodes;
+
+  return wrapLines(numbered, lines);
+};
--- a/apps/docs/libs/rehype-highlight-word.js
+++ b/apps/docs/libs/rehype-highlight-word.js
@ -0,0 +1,13 @@
+const hastToHtml = require("hast-util-to-html");
+const unified = require("unified");
+const parse = require("rehype-parse");
+
+const CALLOUT = /__(.*?)__/g;
+
+module.exports = (code) => {
+  const html = hastToHtml(code);
+  const result = html.replace(CALLOUT, (_, text) => `<span class="highlight-word">${text}</span>`);
+  const hast = unified().use(parse, {emitParseErrors: true, fragment: true}).parse(result);
+
+  return hast.children;
+};
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@ -9,27 +9,37 @@
    "lint": "next lint"
  },
  "dependencies": {
-    "@vercel/analytics": "^0.1.11",
    "@nextui-org/react": "workspace:*",
-    "@nextui-org/theme": "workspace:*",
    "@nextui-org/shared-icons": "workspace:*",
    "@nextui-org/shared-utils": "workspace:*",
+    "@nextui-org/theme": "workspace:*",
+    "@react-aria/visually-hidden": "^3.8.0",
+    "@vercel/analytics": "^0.1.11",
+    "framer-motion": "^10.11.2",
+    "hast-util-to-html": "7.1.2",
+    "lodash": "^4.17.21",
    "next": "13.3.0",
    "next-themes": "^0.2.1",
+    "parse-numeric-range": "1.2.0",
+    "prism-react-renderer": "^1.2.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
-    "shelljs": "^0.8.4",
-    "framer-motion": "^10.11.2",
-    "@react-aria/visually-hidden": "^3.8.0"
+    "refractor": "3.3.1",
+    "rehype": "11.0.0",
+    "rehype-parse": "7.0.1",
+    "shelljs": "^0.8.4"
  },
  "devDependencies": {
-    "eslint-config-next": "^11.0.0",
+    "@types/lodash": "^4.14.194",
    "@types/node": "18.16.0",
+    "@types/parse-numeric-range": "^0.0.1",
    "@types/react": "^18.0.1",
    "@types/react-dom": "^18.0.0",
+    "@types/refractor": "^3.0.2",
    "@types/shelljs": "^0.8.9",
-    "next-sitemap": "^4.0.7",
    "autoprefixer": "^10.4.14",
+    "eslint-config-next": "^11.0.0",
+    "next-sitemap": "^4.0.7",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7",
    "typescript": "^4.9.5"
--- a/apps/docs/public/gradients/blue-purple-1.svg
+++ b/apps/docs/public/gradients/blue-purple-1.svg
@ -0,0 +1,20 @@
+<svg width="1265" height="1210" viewBox="0 0 1265 1210" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.3" filter="url(#filter0_f_577_931)">
+<path opacity="0.5" d="M464.569 564.678C457.659 588.507 430.809 599.979 426.649 625.588C426.059 632.478 418.529 645.428 393.139 642.111C368.669 656.336 292.909 628.697 274.409 652.471C260.789 669.973 245.799 691.802 251.089 723.272C255.169 747.536 268.749 771.454 282.509 792.105C302.449 822.018 325.979 849.223 351.399 870.762C434.239 940.978 529.089 959.256 611.169 959.506C711.179 959.816 797.819 921.193 870.749 859.425C900.829 833.952 927.769 804.466 948.479 766.932C967.539 732.375 983.049 693.738 995.019 652.834C1010.27 600.763 1018.86 542.381 1012.47 479.216C1007.62 431.174 987.009 385.361 958.469 343.538C919.469 286.361 867.039 253.896 816.269 250.237C784.949 247.981 750.179 261.548 748.729 303.898C747.629 336.205 762.549 372.514 772.229 405.683C778.689 427.849 787.499 459.242 772.729 470.803C747.749 490.36 712.959 495.977 681.459 499.938C641.219 504.998 598.139 494.109 556.259 491.446C532.139 489.912 512.599 501.741 495.439 516.208C481.649 527.841 470.499 544.249 464.569 564.678Z" fill="#FF1CF7"/>
+</g>
+<g opacity="0.3" filter="url(#filter1_f_577_931)">
+<path opacity="0.5" d="M800.033 564.678C806.943 588.507 833.793 599.979 837.953 625.588C838.543 632.478 846.073 645.428 871.463 642.111C895.933 656.336 971.693 628.697 990.193 652.471C1003.81 669.973 1018.8 691.802 1013.51 723.272C1009.43 747.536 995.853 771.454 982.093 792.105C962.153 822.018 938.623 849.223 913.203 870.762C830.363 940.978 735.513 959.256 653.433 959.506C553.423 959.816 466.783 921.193 393.853 859.425C363.773 833.952 336.833 804.466 316.123 766.932C297.063 732.375 281.553 693.738 269.583 652.834C254.333 600.763 245.743 542.381 252.133 479.216C256.983 431.174 277.593 385.361 306.133 343.538C345.133 286.361 397.563 253.896 448.333 250.237C479.653 247.981 514.423 261.548 515.873 303.898C516.973 336.205 502.053 372.514 492.373 405.683C485.913 427.849 477.103 459.242 491.873 470.803C516.853 490.36 551.643 495.977 583.143 499.938C623.383 504.998 666.463 494.109 708.343 491.446C732.463 489.912 752.003 501.741 769.163 516.208C782.953 527.841 794.103 544.249 800.033 564.678Z" fill="#0070F3"/>
+</g>
+<defs>
+<filter id="filter0_f_577_931" x="0" y="0" width="1264.6" height="1209.51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="125" result="effect1_foregroundBlur_577_931"/>
+</filter>
+<filter id="filter1_f_577_931" x="0" y="0" width="1264.6" height="1209.51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="125" result="effect1_foregroundBlur_577_931"/>
+</filter>
+</defs>
+</svg>
--- a/apps/docs/samples/custom-themes.html
+++ b/apps/docs/samples/custom-themes.html
@ -0,0 +1,70 @@
+<div class="_">
+  <div class="_">
+    <img src="__content__" alt="" class="_" loading="lazy" />
+  </div>
+  <form class="_">
+    <div class="_">
+      <h1 class="_">
+        __content__
+      </h1>
+      <div class="_">
+        __content__
+      </div>
+      <div class="_">
+        In stock
+      </div>
+    </div>
+    <div class="_">
+      <div class="_">
+        <label>
+          <input class="_" name="size" type="radio" value="xs" checked />
+          <div class="_">
+            XS
+          </div>
+        </label>
+        <label>
+          <input class="_" name="size" type="radio" value="s" />
+          <div class="_">
+            S
+          </div>
+        </label>
+        <label>
+          <input class="_" name="size" type="radio" value="m" />
+          <div class="_">
+            M
+          </div>
+        </label>
+        <label>
+          <input class="_" name="size" type="radio" value="l" />
+          <div class="_">
+            L
+          </div>
+        </label>
+        <label>
+          <input class="_" name="size" type="radio" value="xl" />
+          <div class="_">
+            XL
+          </div>
+        </label>
+      </div>
+    </div>
+    <div class="_">
+      <div class="_">
+        <button class="_" type="submit">
+          Buy now
+        </button>
+        <button class="_" type="button">
+          Add to bag
+        </button>
+      </div>
+      <button class="_" type="button" aria-label="Like">
+        <svg width="20" height="20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
+        </svg>
+      </button>
+    </div>
+    <p class="_">
+      Free shipping on all continental US orders.
+    </p>
+  </form>
+</div>
--- a/apps/docs/styles/globals.css
+++ b/apps/docs/styles/globals.css
@ -2,12 +2,160 @@
@tailwind components;
@tailwind utilities;

-
 html {
  overflow-y: scroll !important;
  height: 100vh;
 }

-body, #__next {
+body,
+#__next {
  height: 100%;
-}
+}
+
+/**
+* ----------------------------------------
+* Code block styles
+* ----------------------------------------
+*/
+
+@layer components {
+  .code-block .token.parameter {
+    @apply text-code-foreground;
+  }
+
+  .code-block .token.tag,
+  .code-block .token.selector,
+  .code-block .token.selector .class,
+  .code-block .token.function {
+    @apply text-code-syntax1;
+  }
+
+  .code-block .token.script.language-javascript {
+    @apply text-code-foreground;
+  }
+
+  .code-block .token.class-name {
+    @apply text-code-syntax5;
+  }
+
+  .code-block .token.attr-value,
+  .code-block .token.class,
+  .code-block .token.string,
+  .code-block .token.number,
+  .code-block .token.unit,
+  .code-block .token.color {
+    @apply text-code-syntax2;
+  }
+
+  .code-block .token.keyword,
+  .code-block .token.rule,
+  .code-block .token.operator,
+  .code-block .token.pseudo-class,
+  .code-block .token.important {
+    @apply text-code-syntax3;
+  }
+
+  .code-block .token.attr-name {
+    @apply text-code-syntax6;
+  }
+
+  .code-block .token.punctuation,
+  .code-block .token.module,
+  .code-block .token.property {
+    @apply text-code-syntax4;
+  }
+
+  .code-block .token.comment {
+    @apply text-code-comment;
+  }
+
+  .code-block .token.atapply .token:not(.rule):not(.important) {
+    color: inherit;
+  }
+
+  .code-block .language-shell .token:not(.comment) {
+    color: inherit;
+  }
+
+  .code-block .language-css .token.function {
+    color: inherit;
+  }
+
+  .code-block .token.deleted:not(.prefix),
+  .code-block .token.inserted:not(.prefix) {
+    @apply block px-4 mx-auto;
+  }
+
+  .code-block .token.deleted:not(.prefix) {
+    @apply text-code-removed;
+  }
+
+  .code-block .token.inserted:not(.prefix) {
+    @apply text-code-added;
+  }
+
+  .code-block .token.deleted.prefix,
+  .code-block .token.inserted.prefix {
+    @apply select-none;
+  }
+
+  /* Styles for highlighted word */
+  .code-block .highlight-word {
+    @apply inline-block text-code-highlighted-word1-bg shadow-highlighted bg-code-highlighted-word1-bg;
+  }
+
+  .code-block .highlight-word .token {
+    color: inherit;
+  }
+
+  .code-block .highlight-word.on {
+    @apply transition-all cursor-pointer;
+  }
+
+  .code-block .token.deleted .highlight-word {
+    @apply text-code-highlighted-word2-text bg-code-highlighted-word2-bg
+  }
+
+  .code-block .token.deleted .highlight-word.on {
+    @apply bg-code-highlighted-word2-bg-active;
+  }
+
+  .code-block .token.inserted .highlight-word {
+    @apply bg-code-highlighted-word3-bg;
+  }
+
+  .code-block .token.inserted .highlight-word.on {
+    @apply bg-code-highlighted-word3-bg-active;
+  }
+
+  /* Line numbers */
+  .code-block[data-line-numbers="true"] .highlight-line::before {
+    @apply text-code-line-number;
+    content: attr(data-line);
+    position: absolute;
+    left: -5px;
+    top: 0;
+  }
+
+  /* Styles for highlighted lines */
+  .code-block .highlight-line {
+    @apply transition-colors;
+  }
+
+  .code-block .highlight-line * {
+    @apply transition-colors;
+  }
+
+  .code-block .highlight-line[data-highlighted="false"] {
+    @apply text-code-faded-line
+  }
+
+  .code-block .highlight-line[data-highlighted="false"] * {
+    @apply text-code-faded-line
+  }
+
+  /* Typewriter styles */
+  .code-block .typewriter {
+    @apply opacity-0;
+  }
+}
--- a/apps/docs/tailwind.config.js
+++ b/apps/docs/tailwind.config.js
@ -1,7 +1,9 @@
-const { nextui } = require("@nextui-org/theme/dist/plugin");
+const {nextui} = require("@nextui-org/theme/plugin");
+const {commonColors} = require("@nextui-org/theme/colors");

 // get tailwindcss default config
 const defaultConfig = require("tailwindcss/defaultConfig");
+const twColors = require("tailwindcss/colors.js");

 /** @type {import('tailwindcss').Config} */
 module.exports = {
@ -9,27 +11,52 @@ module.exports = {
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./layouts/**/*.{js,ts,jsx,tsx,mdx}",
-    "../../packages/core/theme/dist/**/*.{js,ts,jsx,tsx}"
+    "../../packages/core/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: "class",
  theme: {
-    fontFamily: {
-      sans: [ "Inter var, sans-serif",{
-        fontFeatureSettings:'"cv02","cv03","cv04","cv11"',
-      }, ...defaultConfig.theme.fontFamily.sans],
-    },
    extend: {
+      colors: {
+        "code-foreground": "#F4F4F4",
+        "code-syntax1": "#61AFEF",
+        "code-syntax2": "#98C379",
+        "code-syntax3": "#c678dd",
+        "code-syntax4": commonColors.yellow[600],
+        "code-syntax5": "#E06C75",
+        "code-syntax6": commonColors.yellow[600],
+        "code-removed": commonColors.red[300],
+        "code-added": commonColors.green[300],
+        "code-line-number": twColors.zinc[300],
+        "code-faded-line": twColors.zinc[500],
+        "code-comment": twColors.zinc[500],
+        "code-highlighted-word1-bg": commonColors.purple[500],
+        "code-highlighted-word1-bg-active": commonColors.purple[600],
+        "code-highlighted-word1-text": commonColors.purple[800],
+        "code-highlighted-word2-bg": commonColors.red[100],
+        "code-highlighted-word2-bg-active": commonColors.red[500],
+        "code-highlighted-word2-text": commonColors.red[200],
+        "code-highlighted-word3-bg": commonColors.green[300],
+        "code-highlighted-word3-bg-active": commonColors.green[300],
+        "code-highlighted-word3-text": commonColors.green[100],
+      },
+      boxShadow: {
+        highlighted: `${commonColors.purple[500]} 1px 0 0, ${commonColors.purple[500]} -1px 0 0`,
+      },
+      fontFamily: {
+        sans: ["Inter", ...defaultConfig.theme.fontFamily.sans],
+        serif: defaultConfig.theme.fontFamily.serif,
+        mono: defaultConfig.theme.fontFamily.mono,
+      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+        "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
-    keyframes:{
+    keyframes: {
      heartbeat: {
-        '0%': { transform: 'scale(1)' },
-        '50%': { transform: 'scale(1.2)' },
-        '100%': { transform: 'scale(1)' },
+        "0%": {transform: "scale(1)"},
+        "50%": {transform: "scale(1.2)"},
+        "100%": {transform: "scale(1)"},
      },
      levitate: {
        "0%": {
@ -47,12 +74,23 @@ module.exports = {
        "100%": {
          transform: "translateY(0)",
        },
-      }
+      },
    },
    animation: {
-      'heartbeat': 'heartbeat 1s ease-in-out infinite',
-      'levitate': 'levitate 5s ease infinite',
-    }
+      heartbeat: "heartbeat 1s ease-in-out infinite",
+      levitate: "levitate 5s ease infinite",
+    },
  },
-  plugins: [nextui()],
+  plugins: [
+    nextui({
+      themes: {
+        light: {
+          "code-background": "#363449",
+        },
+        dark: {
+          "code-background": "#111111",
+        },
+      },
+    }),
+  ],
 };
--- a/packages/components/accordion/CHANGELOG.md
+++ b/packages/components/accordion/CHANGELOG.md
@ -1,5 +1,49 @@
 # @nextui-org/accordion

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230429213333
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230429213333
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230429213333
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230429140802
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230429140802
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230429140802
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/accordion/package.json
+++ b/packages/components/accordion/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/accordion",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
  "keywords": [
    "react",
--- a/packages/components/avatar/CHANGELOG.md
+++ b/packages/components/avatar/CHANGELOG.md
@ -1,5 +1,43 @@
 # @nextui-org/avatar

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/use-image@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/use-image@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/avatar/package.json
+++ b/packages/components/avatar/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/avatar",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
  "keywords": [
    "avatar"
--- a/packages/components/badge/CHANGELOG.md
+++ b/packages/components/badge/CHANGELOG.md
@ -1,5 +1,41 @@
 # @nextui-org/badge

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/badge/package.json
+++ b/packages/components/badge/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/badge",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "Badges are used as a small numerical value or status descriptor for UI elements.",
  "keywords": [
    "badge"
--- a/packages/components/button/CHANGELOG.md
+++ b/packages/components/button/CHANGELOG.md
@ -1,5 +1,51 @@
 # @nextui-org/button

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/spinner@0.0.0-dev-v2-20230429213333
+  - @nextui-org/drip@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+  - @nextui-org/drip@0.0.0-dev-v2-20230429144144
+  - @nextui-org/spinner@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+  - @nextui-org/drip@0.0.0-dev-v2-20230429142755
+  - @nextui-org/spinner@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/spinner@0.0.0-dev-v2-20230429140802
+  - @nextui-org/drip@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/button/package.json
+++ b/packages/components/button/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/button",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "Buttons allow users to perform actions and choose with a single tap.",
  "keywords": [
    "button"
--- a/packages/components/card/CHANGELOG.md
+++ b/packages/components/card/CHANGELOG.md
@ -1,5 +1,47 @@
 # @nextui-org/card

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/drip@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+  - @nextui-org/drip@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+  - @nextui-org/drip@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/drip@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/card/package.json
+++ b/packages/components/card/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/card",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "Card is a container for text, photos, and actions in the context of a single subject.",
  "keywords": [
    "card"
--- a/packages/components/checkbox/CHANGELOG.md
+++ b/packages/components/checkbox/CHANGELOG.md
@ -1,5 +1,41 @@
 # @nextui-org/checkbox

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/checkbox/package.json
+++ b/packages/components/checkbox/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/checkbox",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
  "keywords": [
    "checkbox"
--- a/packages/components/chip/CHANGELOG.md
+++ b/packages/components/chip/CHANGELOG.md
@ -1,5 +1,43 @@
 # @nextui-org/chip

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230429213333
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230429140802
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/chip/package.json
+++ b/packages/components/chip/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/chip",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "Chips help people enter information, make selections, filter content, or trigger actions.",
  "keywords": [
    "chip"
--- a/packages/components/code/CHANGELOG.md
+++ b/packages/components/code/CHANGELOG.md
@ -1,5 +1,41 @@
 # @nextui-org/code

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/code/package.json
+++ b/packages/components/code/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/code",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "Code is a component used to display inline code.",
  "keywords": [
    "code"
--- a/packages/components/divider/CHANGELOG.md
+++ b/packages/components/divider/CHANGELOG.md
@ -1,5 +1,41 @@
 # @nextui-org/divider

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/divider/package.json
+++ b/packages/components/divider/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/divider",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": ". A separator is a visual divider between two groups of content",
  "keywords": [
    "divider"
--- a/packages/components/drip/CHANGELOG.md
+++ b/packages/components/drip/CHANGELOG.md
@ -1,5 +1,41 @@
 # @nextui-org/drip

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/drip/package.json
+++ b/packages/components/drip/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/drip",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "A ripple effect for ensuring that the user fells the system is reacting instantaneously",
  "keywords": [
    "drip"
--- a/packages/components/dropdown/CHANGELOG.md
+++ b/packages/components/dropdown/CHANGELOG.md
@ -1,5 +1,49 @@
 # @nextui-org/dropdown

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/use-is-mobile@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/popover@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+  - @nextui-org/popover@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+  - @nextui-org/popover@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/use-is-mobile@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/popover@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/dropdown/package.json
+++ b/packages/components/dropdown/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/dropdown",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "A dropdown displays a list of actions or options that a user can choose.",
  "keywords": [
    "dropdown"
@ -47,7 +47,6 @@
    "@nextui-org/use-is-mobile": "workspace:*",
    "@react-aria/menu": "^3.9.0",
    "@react-aria/utils": "^3.16.0",
-    "@react-stately/collections": "^3.6.0",
    "@react-stately/menu": "^3.5.1",
    "@react-stately/tree": "^3.6.0",
    "@react-aria/focus": "^3.12.0",
--- a/packages/components/dropdown/src/index.ts
+++ b/packages/components/dropdown/src/index.ts
@ -1,4 +1,4 @@
-import {Section as DropdownSection} from "@react-stately/collections";
+import {BaseSection as DropdownSection} from "@nextui-org/aria-utils";

 import Dropdown from "./dropdown";
 import DropdownTrigger from "./dropdown-trigger";
--- a/packages/components/image/CHANGELOG.md
+++ b/packages/components/image/CHANGELOG.md
@ -1,5 +1,43 @@
 # @nextui-org/image

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/use-image@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/use-image@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/image/package.json
+++ b/packages/components/image/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/image",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "A simple image component",
  "keywords": [
    "image"
--- a/packages/components/image/src/image.tsx
+++ b/packages/components/image/src/image.tsx
@ -14,6 +14,7 @@ const Image = forwardRef<ImageProps, "img">((props, ref) => {
    isBlurred,
    isZoomed,
    fallbackSrc,
+    removeWrapper,
    disableSkeleton,
    getImgProps,
    getWrapperProps,
@ -24,6 +25,11 @@ const Image = forwardRef<ImageProps, "img">((props, ref) => {
  });

  const img = <Component ref={domRef} {...getImgProps()} />;
+
+  if (removeWrapper) {
+    return img;
+  }
+
  const zoomed = (
    <div className={slots.zoomedWrapper({class: classNames?.zoomedWrapper})}>{img}</div>
  );
--- a/packages/components/image/src/use-image.ts
+++ b/packages/components/image/src/use-image.ts
@ -36,6 +36,12 @@ interface Props extends HTMLNextUIProps<"img"> {
   * A loading strategy to use for the image.
   */
  loading?: NativeImageProps["loading"];
+  /**
+   * Whether to remove the wrapper element. This will cause the image to be rendered as a direct child of the parent element.
+   * If you set this prop as `true` neither the skeleton nor the zoom effect will work.
+   * @default false
+   */
+  removeWrapper?: boolean;
  /**
   * Controlled loading state.
   */
@ -76,6 +82,7 @@ export function useImage(originalProps: UseImageProps) {
    fallbackSrc,
    isLoading: isLoadingProp,
    disableSkeleton = !!fallbackSrc,
+    removeWrapper = false,
    onError,
    onLoad,
    ...otherProps
@ -120,12 +127,12 @@ export function useImage(originalProps: UseImageProps) {

  const baseStyles = clsx(className, classNames?.base);

-  const getImgProps: PropGetter = () => {
+  const getImgProps: PropGetter = (props = {}) => {
    return {
      src,
      ref: domRef,
      "data-loaded": dataAttr(isImgLoaded),
-      className: slots.img({class: baseStyles}),
+      className: slots.img({class: clsx(baseStyles, props?.className)}),
      ...otherProps,
    };
  };
@ -138,13 +145,13 @@ export function useImage(originalProps: UseImageProps) {
      : {};

    return {
-      className: slots.base({class: baseStyles}),
+      className: slots.base({class: classNames?.base}),
      style: {
        ...fallbackStyle,
        maxWidth: w,
      },
    };
-  }, [slots, showFallback, fallbackSrc, baseStyles]);
+  }, [slots, showFallback, fallbackSrc, classNames?.base]);

  const getBlurredImgProps = useCallback<PropGetter>(() => {
    return {
@ -162,6 +169,7 @@ export function useImage(originalProps: UseImageProps) {
    isBlurred,
    disableSkeleton,
    fallbackSrc,
+    removeWrapper,
    isZoomed: originalProps.isZoomed,
    isLoading: originalProps.isLoading,
    getImgProps,
--- a/packages/components/input/CHANGELOG.md
+++ b/packages/components/input/CHANGELOG.md
@ -1,5 +1,45 @@
 # @nextui-org/input

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230429213333
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/use-aria-field@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230429140802
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/use-aria-field@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/input/package.json
+++ b/packages/components/input/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/input",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "The input component is designed for capturing user input within a text field.",
  "keywords": [
    "input"
--- a/packages/components/kbd/CHANGELOG.md
+++ b/packages/components/kbd/CHANGELOG.md
@ -1,5 +1,41 @@
 # @nextui-org/kbd

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/kbd/package.json
+++ b/packages/components/kbd/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/kbd",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "The keyboard key components indicates which key or set of keys used to execute a specificv  action",
  "keywords": [
    "kbd"
--- a/packages/components/link/CHANGELOG.md
+++ b/packages/components/link/CHANGELOG.md
@ -1,5 +1,43 @@
 # @nextui-org/link

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230429213333
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230429140802
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/link/package.json
+++ b/packages/components/link/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/link",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an &lt;a&gt;",
  "keywords": [
    "link"
--- a/packages/components/modal/CHANGELOG.md
+++ b/packages/components/modal/CHANGELOG.md
@ -1,5 +1,49 @@
 # @nextui-org/modal

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230429213333
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230429213333
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230429213333
+  - @nextui-org/use-disclosure@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230429140802
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230429140802
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230429140802
+  - @nextui-org/use-disclosure@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/modal/package.json
+++ b/packages/components/modal/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/modal",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "Displays a dialog with a custom content that requires attention or provides additional information.",
  "keywords": [
    "modal"
--- a/packages/components/navbar/CHANGELOG.md
+++ b/packages/components/navbar/CHANGELOG.md
@ -1,5 +1,47 @@
 # @nextui-org/navbar

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230429213333
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230429213333
+  - @nextui-org/use-scroll-position@0.0.0-dev-v2-20230429213333
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230429140802
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230429140802
+  - @nextui-org/use-scroll-position@0.0.0-dev-v2-20230429140802
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/navbar/package.json
+++ b/packages/components/navbar/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/navbar",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
  "keywords": [
    "navbar"
--- a/packages/components/pagination/CHANGELOG.md
+++ b/packages/components/pagination/CHANGELOG.md
@ -1,5 +1,45 @@
 # @nextui-org/pagination

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230429213333
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/use-pagination@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230429140802
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/use-pagination@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/pagination/package.json
+++ b/packages/components/pagination/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/pagination",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "The Pagination component allows you to display active page and navigate between multiple pages.",
  "keywords": [
    "pagination"
--- a/packages/components/popover/CHANGELOG.md
+++ b/packages/components/popover/CHANGELOG.md
@ -1,5 +1,51 @@
 # @nextui-org/popover

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230429213333
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230429213333
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/button@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+  - @nextui-org/button@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+  - @nextui-org/button@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230429140802
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230429140802
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/button@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/popover/package.json
+++ b/packages/components/popover/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/popover",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "A popover is an overlay element positioned relative to a trigger.",
  "keywords": [
    "popover"
--- a/packages/components/progress/CHANGELOG.md
+++ b/packages/components/progress/CHANGELOG.md
@ -1,5 +1,45 @@
 # @nextui-org/progress

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/use-aria-label@0.0.0-dev-v2-20230429213333
+  - @nextui-org/use-is-mounted@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/use-aria-label@0.0.0-dev-v2-20230429140802
+  - @nextui-org/use-is-mounted@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/progress/package.json
+++ b/packages/components/progress/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/progress",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
  "keywords": [
    "progress"
--- a/packages/components/radio/CHANGELOG.md
+++ b/packages/components/radio/CHANGELOG.md
@ -1,5 +1,41 @@
 # @nextui-org/radio

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/radio/package.json
+++ b/packages/components/radio/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/radio",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "Radios allow users to select a single option from a list of mutually exclusive options.",
  "keywords": [
    "radio"
--- a/packages/components/radio/src/radio-group.tsx
+++ b/packages/components/radio/src/radio-group.tsx
@ -3,7 +3,7 @@ import {forwardRef} from "@nextui-org/system";
 import {RadioGroupProvider} from "./radio-group-context";
 import {UseRadioGroupProps, useRadioGroup} from "./use-radio-group";

-export interface RadioGroupProps extends Omit<UseRadioGroupProps, "ref"> {}
+export interface RadioGroupProps extends Omit<UseRadioGroupProps, "ref" | "defaultChecked"> {}

 const RadioGroup = forwardRef<RadioGroupProps, "div">((props, ref) => {
  const {
--- a/packages/components/radio/src/use-radio.ts
+++ b/packages/components/radio/src/use-radio.ts
@ -36,7 +36,7 @@ interface Props extends HTMLNextUIProps<"label"> {
   * <Radio classNames={{
   *    base:"base-classes",
   *    wrapper: "wrapper-classes",
-   *    point: "control-classes", // inner circle
+   *    control: "control-classes", // inner circle
   *    labelWrapper: "label-wrapper-classes", // this wraps the label and description
   *    label: "label-classes",
   *    description: "description-classes",
--- a/packages/components/snippet/CHANGELOG.md
+++ b/packages/components/snippet/CHANGELOG.md
@ -1,5 +1,47 @@
 # @nextui-org/snippet

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/use-clipboard@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/use-clipboard@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/snippet/package.json
+++ b/packages/components/snippet/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/snippet",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "Display a snippet of copyable code for the command line.",
  "keywords": [
    "snippet"
--- a/packages/components/spacer/CHANGELOG.md
+++ b/packages/components/spacer/CHANGELOG.md
@ -1,5 +1,41 @@
 # @nextui-org/spacer

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/spacer/package.json
+++ b/packages/components/spacer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/spacer",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "A flexible spacer component designed to create consistent spacing and maintain alignment in your layout.",
  "keywords": [
    "spacer"
--- a/packages/components/spinner/CHANGELOG.md
+++ b/packages/components/spinner/CHANGELOG.md
@ -1,5 +1,41 @@
 # @nextui-org/spinner

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/spinner/package.json
+++ b/packages/components/spinner/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/spinner",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "Loaders express an unspecified wait time or display the length of a process.",
  "keywords": [
    "loading",
--- a/packages/components/switch/CHANGELOG.md
+++ b/packages/components/switch/CHANGELOG.md
@ -1,5 +1,41 @@
 # @nextui-org/switch

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/switch/package.json
+++ b/packages/components/switch/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/switch",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
  "keywords": [
    "switch"
--- a/packages/components/table/CHANGELOG.md
+++ b/packages/components/table/CHANGELOG.md
@ -1,5 +1,51 @@
 # @nextui-org/table

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230429213333
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/spacer@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230429144144
+  - @nextui-org/spacer@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230429142755
+  - @nextui-org/spacer@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230429140802
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/spacer@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/table/package.json
+++ b/packages/components/table/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/table",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "Tables are used to display tabular data using rows and columns. ",
  "keywords": [
    "table"
--- a/packages/components/tabs/CHANGELOG.md
+++ b/packages/components/tabs/CHANGELOG.md
@ -1,5 +1,45 @@
 # @nextui-org/tabs

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230429213333
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230429140802
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/tabs/package.json
+++ b/packages/components/tabs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/tabs",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "Tabs organize content into multiple sections and allow users to navigate between them.",
  "keywords": [
    "tabs"
--- a/packages/components/tabs/src/tab-item.tsx
+++ b/packages/components/tabs/src/tab-item.tsx
@ -34,6 +34,7 @@ const TabItem = forwardRef<TabItemProps, "div">((props, ref) => {
    slots,
    state,
    tabPanelId,
+    disableCursor,
    isDisabled: isDisabledProp,
    disableAnimation,
    classNames,
@ -54,6 +55,8 @@ const TabItem = forwardRef<TabItemProps, "div">((props, ref) => {

  const tabStyles = clsx(classNames?.tab, className);

+  const ariaControls = item?.props.children ? `${tabPanelId}-${key}` : undefined;
+
  return (
    <Component
      ref={domRef}
@ -74,7 +77,7 @@ const TabItem = forwardRef<TabItemProps, "div">((props, ref) => {
          : {},
        filterDOMProps(otherProps, {labelable: true}),
      )}
-      aria-controls={tabPanelId}
+      aria-controls={ariaControls}
      className={slots.tab?.({class: tabStyles})}
      id={`${tabPanelId}-${key}`}
      style={{
@ -83,7 +86,7 @@ const TabItem = forwardRef<TabItemProps, "div">((props, ref) => {
      }}
      onClick={chain(onClick, tabProps.onClick)}
    >
-      {isSelected && !disableAnimation ? (
+      {isSelected && !disableAnimation && !disableCursor ? (
        <motion.span
          className={slots.cursor({class: classNames?.cursor})}
          layoutDependency={false}
--- a/packages/components/tabs/src/tab-panel.tsx
+++ b/packages/components/tabs/src/tab-panel.tsx
@ -33,6 +33,10 @@ const TabPanel = forwardRef<TabPanelProps, "div">((props, ref) => {

  const tabPanelStyles = clsx(classNames?.panel, className, selectedItem.props?.className);

+  if (!content) {
+    return null;
+  }
+
  return (
    <Component
      ref={domRef}
--- a/packages/components/tabs/src/use-tabs.ts
+++ b/packages/components/tabs/src/use-tabs.ts
@ -16,6 +16,11 @@ export interface Props extends Omit<HTMLNextUIProps<"div">, "children"> {
   * Ref to the DOM node.
   */
  ref?: ReactRef<HTMLElement | null>;
+  /**
+   * Whether the cursor should be hidden.
+   * @default false
+   */
+  disableCursor?: boolean;
  /**
   * Classname or List of classes to change the classNames of the element.
   * if `className` is passed, it will be added to the base slot.
@ -43,6 +48,7 @@ export type ContextType<T = object> = {
  state: TabListState<T>;
  slots: TabsReturnType;
  tabPanelId: string;
+  disableCursor?: boolean;
  classNames?: SlotsToClasses<TabsSlots>;
  disableAnimation?: boolean;
  isDisabled?: boolean;
@ -51,7 +57,7 @@ export type ContextType<T = object> = {
 export function useTabs<T extends object>(originalProps: UseTabsProps<T>) {
  const [props, variantProps] = mapPropsVariants(originalProps, tabs.variantKeys);

-  const {ref, as, className, children, classNames, ...otherProps} = props;
+  const {ref, as, className, children, classNames, disableCursor, ...otherProps} = props;

  const Component = as || "div";

@ -83,6 +89,7 @@ export function useTabs<T extends object>(originalProps: UseTabsProps<T>) {
      slots,
      tabPanelId,
      classNames,
+      disableCursor,
      isDisabled: originalProps?.isDisabled,
      disableAnimation: originalProps?.disableAnimation,
    }),
@ -90,6 +97,7 @@ export function useTabs<T extends object>(originalProps: UseTabsProps<T>) {
      state,
      slots,
      tabPanelId,
+      disableCursor,
      originalProps?.disableAnimation,
      originalProps?.isDisabled,
      classNames,
--- a/packages/components/tooltip/CHANGELOG.md
+++ b/packages/components/tooltip/CHANGELOG.md
@ -1,5 +1,45 @@
 # @nextui-org/tooltip

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230429213333
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230429140802
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/tooltip/package.json
+++ b/packages/components/tooltip/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/tooltip",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "A React Component for rendering dynamically positioned Tooltips",
  "keywords": [
    "tooltip"
--- a/packages/components/user/CHANGELOG.md
+++ b/packages/components/user/CHANGELOG.md
@ -1,5 +1,45 @@
 # @nextui-org/user

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429213333
+  - @nextui-org/avatar@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+  - @nextui-org/avatar@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+  - @nextui-org/avatar@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dom-utils@0.0.0-dev-v2-20230429140802
+  - @nextui-org/avatar@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/components/user/package.json
+++ b/packages/components/user/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/user",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "Flexible User Profile Component.",
  "keywords": [
    "user"
--- a/packages/core/react/CHANGELOG.md
+++ b/packages/core/react/CHANGELOG.md
@ -1,5 +1,153 @@
 # @nextui-org/react

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+- Updated dependencies
+  - @nextui-org/pagination@0.0.0-dev-v2-20230429213333
+  - @nextui-org/accordion@0.0.0-dev-v2-20230429213333
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230429213333
+  - @nextui-org/dropdown@0.0.0-dev-v2-20230429213333
+  - @nextui-org/progress@0.0.0-dev-v2-20230429213333
+  - @nextui-org/divider@0.0.0-dev-v2-20230429213333
+  - @nextui-org/popover@0.0.0-dev-v2-20230429213333
+  - @nextui-org/snippet@0.0.0-dev-v2-20230429213333
+  - @nextui-org/spinner@0.0.0-dev-v2-20230429213333
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230429213333
+  - @nextui-org/avatar@0.0.0-dev-v2-20230429213333
+  - @nextui-org/button@0.0.0-dev-v2-20230429213333
+  - @nextui-org/navbar@0.0.0-dev-v2-20230429213333
+  - @nextui-org/spacer@0.0.0-dev-v2-20230429213333
+  - @nextui-org/switch@0.0.0-dev-v2-20230429213333
+  - @nextui-org/badge@0.0.0-dev-v2-20230429213333
+  - @nextui-org/image@0.0.0-dev-v2-20230429213333
+  - @nextui-org/input@0.0.0-dev-v2-20230429213333
+  - @nextui-org/modal@0.0.0-dev-v2-20230429213333
+  - @nextui-org/radio@0.0.0-dev-v2-20230429213333
+  - @nextui-org/table@0.0.0-dev-v2-20230429213333
+  - @nextui-org/card@0.0.0-dev-v2-20230429213333
+  - @nextui-org/chip@0.0.0-dev-v2-20230429213333
+  - @nextui-org/code@0.0.0-dev-v2-20230429213333
+  - @nextui-org/drip@0.0.0-dev-v2-20230429213333
+  - @nextui-org/link@0.0.0-dev-v2-20230429213333
+  - @nextui-org/tabs@0.0.0-dev-v2-20230429213333
+  - @nextui-org/user@0.0.0-dev-v2-20230429213333
+  - @nextui-org/kbd@0.0.0-dev-v2-20230429213333
+  - @nextui-org/system@0.0.0-dev-v2-20230429213333
+  - @nextui-org/theme@0.0.0-dev-v2-20230429213333
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429144144
+  - @nextui-org/accordion@0.0.0-dev-v2-20230429144144
+  - @nextui-org/avatar@0.0.0-dev-v2-20230429144144
+  - @nextui-org/badge@0.0.0-dev-v2-20230429144144
+  - @nextui-org/button@0.0.0-dev-v2-20230429144144
+  - @nextui-org/card@0.0.0-dev-v2-20230429144144
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230429144144
+  - @nextui-org/chip@0.0.0-dev-v2-20230429144144
+  - @nextui-org/code@0.0.0-dev-v2-20230429144144
+  - @nextui-org/divider@0.0.0-dev-v2-20230429144144
+  - @nextui-org/drip@0.0.0-dev-v2-20230429144144
+  - @nextui-org/dropdown@0.0.0-dev-v2-20230429144144
+  - @nextui-org/image@0.0.0-dev-v2-20230429144144
+  - @nextui-org/input@0.0.0-dev-v2-20230429144144
+  - @nextui-org/kbd@0.0.0-dev-v2-20230429144144
+  - @nextui-org/link@0.0.0-dev-v2-20230429144144
+  - @nextui-org/modal@0.0.0-dev-v2-20230429144144
+  - @nextui-org/navbar@0.0.0-dev-v2-20230429144144
+  - @nextui-org/pagination@0.0.0-dev-v2-20230429144144
+  - @nextui-org/popover@0.0.0-dev-v2-20230429144144
+  - @nextui-org/progress@0.0.0-dev-v2-20230429144144
+  - @nextui-org/radio@0.0.0-dev-v2-20230429144144
+  - @nextui-org/snippet@0.0.0-dev-v2-20230429144144
+  - @nextui-org/spacer@0.0.0-dev-v2-20230429144144
+  - @nextui-org/spinner@0.0.0-dev-v2-20230429144144
+  - @nextui-org/switch@0.0.0-dev-v2-20230429144144
+  - @nextui-org/table@0.0.0-dev-v2-20230429144144
+  - @nextui-org/tabs@0.0.0-dev-v2-20230429144144
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230429144144
+  - @nextui-org/user@0.0.0-dev-v2-20230429144144
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Updated dependencies
+  - @nextui-org/theme@0.0.0-dev-v2-20230429142755
+  - @nextui-org/accordion@0.0.0-dev-v2-20230429142755
+  - @nextui-org/avatar@0.0.0-dev-v2-20230429142755
+  - @nextui-org/badge@0.0.0-dev-v2-20230429142755
+  - @nextui-org/button@0.0.0-dev-v2-20230429142755
+  - @nextui-org/card@0.0.0-dev-v2-20230429142755
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230429142755
+  - @nextui-org/chip@0.0.0-dev-v2-20230429142755
+  - @nextui-org/code@0.0.0-dev-v2-20230429142755
+  - @nextui-org/divider@0.0.0-dev-v2-20230429142755
+  - @nextui-org/drip@0.0.0-dev-v2-20230429142755
+  - @nextui-org/dropdown@0.0.0-dev-v2-20230429142755
+  - @nextui-org/image@0.0.0-dev-v2-20230429142755
+  - @nextui-org/input@0.0.0-dev-v2-20230429142755
+  - @nextui-org/kbd@0.0.0-dev-v2-20230429142755
+  - @nextui-org/link@0.0.0-dev-v2-20230429142755
+  - @nextui-org/modal@0.0.0-dev-v2-20230429142755
+  - @nextui-org/navbar@0.0.0-dev-v2-20230429142755
+  - @nextui-org/pagination@0.0.0-dev-v2-20230429142755
+  - @nextui-org/popover@0.0.0-dev-v2-20230429142755
+  - @nextui-org/progress@0.0.0-dev-v2-20230429142755
+  - @nextui-org/radio@0.0.0-dev-v2-20230429142755
+  - @nextui-org/snippet@0.0.0-dev-v2-20230429142755
+  - @nextui-org/spacer@0.0.0-dev-v2-20230429142755
+  - @nextui-org/spinner@0.0.0-dev-v2-20230429142755
+  - @nextui-org/switch@0.0.0-dev-v2-20230429142755
+  - @nextui-org/table@0.0.0-dev-v2-20230429142755
+  - @nextui-org/tabs@0.0.0-dev-v2-20230429142755
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230429142755
+  - @nextui-org/user@0.0.0-dev-v2-20230429142755
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+- Updated dependencies
+  - @nextui-org/pagination@0.0.0-dev-v2-20230429140802
+  - @nextui-org/accordion@0.0.0-dev-v2-20230429140802
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230429140802
+  - @nextui-org/dropdown@0.0.0-dev-v2-20230429140802
+  - @nextui-org/progress@0.0.0-dev-v2-20230429140802
+  - @nextui-org/divider@0.0.0-dev-v2-20230429140802
+  - @nextui-org/popover@0.0.0-dev-v2-20230429140802
+  - @nextui-org/snippet@0.0.0-dev-v2-20230429140802
+  - @nextui-org/spinner@0.0.0-dev-v2-20230429140802
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230429140802
+  - @nextui-org/avatar@0.0.0-dev-v2-20230429140802
+  - @nextui-org/button@0.0.0-dev-v2-20230429140802
+  - @nextui-org/navbar@0.0.0-dev-v2-20230429140802
+  - @nextui-org/spacer@0.0.0-dev-v2-20230429140802
+  - @nextui-org/switch@0.0.0-dev-v2-20230429140802
+  - @nextui-org/badge@0.0.0-dev-v2-20230429140802
+  - @nextui-org/image@0.0.0-dev-v2-20230429140802
+  - @nextui-org/input@0.0.0-dev-v2-20230429140802
+  - @nextui-org/modal@0.0.0-dev-v2-20230429140802
+  - @nextui-org/radio@0.0.0-dev-v2-20230429140802
+  - @nextui-org/table@0.0.0-dev-v2-20230429140802
+  - @nextui-org/card@0.0.0-dev-v2-20230429140802
+  - @nextui-org/chip@0.0.0-dev-v2-20230429140802
+  - @nextui-org/code@0.0.0-dev-v2-20230429140802
+  - @nextui-org/drip@0.0.0-dev-v2-20230429140802
+  - @nextui-org/link@0.0.0-dev-v2-20230429140802
+  - @nextui-org/tabs@0.0.0-dev-v2-20230429140802
+  - @nextui-org/user@0.0.0-dev-v2-20230429140802
+  - @nextui-org/kbd@0.0.0-dev-v2-20230429140802
+  - @nextui-org/system@0.0.0-dev-v2-20230429140802
+  - @nextui-org/theme@0.0.0-dev-v2-20230429140802
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/core/react/package.json
+++ b/packages/core/react/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/react",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "🚀 Beautiful and modern React UI library.",
  "author": "Junior Garcia <jrgarciadev@gmail.com>",
  "homepage": "https://nextui.org",
--- a/packages/core/system/CHANGELOG.md
+++ b/packages/core/system/CHANGELOG.md
@ -1,5 +1,17 @@
 # @nextui-org/system

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/core/system/package.json
+++ b/packages/core/system/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/system",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "NextUI system primitives",
  "keywords": [
    "system"
--- a/packages/core/theme/CHANGELOG.md
+++ b/packages/core/theme/CHANGELOG.md
@ -1,5 +1,29 @@
 # @nextui-org/theme

+## 0.0.0-dev-v2-20230429213333
+
+### Patch Changes
+
+- Tailwind variants upgraded, dropdown section moved to the local aria package
+
+## 0.0.0-dev-v2-20230429144144
+
+### Patch Changes
+
+- Theme custom prefix supported, theme variants simplified
+
+## 0.0.0-dev-v2-20230429142755
+
+### Patch Changes
+
+- Support custom function themes
+
+## 0.0.0-dev-v2-20230429140802
+
+### Patch Changes
+
+- Custom themes support
+
 ## 0.0.0-dev-v2-20230428210058

 ### Patch Changes
--- a/packages/core/theme/package.json
+++ b/packages/core/theme/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/theme",
-  "version": "0.0.0-dev-v2-20230428210058",
+  "version": "0.0.0-dev-v2-20230429213333",
  "description": "The default theme for NextUI components",
  "keywords": [
    "theme",
@ -46,6 +46,7 @@
    "postpack": "clean-package restore"
  },
  "dependencies": {
+    "@types/lodash.omit": "^4.5.7",
    "color": "^4.2.3",
    "color2k": "^2.0.2",
    "deepmerge": "4.3.0",
@ -53,7 +54,8 @@
    "lodash.foreach": "^4.5.0",
    "lodash.get": "^4.4.2",
    "lodash.isempty": "^4.4.0",
-    "tailwind-variants": "^0.1.3",
+    "lodash.omit": "^4.5.0",
+    "tailwind-variants": "^0.1.5",
    "tailwindcss": "^3.2.7"
  },
  "peerDependencies": {
--- a/packages/core/theme/src/components/input.ts
+++ b/packages/core/theme/src/components/input.ts
@ -26,7 +26,7 @@ const input = tv({
    label: "block text-sm font-medium text-neutral-600",
    inputWrapper: "relative w-full inline-flex flex-row items-center shadow-sm px-3 gap-3",
    innerWrapper: "inline-flex h-full items-center w-full gap-1.5 box-border",
-    input: "w-full h-full bg-transparent outline-none placeholder:text-neutral-500",
+    input: "w-full h-full !bg-transparent outline-none placeholder:text-neutral-500",
    clearButton: [
      "z-10",
      "hidden",
--- a/Show More
+++ b/Show More