feat(root): layout configuration added to the tailwind plugin, components were adapted

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

@@ -31,7 +31,7 @@ interface DocPageProps {
 
 const cache = new Map();
 
-export function getDocFromParams(params: {slug: string[]}) {
+function getDocFromParams(params: {slug: string[]}) {
   let meta, doc;
 
   const {slug} = getAppSlug(params);

apps/docs/components/cmdk.tsx

@@ -9,7 +9,7 @@ import {CloseIcon} from "@nextui-org/shared-icons";
 import {tv} from "tailwind-variants";
 import {useRouter} from "next/navigation";
 import MultiRef from "react-multi-ref";
-import {cn} from "@nextui-org/theme";
+import {clsx} from "@nextui-org/shared-utils";
 import scrollIntoView from "scroll-into-view-if-needed";
 import {isAppleDevice} from "@react-aria/utils";
 import {create} from "zustand";
@@ -269,11 +269,12 @@ export const Cmdk: FC<{}> = () => {
       return (
         <Button
           isIconOnly
-          className={cn(
+          className={clsx(
             "border data-[hover=true]:bg-content2 border-default-400 dark:border-default-100",
             className,
           )}
-          size="xs"
+          radius="full"
+          size="sm"
           variant="bordered"
           onPress={onPress}
         >
@@ -339,6 +340,8 @@ export const Cmdk: FC<{}> = () => {
         wrapper: "md:items-start",
         base: [
           "mt-[20vh]",
+          "border-small",
+          "dark:border-default-100",
           "supports-[backdrop-filter]:bg-background/80",
           "dark:supports-[backdrop-filter]:bg-background/30",
           "supports-[backdrop-filter]:backdrop-blur-md",

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

@@ -45,7 +45,7 @@ export const DemoCodeModal: FC<DemoCodeModalProps> = ({isOpen, code, title, subt
           setIsCodeVisible(isOpen);
         },
       }}
-      radius={isMobile ? "none" : "2xl"}
+      radius={isMobile ? "none" : "lg"}
       size={isMobile ? "full" : "2xl"}
       onClose={onClose}
     >

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

@@ -23,8 +23,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
     <Card
       isBlurred
       className={clsx("border-none bg-background/60 dark:bg-default-100/50", className)}
-      radius="2xl"
+      shadow="sm"
-      shadow="2xl"
       {...otherProps}
     >
       <CardBody>

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

@@ -5,7 +5,7 @@ const blockquoteStyles = tv({
   base: "border pl-4 bg-default-50 my-6 py-3 rounded-xl [&>p]:m-0",
   variants: {
     color: {
-      default: "border-default-100 bg-default-50/20",
+      default: "border-default-200 dark:border-default-100 bg-default-200/20",
       primary: "border-primary-100 bg-primary-50/20",
       secondary: "border-secondary-100 bg-secondary-50/20",
       success: "border-success-100 bg-success-50/20",

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

@@ -34,6 +34,7 @@ interface CodeDemoProps extends UseCodeDemoProps, WindowResizerProps {
   showTabs?: boolean;
   showPreview?: boolean;
   showOpenInCodeSandbox?: boolean;
+  isPreviewCentered?: boolean;
   displayMode?: "always" | "visible";
   isGradientBox?: boolean;
   gradientColor?: GradientBoxProps["color"];
@@ -49,6 +50,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
   showPreview = true,
   asIframe = false,
   showSandpackPreview = false,
+  isPreviewCentered = false,
   showOpenInCodeSandbox,
   isGradientBox = false,
   defaultExpanded = false,
@@ -106,6 +108,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
       <DynamicReactLiveDemo
         code={code}
         gradientColor={gradientColor}
+        isCentered={isPreviewCentered}
         isGradientBox={isGradientBox}
         noInline={noInline}
         overflow={overflow}

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

@@ -1,5 +1,6 @@
 import React from "react";
 import {LivePreview, LiveProvider, LiveError} from "react-live";
+import {clsx} from "@nextui-org/shared-utils";
 import * as Components from "@nextui-org/react";
 
 import {BgGridContainer} from "@/components/bg-grid-container";
@@ -8,6 +9,7 @@ import {GradientBox, GradientBoxProps} from "@/components/gradient-box";
 export interface ReactLiveDemoProps {
   code: string;
   noInline?: boolean;
+  isCentered?: boolean;
   isGradientBox?: boolean;
   gradientColor?: GradientBoxProps["color"];
   overflow?: "auto" | "visible" | "hidden";
@@ -21,11 +23,16 @@ export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
   code,
   isGradientBox,
   gradientColor = "orange",
+  isCentered = false,
   noInline,
 }) => {
   const content = (
     <>
-      <LivePreview className="live-preview flex h-full w-full not-prose" />
+      <LivePreview
+        className={clsx("live-preview flex h-full w-full not-prose", {
+          "justify-center items-center": isCentered,
+        })}
+      />
       <LiveError />
     </>
   );

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

@@ -1,4 +1,4 @@
-import {Button, Link} from "@nextui-org/react";
+import {Button, ButtonProps, Link} from "@nextui-org/react";
 
 import {GithubIcon, NpmIcon, AdobeIcon, StorybookIcon} from "@/components/icons";
 import {COMPONENT_PATH, COMPONENT_THEME_PATH} from "@/libs/github/constants";
@@ -10,6 +10,27 @@ export interface ComponentLinksProps {
   reactAriaHook?: string;
 }
 
+const ButtonLink = ({
+  children,
+  href,
+  startContent,
+  ...props
+}: ButtonProps & {
+  href: string;
+}) => (
+  <Button
+    isExternal
+    as={Link}
+    className="!text-small py-4 bg-default-100 dark:bg-default-50 text-default-700"
+    href={href}
+    size="sm"
+    startContent={startContent}
+    {...props}
+  >
+    {children}
+  </Button>
+);
+
 export const ComponentLinks = ({
   component,
   storybook,
@@ -22,63 +43,35 @@ export const ComponentLinks = ({
 
   return (
     <div className="flex flex-wrap gap-3 mt-6">
-      <Button
+      <ButtonLink
-        isExternal
-        as={Link}
-        className="bg-default-100 dark:bg-default-50 text-default-700"
         href={`https://storiesv2.nextui.org/?path=/story/components-${storybook || component}`}
-        radius="md"
-        size="sm"
         startContent={<StorybookIcon className="text-lg text-[#ff4785]" />}
       >
         Storybook
-      </Button>
+      </ButtonLink>
-      <Button
+      <ButtonLink
-        isExternal
-        as={Link}
-        className="bg-default-100 dark:bg-default-50 text-default-700"
         href={`https://www.npmjs.com/package/@nextui-org/${component}`}
-        radius="md"
-        size="sm"
         startContent={<NpmIcon className="text-2xl text-[#E53E3E]" />}
       >
         {`@nextui-org/${component}`}
-      </Button>
+      </ButtonLink>
       {reactAriaHook && (
-        <Button
+        <ButtonLink
-          isExternal
-          as={Link}
-          className="bg-default-100 dark:bg-default-50 text-default-700"
           href={`https://react-spectrum.adobe.com/react-aria/${reactAriaHook}.html`}
-          radius="md"
-          size="sm"
           startContent={<AdobeIcon className="text-lg text-[#E1251B]" />}
         >
           React Aria
-        </Button>
+        </ButtonLink>
       )}
-      <Button
+      <ButtonLink href={`${COMPONENT_PATH}/${component}`} startContent={<GithubIcon size={20} />}>
-        isExternal
-        as={Link}
-        className="bg-default-100 dark:bg-default-50 text-default-700"
-        href={`${COMPONENT_PATH}/${component}`}
-        radius="md"
-        size="sm"
-        startContent={<GithubIcon />}
-      >
         Source
-      </Button>
+      </ButtonLink>
-      <Button
+      <ButtonLink
-        isExternal
-        as={Link}
-        className="bg-default-100 dark:bg-default-50 text-default-700"
         href={`${COMPONENT_THEME_PATH}/${styles || component}.ts`}
-        radius="md"
+        startContent={<GithubIcon size={20} />}
-        size="sm"
-        startContent={<GithubIcon />}
       >
         Styles source
-      </Button>
+      </ButtonLink>
     </div>
   );
 };

apps/docs/components/docs/sidebar.tsx

@@ -14,7 +14,6 @@ import {
   SpacerProps,
   Spacer,
   Link as NextUILink,
-  cn,
   Chip,
   dataFocusVisibleClasses,
 } from "@nextui-org/react";
@@ -151,12 +150,12 @@ function TreeItem<T>(props: TreeItemProps<T>) {
               {rendered}
             </span>
             {isNew && (
-              <Chip className="ml-2" color="primary" size="xs" variant="flat">
+              <Chip className="ml-2" color="primary" size="sm" variant="flat">
                 New
               </Chip>
             )}
             {item.props?.comingSoon && (
-              <Chip className="ml-2" color="default" size="xs" variant="flat">
+              <Chip className="ml-2" color="default" size="sm" variant="flat">
                 Coming soon
               </Chip>
             )}
@@ -246,7 +245,7 @@ export const DocsSidebar: FC<DocsSidebarProps> = ({routes, slug, tag, className}
   }, [] as string[]);
 
   return (
-    <div className={cn("lg:fixed lg:top-20 mt-2 z-0 lg:h-[calc(100vh-121px)]", className)}>
+    <div className={clsx("lg:fixed lg:top-20 mt-2 z-0 lg:h-[calc(100vh-121px)]", className)}>
       <Tree defaultExpandedKeys={expandedKeys} items={routes || []}>
         {(route) => (
           <Item

apps/docs/components/docs/toc.tsx

@@ -73,6 +73,7 @@ export const DocsToc: FC<DocsTocProps> = ({headings}) => {
                   "font-normal",
                   "flex items-center text-sm font-normal text-default-500 dark:text-default-300",
                   "data-[active=true]:text-foreground",
+                  "dark:data-[active=true]:text-foreground",
                   "before:content-['']",
                   "before:opacity-0",
                   "data-[active=true]:before:opacity-100",

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

@@ -117,7 +117,7 @@ const CustomThemesExample = ({
           />
         )}
       </Tabs>
-      <Card className={slots.wrapper()} radius="2xl">
+      <Card className={slots.wrapper()} radius="lg">
         <CardBody className="relative flex-col md:flex-row md:items-center gap-4 md:gap-9 overflow-visible">
           <div className={slots.imageWrapper()}>
             <Image
@@ -164,7 +164,6 @@ const CustomThemesExample = ({
               <Button
                 className={slots.buyButton()}
                 color="primary"
-                radius="xl"
                 variant={selectedTheme === "nextui" ? "shadow" : "solid"}
               >
                 Buy now
@@ -172,7 +171,7 @@ const CustomThemesExample = ({
               <Button
                 className={slots.addToBagButton()}
                 color="primary"
-                radius="xl"
+                radius="full"
                 variant="bordered"
               >
                 Add to bag

apps/docs/components/marketing/hero/floating-components.tsx

@@ -44,7 +44,7 @@ export const FloatingComponents: React.FC<{}> = () => {
           }}
           endContent={<MoonFilledIcon />}
           isSelected={isSelected}
-          size="xl"
+          size="lg"
           startContent={<SunFilledIcon />}
           onChange={onChange}
         />
@@ -55,7 +55,6 @@ export const FloatingComponents: React.FC<{}> = () => {
           defaultValue="NextUI"
           label="Input"
           labelPlacement="outside"
-          radius="xl"
           variant="bordered"
           onClear={() => {}}
         />
@@ -63,7 +62,6 @@ export const FloatingComponents: React.FC<{}> = () => {
         <Card
           isFooterBlurred
           className="absolute -top-[260px] right-[100px] h-[120px] animate-[levitate_12s_ease_infinite_1s] z-0 max-w-fit"
-          radius="2xl"
         >
           <Image
             alt="Professional camera"
@@ -73,7 +71,7 @@ export const FloatingComponents: React.FC<{}> = () => {
             src="/images/card-example-6.webp"
             width={120}
           />
-          <CardFooter className="before:bg-black/10 before:border before:border-white/20 overflow-hidden justify-between py-2 absolute before:rounded-xl rounded-xl bottom-1 w-[calc(100%_-_8px)] shadow-lg ml-1 z-10">
+          <CardFooter className="before:bg-black/10 border-white/20 border-1 overflow-hidden justify-between py-2 absolute before:rounded-xl rounded-xl bottom-1 w-[calc(100%_-_8px)] shadow-lg ml-1 z-10">
             <p className="text-xs font-semibold text-white/80">Camera</p>
             <p className="text-xs font-semibold text-white/80">$525</p>
           </CardFooter>
@@ -83,7 +81,10 @@ export const FloatingComponents: React.FC<{}> = () => {
 
         <UserTwitterCard className="absolute left-[80px] -top-[80px] animate-[levitate_16s_ease_infinite] border-none" />
 
-        <Card className="absolute right-[110px] -top-[60px] animate-[levitate_18s_ease_infinite] shadow-lg z-10 max-w-fit border-none">
+        <Card
+          className="absolute right-[110px] -top-[60px] animate-[levitate_18s_ease_infinite] z-10 max-w-fit border-none"
+          shadow="lg"
+        >
           <CardBody>
             <NextUILogo small size={60} />
           </CardBody>
@@ -122,16 +123,18 @@ export const FloatingComponents: React.FC<{}> = () => {
           </Tooltip>
         )}
 
-        <Card className="absolute right-[10px] top-[30px] animate-[levitate_16s_ease_infinite] shadow-lg z-10 max-w-fit border-none">
+        <Card
+          className="absolute right-[10px] top-[30px] animate-[levitate_16s_ease_infinite] z-10 max-w-fit border-none"
+          shadow="lg"
+        >
           <CardBody>
-            <Spinner color="secondary" size="xl" />
+            <Spinner color="secondary" size="lg" />
           </CardBody>
         </Card>
 
         <Card
           isFooterBlurred
           className="absolute right-[60px] top-[100px] animate-[levitate_12s_ease_infinite_1s] z-0 max-w-fit"
-          radius="2xl"
         >
           <Image
             alt="Woman listing to music"
@@ -141,9 +144,9 @@ export const FloatingComponents: React.FC<{}> = () => {
             src="/images/hero-card.webp"
             width={200}
           />
-          <CardFooter className="before:bg-white/10 overflow-hidden justify-between py-2 absolute before:rounded-xl rounded-xl bottom-1 w-[calc(100%_-_8px)] shadow-lg ml-1 z-10">
+          <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden justify-between py-2 absolute before:rounded-xl rounded-xl bottom-1 w-[calc(100%_-_8px)] shadow-lg ml-1 z-10">
             <p className="text-xs text-white/80">Available soon.</p>
-            <Button color="secondary" radius="full" size="xs">
+            <Button className="text-tiny" color="secondary" radius="full" size="sm">
               Notify me
             </Button>
           </CardFooter>

apps/docs/components/marketing/hero/floating-tabs.tsx

@@ -12,7 +12,7 @@ export const FloatingTabs: React.FC<{}> = () => {
         tabList: "max-w-[200px] shadow-sm",
       }}
       radius="full"
-      size="xs"
+      size="sm"
     >
       <Tab key="notes" title="Notes" />
       <Tab key="tasks" title="Tasks" />

apps/docs/components/marketing/support.tsx

@@ -58,10 +58,10 @@ const getSponsorSize = (sponsor: Sponsor, isMobile: boolean) => {
       size = isMobile ? "sm" : "md";
       break;
     case SPONSOR_TIERS.GOLD:
-      size = isMobile ? "lg" : "xl";
+      size = isMobile ? "md" : "lg";
       break;
     case SPONSOR_TIERS.PLATINUM:
-      size = isMobile ? "lg" : "xl";
+      size = isMobile ? "md" : "lg";
       break;
     default:
       size = isMobile ? "sm" : "md";
@@ -174,7 +174,7 @@ export const Support: FC<SupportProps> = ({sponsors = []}) => {
                   color="secondary"
                   content={"Become a sponsor"}
                   offset={10}
-                  radius="xl"
+                  radius="full"
                 >
                   <Button
                     isIconOnly

apps/docs/components/navbar.tsx

@@ -136,10 +136,10 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
                   <motion.div animate={{opacity: 1}} exit={{opacity: 0}} initial={{opacity: 0}}>
                     <DropdownTrigger>
                       <Button
-                        className="hidden min-w-fit max-w-[64px] sm:flex gap-0.5 bg-default-400/20 dark:bg-default-500/20"
+                        className="hidden text-xs h-6 py-1 min-w-fit sm:flex gap-0.5 bg-default-400/20 dark:bg-default-500/20"
-                        endContent={<ChevronDownIcon className="text-xs" />}
+                        endContent={<ChevronDownIcon className="text-tiny" />}
                         radius="full"
-                        size="xs"
+                        size="sm"
                         variant="flat"
                       >
                         v2.0.0

apps/docs/components/sandpack/bugreport-button.tsx

@@ -24,7 +24,7 @@ export const BugReportButton = () => {
         isIconOnly
         as={Link}
         href={`${ISSUE_REPORT_URL}${componentTitle}`}
-        size="xs"
+        size="sm"
         title="Report a bug"
         variant="light"
       >

apps/docs/components/sandpack/codesandbox-button.tsx

@@ -13,7 +13,7 @@ export const CodeSandboxButton = () => {
       placement="top"
       radius="md"
     >
-      <Button isIconOnly as="span" size="xs" title="Open in CodeSandbox" variant="light">
+      <Button isIconOnly as="span" size="sm" title="Open in CodeSandbox" variant="light">
         <UnstyledOpenInCodeSandboxButton
           style={{
             width: "100%",

apps/docs/components/sandpack/copy-button.tsx

@@ -23,7 +23,7 @@ export const CopyButton = () => {
       content={copied ? "Copied!" : "Copy"}
       radius="md"
     >
-      <Button isIconOnly size="xs" title="Copy Code" variant="light" onClick={copyHandler}>
+      <Button isIconOnly size="sm" title="Copy Code" variant="light" onClick={copyHandler}>
         <CopyLinearIcon className="text-zinc-500" height={16} width={16} />
       </Button>
     </Tooltip>

apps/docs/components/sandpack/language-selector.tsx

@@ -29,7 +29,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({template, onC
       }}
       radius="lg"
       selectedKey={template}
-      size="xs"
+      size="sm"
       onSelectionChange={handleToggle}
     >
       <Tab

apps/docs/components/sandpack/sandpack.tsx

@@ -37,18 +37,12 @@ export const Sandpack: FC<SandpackProps> = ({
 }) => {
   const editorContainerRef = useRef(null);
 
-  const {
+  const {files, decorators, customSetup, sandpackTemplate, hasTypescript, setCurrentTemplate} =
-    files,
+    useSandpack({
-    decorators,
+      files: filesProp,
-    customSetup,
+      template,
-    sandpackTemplate,
+      highlightedLines,
-    hasTypescript,
+    });
-    setCurrentTemplate,
-  } = useSandpack({
-    files: filesProp,
-    template,
-    highlightedLines,
-  });
 
   return (
     <SandpackProvider

apps/docs/content/components/accordion/custom-styles.ts

@@ -191,10 +191,10 @@ import {InvalidCardIcon} from "./InvalidCardIcon";
 export default function App() {
   const itemClasses = {
     base: "py-0 w-full",
-    title: "font-normal text-base",
+    title: "font-normal text-medium",
     trigger: "px-2 py-0 data-[hover=true]:bg-default-100 rounded-lg h-14 flex items-center",
-    indicator: "text-base",
+    indicator: "text-medium",
-    content: "text-sm px-2",
+    content: "text-small px-2",
   };
 
   const defaultContent =
@@ -203,7 +203,7 @@ export default function App() {
 
   return (
     <Accordion
-      hideDivider
+      showDivider={false}
       className="p-2 flex flex-col gap-1 w-full max-w-[300px]"
       variant="shadow"
       itemClasses={itemClasses}
@@ -249,7 +249,7 @@ export default function App() {
         title={
           <p className="flex gap-1 items-center">
             Card expired
-            <p className="text-default-400 text-sm">*4812</p>
+            <p className="text-default-400 text-small">*4812</p>
           </p>
         }
       >

apps/docs/content/components/accordion/start-content.ts

@@ -13,7 +13,7 @@ export default function App() {
           <Avatar
             isBordered
             color="primary"
-            radius="xl"
+            radius="lg"
             src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
           />
         }
@@ -29,7 +29,7 @@ export default function App() {
           <Avatar
             isBordered
             color="success"
-            radius="xl"
+            radius="lg"
             src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
           />
         }
@@ -45,7 +45,7 @@ export default function App() {
           <Avatar
             isBordered
             color="warning"
-            radius="xl"
+            radius="lg"
             src="https://i.pravatar.cc/150?u=a04258114e29026702d"
           />
         }

apps/docs/content/components/avatar/group-custom-count.ts

@@ -7,7 +7,7 @@ export default function App() {
       max={3}
       total={10}
       renderCount={(count) => (
-        <p className="text-sm text-foreground font-medium ml-2">+{count} others</p>
+        <p className="text-small text-foreground font-medium ml-2">+{count} others</p>
       )}
     >
       <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />

apps/docs/content/components/avatar/radius.ts

@@ -4,12 +4,9 @@ export default function App() {
   return (
     <div className="flex gap-4 items-center">
       <Avatar isBordered radius="full" src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
-      <Avatar isBordered radius="2xl" src="https://i.pravatar.cc/150?u=a0423b7422f0e6002d" />
-      <Avatar isBordered radius="xl" src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
       <Avatar isBordered radius="lg" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
       <Avatar isBordered radius="md" src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
       <Avatar isBordered radius="sm" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
-      <Avatar isBordered radius="none" src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
     </div>
   );
 }`;

apps/docs/content/components/avatar/sizes.ts

@@ -3,12 +3,10 @@ const App = `import {Avatar} from "@nextui-org/react";
 export default function App() {
   return (
     <div className="flex gap-4 items-center">
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" size="xs" />
       <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" size="sm" />
       <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" size="md" />
       <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" size="lg" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" size="xl" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" className="w-20 h-20 text-large" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" className="w-20 h-20 text-lg" />
     </div>
   );
 }`;

apps/docs/content/components/badge/a11y.ts

@@ -25,9 +25,9 @@ export default function App() {
   return (
     <Badge content="99+" shape="circle" color="danger">
       <Button
+        radius="full"
         isIconOnly
         aria-label="more than 99 notifications"
-        radius="full"
         variant="light"
       >
         <NotificationIcon size={24} />

apps/docs/content/components/badge/colors.ts

@@ -5,37 +5,37 @@ export default function App() {
     <div className="flex gap-3 items-center">
       <Badge content="5" color="default">
         <Avatar
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
         />
       </Badge>
       <Badge content="5" color="primary">
         <Avatar
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
         />
       </Badge>
       <Badge content="5" color="secondary">
         <Avatar
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
         />
       </Badge>
       <Badge content="5" color="success">
         <Avatar
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/150?u=a04258114e29026302d"
         />
       </Badge>
       <Badge content="5" color="warning">
         <Avatar
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/150?u=a04258114e29026708c"
         />
       </Badge>
       <Badge content="5" color="danger">
         <Avatar
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
         />
       </Badge>

apps/docs/content/components/badge/content-examples.ts

@@ -53,7 +53,7 @@ export default function App() {
     <div className="flex gap-5 items-center">
       <Badge content="5" color="danger">
         <Avatar
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
         />
       </Badge>
@@ -66,7 +66,7 @@ export default function App() {
       <Badge content="new" color="danger" size="sm">
         <Avatar
           isBordered
-          radius="lg"
+          radius="md"
           color="danger"
           src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
         />
@@ -80,7 +80,7 @@ export default function App() {
         <Avatar
           isBordered
           color="success"
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/300?u=a042581f4e290267072"
         />
       </Badge>

apps/docs/content/components/badge/disable-outline.ts

@@ -6,7 +6,7 @@ export default function App() {
       <Badge content="5" color="danger" shape="rectangle" disableOutline>
         <Avatar
           isBordered
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
         />
       </Badge>

apps/docs/content/components/badge/index.ts

@@ -2,7 +2,6 @@ import usage from "./usage";
 import sizes from "./sizes";
 import colors from "./colors";
 import variants from "./variants";
-import radius from "./radius";
 import placements from "./placements";
 import shapes from "./shapes";
 import visibility from "./visibility";
@@ -15,7 +14,6 @@ export const badgeContent = {
   sizes,
   colors,
   variants,
-  radius,
   placements,
   shapes,
   visibility,

apps/docs/content/components/badge/placements.ts

@@ -6,28 +6,28 @@ export default function App() {
       <Badge content="5" color="danger" placement="top-right">
         <Avatar
           isBordered
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
         />
       </Badge>
       <Badge content="5" color="danger" placement="bottom-right">
         <Avatar
           isBordered
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
         />
       </Badge>
       <Badge content="5" color="danger" placement="top-left">
         <Avatar
           isBordered
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/150?u=a04258114e29026708c"
         />
       </Badge>
       <Badge content="5" color="danger" placement="bottom-left">
         <Avatar
           isBordered
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/150?u=a04258114e29026302d"
         />
       </Badge>

apps/docs/content/components/badge/radius.ts

@@ -1,58 +0,0 @@
-const App = `import {Badge, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-3 items-center">
-      <Badge content="5" radius="full" color="secondary">
-        <Avatar
-          radius="lg"
-          src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
-        />
-      </Badge>
-      <Badge content="5" radius="xl" color="secondary">
-        <Avatar
-          radius="lg"
-          src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
-        />
-      </Badge>
-      <Badge content="5" radius="lg" color="secondary">
-        <Avatar
-          radius="lg"
-          src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
-        />
-      </Badge>
-      <Badge content="5" radius="md" color="secondary">
-        <Avatar
-          radius="lg"
-          src="https://i.pravatar.cc/150?u=a04258114e29026302d"
-        />
-      </Badge>
-      <Badge content="5" radius="sm" color="secondary">
-        <Avatar
-          radius="lg"
-          src="https://i.pravatar.cc/150?u=a04258114a29026708c"
-        />
-      </Badge>
-      <Badge content="5" radius="base" color="secondary">
-        <Avatar
-          radius="lg"
-          src="https://i.pravatar.cc/150?u=bfe358194b29026708c"
-        />
-      </Badge>
-      <Badge content="5" radius="none" color="secondary">
-        <Avatar
-          radius="lg"
-          src="https://i.pravatar.cc/150?u=a04258114c29026708c"
-        />
-      </Badge>
-    </div>
-  );
-}`;
-
-const react = {
-  "/App.jsx": App,
-};
-
-export default {
-  ...react,
-};

apps/docs/content/components/badge/shapes.ts

@@ -6,7 +6,7 @@ export default function App() {
       <Badge content="5" color="danger" shape="rectangle">
         <Avatar
           isBordered
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
         />
       </Badge>

apps/docs/content/components/badge/sizes.ts

@@ -3,36 +3,24 @@ const App = `import {Badge, Avatar} from "@nextui-org/react";
 export default function App() {
   return (
     <div className="flex gap-3 items-center">
-      <Badge content="5" size="xs" color="primary">
-        <Avatar
-          radius="lg"
-          src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
-        />
-      </Badge>
       <Badge content="5" size="sm" color="primary">
         <Avatar
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
         />
       </Badge>
       <Badge content="5" size="md" color="primary">
         <Avatar
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
         />
       </Badge>
       <Badge content="5" size="lg" color="primary">
         <Avatar
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/150?u=a04258114e29026302d"
         />
       </Badge>
-      <Badge content="5" size="xl" color="primary">
-        <Avatar
-          radius="lg"
-          src="https://i.pravatar.cc/150?u=a04258114e29026708c"
-        />
-      </Badge>
     </div>
   );
 }`;

apps/docs/content/components/badge/usage.ts

@@ -4,7 +4,8 @@ export default function App() {
   return (
     <Badge content="5" color="primary">
       <Avatar
-        radius="lg"
+        radius="md"
+        size="lg"
         src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
       />
     </Badge>

apps/docs/content/components/badge/variants.ts

@@ -5,25 +5,25 @@ export default function App() {
     <div className="flex gap-3 items-center">
       <Badge content="5" color="warning" variant="solid">
         <Avatar
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
         />
       </Badge>
       <Badge content="5" color="warning" variant="flat">
         <Avatar
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
         />
       </Badge>
       <Badge content="5" color="warning" variant="faded">
         <Avatar
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/150?u=a04258114e29026708c"
         />
       </Badge>
       <Badge content="5" color="warning" variant="shadow">
         <Avatar
-          radius="lg"
+          radius="md"
           src="https://i.pravatar.cc/150?u=a04258114e29026302d"
         />
       </Badge>

apps/docs/content/components/button/index.ts

@@ -1,9 +1,9 @@
 import usage from "./usage";
 import sizes from "./sizes";
-import radius from "./radius";
 import disabled from "./disabled";
 import colors from "./colors";
 import variants from "./variants";
+import radius from "./radius";
 import loading from "./loading";
 import loadingCustom from "./loading-custom";
 import icons from "./icons";

apps/docs/content/components/button/radius.ts

@@ -4,25 +4,19 @@ export default function App() {
   return (
     <div className="flex gap-4 items-center">
       <Button radius="full">
-        Button
+        Full
       </Button>
-      <Button radius="2xl">
-        Button
-      </Button>  
-      <Button radius="xl">
-        Button
-      </Button>  
       <Button radius="lg">
-        Button
+        Large
       </Button>  
       <Button radius="md">
-        Button
+        Medium
       </Button>  
       <Button radius="sm">
-        Button
+        Small
       </Button>  
       <Button radius="none">
-        Button
+        None
       </Button>  
     </div>
   );

apps/docs/content/components/button/sizes.ts

@@ -3,20 +3,14 @@ const App = `import {Button} from "@nextui-org/react";
 export default function App() {
   return (
     <div className="flex gap-4 items-center">
-      <Button size="xs" radius="md">
+      <Button size="sm">
-        Button
+        Small
-      </Button>
-      <Button size="sm" radius="md">
-        Button
       </Button>  
       <Button size="md">
-        Button
+        Medium
       </Button>  
       <Button size="lg">
-        Button
+        Large
-      </Button>  
-      <Button size="xl" radius="xl">
-        Button
       </Button>  
     </div>
   );

apps/docs/content/components/card/blurred-footer.ts

@@ -14,9 +14,9 @@ export default function App() {
         src="/images/hero-card.jpeg"
         width={200}
       />
-      <CardFooter className="before:bg-white/10 overflow-hidden justify-between py-2 absolute before:rounded-xl rounded-xl bottom-1 w-[calc(100%_-_8px)] shadow-lg ml-1 z-10">
+      <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden justify-between py-2 absolute before:rounded-xl rounded-xl bottom-1 w-[calc(100%_-_8px)] shadow-lg ml-1 z-10">
-        <p className="text-xs text-white/80">Available soon.</p>
+        <p className="text-tiny text-white/80">Available soon.</p>
-        <Button color="secondary" radius="full" size="xs">
+        <Button className="text-tiny" color="secondary" radius="full" size="sm">
           Notify me
         </Button>
       </CardFooter>

apps/docs/content/components/card/blurred.ts

@@ -155,8 +155,7 @@ export default function App() {
     <Card
       isBlurred
       className="border-none bg-background/60 dark:bg-default-100/50 max-w-[610px]"
-      radius="2xl"
+      shadow="sm"
-      shadow="lg"
     >
       <CardBody>
         <div className="grid grid-cols-6 md:grid-cols-12 gap-6 md:gap-4 items-center justify-center">
@@ -175,8 +174,8 @@ export default function App() {
             <div className="flex justify-between items-start">
               <div className="flex flex-col gap-0">
                 <h3 className="font-semibold text-foreground/90">Daily Mix</h3>
-                <p className="text-sm text-foreground/80">12 Tracks</p>
+                <p className="text-small text-foreground/80">12 Tracks</p>
-                <h1 className="text-lg font-medium mt-2">Frontend Radio</h1>
+                <h1 className="text-large font-medium mt-2">Frontend Radio</h1>
               </div>
               <Button
                 isIconOnly
@@ -204,8 +203,8 @@ export default function App() {
                 value={33}
               />
               <div className="flex justify-between">
-                <p className="text-sm">1:23</p>
+                <p className="text-small">1:23</p>
-                <p className="text-sm text-foreground/50">4:32</p>
+                <p className="text-small text-foreground/50">4:32</p>
               </div>
             </div>
 

apps/docs/content/components/card/composition.ts

@@ -9,22 +9,22 @@ export default function App() {
         <div className="flex gap-5">
           <Avatar isBordered radius="full" size="md" src="/avatars/avatar-1.png" />
           <div className="flex flex-col gap-1 items-start justify-center">
-            <h4 className="text-sm font-semibold leading-none text-default-600">Zoey Lang</h4>
+            <h4 className="text-small font-semibold leading-none text-default-600">Zoey Lang</h4>
-            <h5 className="text-sm tracking-tight text-default-400">@zoeylang</h5>
+            <h5 className="text-small tracking-tight text-default-400">@zoeylang</h5>
           </div>
         </div>
         <Button
           className={isFollowed ? "bg-transparent text-foreground border-default-200" : ""}
           color="primary"
           radius="full"
-          size="sm"
+          size="md"
           variant={isFollowed ? "bordered" : "solid"}
           onPress={() => setIsFollowed(!isFollowed)}
         >
           {isFollowed ? "Unfollow" : "Follow"}
         </Button>
       </CardHeader>
-      <CardBody className="px-3 py-0 text-sm text-default-400">
+      <CardBody className="px-3 py-0 text-small text-default-400">
         <p>
           Frontend developer and UI/UX enthusiast. Join me on this coding adventure!
         </p>
@@ -37,12 +37,12 @@ export default function App() {
       </CardBody>
       <CardFooter className="gap-3">
         <div className="flex gap-1">
-          <p className="font-semibold text-default-400 text-sm">4</p>
+          <p className="font-semibold text-default-400 text-small">4</p>
-          <p className=" text-default-400 text-sm">Following</p>
+          <p className=" text-default-400 text-small">Following</p>
         </div>
         <div className="flex gap-1">
-          <p className="font-semibold text-default-400 text-sm">97.1K</p>
+          <p className="font-semibold text-default-400 text-small">97.1K</p>
-          <p className="text-default-400 text-sm">Followers</p>
+          <p className="text-default-400 text-small">Followers</p>
         </div>
       </CardFooter>
     </Card>

apps/docs/content/components/card/cover-image.ts

@@ -5,8 +5,8 @@ export default function App() {
     <div className="max-w-[900px] gap-2 grid grid-cols-12 grid-rows-2 px-8">
     <Card className="col-span-12 sm:col-span-4 h-[300px]">
       <CardHeader className="absolute z-10 top-1 flex-col !items-start">
-        <p className="text-xs text-white/60 uppercase font-bold">What to watch</p>
+        <p className="text-tiny text-white/60 uppercase font-bold">What to watch</p>
-        <h4 className="text-white font-medium text-lg">Stream the Acme event</h4>
+        <h4 className="text-white font-medium text-large">Stream the Acme event</h4>
       </CardHeader>
       <Image
         removeWrapper
@@ -17,8 +17,8 @@ export default function App() {
     </Card>
     <Card className="col-span-12 sm:col-span-4 h-[300px]">
       <CardHeader className="absolute z-10 top-1 flex-col !items-start">
-        <p className="text-xs text-white/60 uppercase font-bold">Plant a tree</p>
+        <p className="text-tiny text-white/60 uppercase font-bold">Plant a tree</p>
-        <h4 className="text-white font-medium text-lg">Contribute to the planet</h4>
+        <h4 className="text-white font-medium text-large">Contribute to the planet</h4>
       </CardHeader>
       <Image
         removeWrapper
@@ -29,8 +29,8 @@ export default function App() {
     </Card>
     <Card className="col-span-12 sm:col-span-4 h-[300px]">
       <CardHeader className="absolute z-10 top-1 flex-col !items-start">
-        <p className="text-xs text-white/60 uppercase font-bold">Supercharged</p>
+        <p className="text-tiny text-white/60 uppercase font-bold">Supercharged</p>
-        <h4 className="text-white font-medium text-lg">Creates beauty like a beast</h4>
+        <h4 className="text-white font-medium text-large">Creates beauty like a beast</h4>
       </CardHeader>
       <Image
         removeWrapper
@@ -41,7 +41,7 @@ export default function App() {
     </Card>
     <Card isFooterBlurred className="w-full h-[300px] col-span-12 sm:col-span-5">
       <CardHeader className="absolute z-10 top-1 flex-col items-start">
-        <p className="text-xs text-white/60 uppercase font-bold">New</p>
+        <p className="text-tiny text-white/60 uppercase font-bold">New</p>
         <h4 className="text-black font-medium text-2xl">Acme camera</h4>
       </CardHeader>
       <Image
@@ -50,19 +50,19 @@ export default function App() {
         className="z-0 w-full h-full scale-125 -translate-y-6 object-cover"
         src="/images/card-example-6.jpeg"
       />
-      <CardFooter className="absolute bg-white/30 bottom-0 border-t border-zinc-100/50 z-10 justify-between">
+      <CardFooter className="absolute bg-white/30 bottom-0 border-t-1 border-zinc-100/50 z-10 justify-between">
         <div>
-          <p className="text-black text-xs">Available soon.</p>
+          <p className="text-black text-tiny">Available soon.</p>
-          <p className="text-black text-xs">Get notified.</p>
+          <p className="text-black text-tiny">Get notified.</p>
         </div>
-        <Button color="primary" radius="full" size="sm">
+        <Button className="text-tiny" color="primary" radius="full" size="sm">
           Notify Me
         </Button>
       </CardFooter>
     </Card>
     <Card isFooterBlurred className="w-full h-[300px] col-span-12 sm:col-span-7">
       <CardHeader className="absolute z-10 top-1 flex-col items-start">
-        <p className="text-xs text-white/60 uppercase font-bold">Your day your way</p>
+        <p className="text-tiny text-white/60 uppercase font-bold">Your day your way</p>
         <h4 className="text-white/90 font-medium text-xl">Your checklist for better sleep</h4>
       </CardHeader>
       <Image
@@ -71,7 +71,7 @@ export default function App() {
         className="z-0 w-full h-full object-cover"
         src="/images/card-example-5.jpeg"
       />
-      <CardFooter className="absolute bg-black/40 bottom-0 z-10 border-t border-default-600 dark:border-default-100">
+      <CardFooter className="absolute bg-black/40 bottom-0 z-10 border-t-1 border-default-600 dark:border-default-100">
         <div className="flex flex-grow gap-2 items-center">
           <img
             alt="Breathing app icon"
@@ -79,8 +79,8 @@ export default function App() {
             src="/images/breathing-app-icon.jpeg"
           />
           <div className="flex flex-col">
-            <p className="text-xs text-white/60">Breathing App</p>
+            <p className="text-tiny text-white/60">Breathing App</p>
-            <p className="text-xs text-white/60">Get a good night's sleep.</p>
+            <p className="text-tiny text-white/60">Get a good night's sleep.</p>
           </div>
         </div>
         <Button radius="full" size="sm">Get App</Button>

apps/docs/content/components/card/divider.ts

@@ -13,7 +13,7 @@ export default function App() {
         />
         <div className="flex flex-col">
           <p className="text-md">NextUI</p>
-          <p className="text-sm text-default-500">nextui.org</p>
+          <p className="text-small text-default-500">nextui.org</p>
         </div>
       </CardHeader>
       <Divider/>

apps/docs/content/components/card/image.ts

@@ -4,9 +4,9 @@ export default function App() {
   return (
     <Card className="py-4">
       <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
-        <p className="text-xs uppercase font-bold">Daily Mix</p>
+        <p className="text-tiny uppercase font-bold">Daily Mix</p>
         <small className="text-default-500">12 Tracks</small>
-        <h4 className="font-bold text-lg">Frontend Radio</h4>
+        <h4 className="font-bold text-large">Frontend Radio</h4>
       </CardHeader>
       <CardBody className="overflow-visible py-2">
         <Image

apps/docs/content/components/card/primary-action.ts

@@ -47,18 +47,18 @@ export default function App() {
   return (
     <div className="gap-2 grid grid-cols-2 sm:grid-cols-4">
       {list.map((item, index) => (
-        <Card key={index} isPressable onPress={() => console.log("item pressed")}>
+        <Card shadow="sm" key={index} isPressable onPress={() => console.log("item pressed")}>
           <CardBody className="overflow-visible p-0">
             <Image
               shadow="lg"
-              radius="xl"
+              radius="lg"
               width="100%"
               alt={item.title}
               className="w-full object-cover h-[140px]"
               src={item.img}
             />
           </CardBody>
-          <CardFooter className="text-sm justify-between">
+          <CardFooter className="text-small justify-between">
             <b>{item.title}</b>
             <p className="text-default-500">{item.price}</p>
           </CardFooter>

apps/docs/content/components/checkbox-group/controlled.ts

@@ -15,7 +15,7 @@ export default function App() {
         <Checkbox value="sydney">Sydney</Checkbox>
         <Checkbox value="san-francisco">San Francisco</Checkbox>
       </CheckboxGroup>
-      <p className="text-default-500 text-sm">Selected: {selected.join(", ")}</p>
+      <p className="text-default-500 text-small">Selected: {selected.join(", ")}</p>
     </div>
   );
 }`;

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

@@ -17,17 +17,17 @@ export const CustomCheckbox = ({ user, statusColor, value }) => {
     >
       <div className="w-full flex justify-between gap-2">
         <User
-          avatarProps={{ size: "sm", src: user.avatar }}
+          avatarProps={{ size: "md", src: user.avatar }}
           description={
-            <Link isExternal href={user.url} size="xs">
+            <Link isExternal href={user.url} size="sm">
               @{user.username}
             </Link>
           }
           name={user.name}
         />
         <div className="flex flex-col items-end gap-1">
-          <span className="text-xs text-default-500">{user.role}</span>
+          <span className="text-tiny text-default-500">{user.role}</span>
-          <Chip color={statusColor} size="xs" variant="flat">
+          <Chip color={statusColor} size="sm" variant="flat">
             {user.status}
           </Chip>
         </div>

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

@@ -29,17 +29,17 @@ export default function App() {
     >
       <div className="w-full flex justify-between gap-2">
         <User
-          avatarProps={{size: "sm", src: user.avatar}}
+          avatarProps={{size: "md", src: user.avatar}}
           description={
-            <Link isExternal href={user.url} size="xs">
+            <Link isExternal href={user.url} size="sm">
               @{user.username}
             </Link>
           }
           name={user.name}
         />
         <div className="flex flex-col items-end gap-1">
-          <span className="text-xs text-default-500">{user.role}</span>
+          <span className="text-tiny text-default-500">{user.role}</span>
-          <Chip color="secondary" size="xs" variant="flat">
+          <Chip color="success" size="sm" variant="flat">
             {user.status}
           </Chip>
         </div>

apps/docs/content/components/checkbox/radius.ts

@@ -3,11 +3,11 @@ const App = `import {Checkbox} from "@nextui-org/react";
 export default function App() {
   return (
     <div className="flex gap-4">
-      <Checkbox defaultSelected radius="full">Option</Checkbox>
+      <Checkbox defaultSelected radius="full">Full</Checkbox>
-      <Checkbox defaultSelected radius="lg">Option</Checkbox>
+      <Checkbox defaultSelected radius="lg">Large</Checkbox>
-      <Checkbox defaultSelected radius="md">Option</Checkbox>
+      <Checkbox defaultSelected radius="md">Medium</Checkbox>
-      <Checkbox defaultSelected radius="sm">Option</Checkbox>
+      <Checkbox defaultSelected radius="sm">Small</Checkbox>
-      <Checkbox defaultSelected radius="none">Option</Checkbox>
+      <Checkbox defaultSelected radius="none">None</Checkbox>
     </div>  
   );
 }`;

apps/docs/content/components/checkbox/sizes.ts

@@ -3,11 +3,9 @@ const App = `import {Checkbox} from "@nextui-org/react";
 export default function App() {
   return (
     <div className="flex gap-4">
-      <Checkbox defaultSelected size="xs">Option</Checkbox>
+      <Checkbox defaultSelected size="sm">Small</Checkbox>
-      <Checkbox defaultSelected size="sm">Option</Checkbox>
+      <Checkbox defaultSelected size="md">Medium</Checkbox>
-      <Checkbox defaultSelected size="md">Option</Checkbox>
+      <Checkbox defaultSelected size="lg">Large</Checkbox>
-      <Checkbox defaultSelected size="lg">Option</Checkbox>
-      <Checkbox defaultSelected size="xl">Option</Checkbox>
     </div>  
   );
 }`;

apps/docs/content/components/chip/avatar.ts

@@ -17,7 +17,7 @@ export default function App() {
       <Chip
         variant="flat"
         avatar={
-          <Avatar name="JW" size="xs" getInitials={(name) => name.charAt(0)} />
+          <Avatar name="JW" size="sm" getInitials={(name) => name.charAt(0)} />
         }
       >
         Avatar

apps/docs/content/components/chip/custom-styles.ts

@@ -5,7 +5,7 @@ export default function App() {
     <Chip
       variant="shadow"
       classNames={{
-        base: "bg-gradient-to-br from-indigo-500 to-pink-500 border border-white/50 shadow-pink-500/30",
+        base: "bg-gradient-to-br from-indigo-500 to-pink-500 border-small border-white/50 shadow-pink-500/30",
         content: "drop-shadow shadow-black text-white",
       }}
     >

apps/docs/content/components/chip/radius.ts

@@ -3,11 +3,10 @@ const App = `import {Chip} from "@nextui-org/react";
 export default function App() {
   return (
     <div className="flex gap-4">
-      <Chip radius="full">Chip</Chip>
+      <Chip radius="full">Full</Chip>
-      <Chip radius="lg">Chip</Chip>
+      <Chip radius="lg">Large</Chip>
-      <Chip radius="md">Chip</Chip>
+      <Chip radius="md">Medium</Chip>
-      <Chip radius="sm">Chip</Chip>
+      <Chip radius="sm">Small</Chip>
-      <Chip radius="none">Chip</Chip>
     </div>  
   );
 }`;

apps/docs/content/components/chip/sizes.ts

@@ -3,11 +3,9 @@ const App = `import {Chip} from "@nextui-org/react";
 export default function App() {
   return (
     <div className="flex gap-4">
-      <Chip size="xs">Chip</Chip>
+      <Chip size="sm">Small</Chip>
-      <Chip size="sm">Chip</Chip>
+      <Chip size="md">Medium</Chip>
-      <Chip size="md">Chip</Chip>
+      <Chip size="lg">Large</Chip>
-      <Chip size="lg">Chip</Chip>
-      <Chip size="xl">Chip</Chip>
     </div>  
   );
 }`;

apps/docs/content/components/circular-progress/custom-styles.ts

@@ -20,7 +20,7 @@ export default function App() {
         <Chip
           classNames={{
             base: "border-1 border-white/30",
-            content: "text-white/90 text-sm font-semibold",
+            content: "text-white/90 text-small font-semibold",
           }}
           variant="bordered"
         >

apps/docs/content/components/circular-progress/sizes.ts

@@ -3,11 +3,9 @@ const App = `import {CircularProgress} from "@nextui-org/react";
 export default function App() {
   return (
     <div className="flex gap-4">
-      <CircularProgress size="xs" aria-label="Loading..."/>
       <CircularProgress size="sm" aria-label="Loading..."/>
       <CircularProgress size="md" aria-label="Loading..."/>
       <CircularProgress size="lg" aria-label="Loading..."/>
-      <CircularProgress size="xl" aria-label="Loading..."/>
     </div> 
   );
 }`;

apps/docs/content/components/circular-progress/value-formatting.ts

@@ -4,7 +4,7 @@ export default function App() {
   return (
     <CircularProgress
       label="Speed"
-      size="xl"
+      size="lg"
       value={70}
       color="success"
       formatOptions={{ style: "unit", unit: "kilometer" }}

apps/docs/content/components/code/sizes.ts

@@ -3,11 +3,9 @@ const App = `import {Code} from "@nextui-org/react";
 export default function App() {
   return (
     <div className="flex gap-4">
-      <Code size="xs">npm install @nextui-org/react</Code>
       <Code size="sm">npm install @nextui-org/react</Code>
       <Code size="md">npm install @nextui-org/react</Code>
       <Code size="lg">npm install @nextui-org/react</Code>
-      <Code size="xl">npm install @nextui-org/react</Code>
     </div>  
   );
 }`;

apps/docs/content/components/divider/usage.ts

@@ -4,11 +4,11 @@ export default function App() {
   return (
     <div className="max-w-md">
       <div className="space-y-1">
-        <h4 className="text-base font-medium">NextUI Components</h4>
+        <h4 className="text-medium font-medium">NextUI Components</h4>
-        <p className="text-sm text-default-400">Beautiful, fast and modern React UI library.</p>
+        <p className="text-small text-default-400">Beautiful, fast and modern React UI library.</p>
       </div>
       <Divider className="my-4" />
-      <div className="flex h-5 items-center space-x-4 text-sm">
+      <div className="flex h-5 items-center space-x-4 text-small">
         <div>Blog</div>
         <Divider orientation="vertical" />
         <div>Docs</div>

apps/docs/content/components/dropdown/custom-items-styles.ts

@@ -28,9 +28,9 @@ export default function App() {
   return (
     <Dropdown
       showArrow
-      radius="lg"
+      radius="sm"
       classNames={{
-        base: "p-0 border border-divider bg-background",
+        base: "p-0 border-small border-divider bg-background",
         arrow: "bg-default-200",
       }}
     >
@@ -80,7 +80,7 @@ export default function App() {
           <DropdownItem key="settings">Settings</DropdownItem>
           <DropdownItem
             key="new_project"
-            endContent={<PlusIcon className="text-lg" />}
+            endContent={<PlusIcon className="text-large" />}
           >
             New Project
           </DropdownItem>
@@ -96,7 +96,7 @@ export default function App() {
             className="cursor-default"
             endContent={
               <select
-                className="z-10 outline-none w-16 py-0.5 rounded-md text-xs group-data-[hover=true]:border-default-500 border border-boundary bg-transparent text-default-500"
+                className="z-10 outline-none w-16 py-0.5 rounded-md text-tiny group-data-[hover=true]:border-default-500 border-small border-default-300 dark:border-default-200 bg-transparent text-default-500"
                 id="theme"
                 name="theme"
               >

apps/docs/content/components/dropdown/multiple-selection.ts

@@ -21,6 +21,7 @@ export default function App() {
       <DropdownMenu 
         aria-label="Single selection actions"
         variant="flat"
+        closeOnSelect={false}
         disallowEmptySelection
         selectionMode="multiple"
         selectedKeys={selectedKeys}

apps/docs/content/components/index.ts

@@ -29,3 +29,4 @@ export * from "./modal";
 export * from "./pagination";
 export * from "./dropdown";
 export * from "./navbar";
+export * from "./table";

apps/docs/content/components/input/colors.ts

@@ -11,7 +11,7 @@ export default function App() {
   ];
 
   return (
-    <div className="w-full flex flex-row gap-4">
+    <div className="w-full flex flex-row flex-wrap gap-4">
       {colors.map((color) => (
         <Input
           key={color}
@@ -20,7 +20,7 @@ export default function App() {
           label="Email"
           placeholder="Enter your email"
           defaultValue="junior@nextui.org"
-          className="min-w-[220px]"
+          className="max-w-[220px]"
         />
       ))}
     </div>

apps/docs/content/components/input/controlled.ts

@@ -11,7 +11,7 @@ export default function App() {
         value={value}
         onValueChange={setValue}
       />
-      <p className="text-default-500 text-sm">Input value: {value}</p>
+      <p className="text-default-500 text-small">Input value: {value}</p>
     </div>
   );
 }`;

apps/docs/content/components/input/custom-styles.ts

@@ -35,7 +35,7 @@ export default function App() {
       <Input
         label="Search"
         isClearable
-        radius="xl"
+        radius="lg"
         classNames={{
           label: "text-black/50 dark:text-white/90",
           input: [

apps/docs/content/components/input/radius.ts

@@ -3,16 +3,14 @@ const App = `import {Input} from "@nextui-org/react";
 export default function App() {
   const radius = [
     "full",
-    "xl",
     "lg",
     "md",
     "sm",
-    "base",
     "none",
   ];
 
   return (
-    <div className="w-full flex flex-row gap-4">
+    <div className="w-full flex flex-row flex-wrap gap-4">
       {radius.map((r) => (
         <Input
           key={r}
@@ -21,7 +19,7 @@ export default function App() {
           label="Email"
           placeholder="Enter your email"
           defaultValue="junior@nextui.org"
-          className="min-w-[220px]"
+          className="max-w-[220px]"
         />
       ))}
     </div>

apps/docs/content/components/input/sizes.ts

@@ -2,7 +2,7 @@ const App = `import {Input} from "@nextui-org/react";
 
 export default function App() {
 
-  const sizes = ["xs", "sm", "md", "lg", "xl"];
+  const sizes = ["sm", "md", "lg"];
 
   return (
     <div className="w-full flex flex-col gap-4">

apps/docs/content/components/input/start-end-content.ts

@@ -39,7 +39,7 @@ export default function App() {
           labelPlacement="outside"
           startContent={
             <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-sm">$</span>
+              <span className="text-default-400 text-small">$</span>
             </div>
           }
         />
@@ -50,7 +50,7 @@ export default function App() {
           labelPlacement="outside"
           startContent={
             <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-sm">https://</span>
+              <span className="text-default-400 text-small">https://</span>
             </div>
           }
         />
@@ -72,7 +72,7 @@ export default function App() {
           labelPlacement="outside"
           endContent={
             <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-sm">$</span>
+              <span className="text-default-400 text-small">$</span>
             </div>
           }
         />
@@ -83,7 +83,7 @@ export default function App() {
           labelPlacement="outside"
           endContent={
             <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-sm">.org/</span>
+              <span className="text-default-400 text-small">.org/</span>
             </div>
           }
         />
@@ -98,7 +98,7 @@ export default function App() {
           }
           endContent={
             <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-sm">@gmail.com</span>
+              <span className="text-default-400 text-small">@gmail.com</span>
             </div>
           }
         />
@@ -108,7 +108,7 @@ export default function App() {
           labelPlacement="outside"
           startContent={
             <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-sm">$</span>
+              <span className="text-default-400 text-small">$</span>
             </div>
           }
           endContent={
@@ -117,7 +117,7 @@ export default function App() {
                 Currency
               </label>
               <select
-                className="outline-none border-0 bg-transparent text-default-400 text-sm"
+                className="outline-none border-0 bg-transparent text-default-400 text-small"
                 id="currency"
                 name="currency"
               >
@@ -136,12 +136,12 @@ export default function App() {
           labelPlacement="outside"
           startContent={
             <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-sm">https://</span>
+              <span className="text-default-400 text-small">https://</span>
             </div>
           }
           endContent={
             <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-sm">.org</span>
+              <span className="text-default-400 text-small">.org</span>
             </div>
           }
         />

apps/docs/content/components/link/sizes.ts

@@ -3,11 +3,9 @@ const App = `import {Link} from "@nextui-org/react";
 export default function App() {
   return (
     <div className="flex gap-4">
-      <Link href="#" size="xs">Link</Link>
+      <Link href="#" size="sm">Small</Link>
-      <Link href="#" size="sm">Link</Link>
+      <Link href="#" size="md">Medium</Link>
-      <Link href="#" size="md">Link</Link>
+      <Link href="#" size="lg">Large</Link>
-      <Link href="#" size="lg">Link</Link>
-      <Link href="#" size="xl">Link</Link>
     </div>  
   );
 }`;

apps/docs/content/components/modal/form.ts

@@ -76,7 +76,7 @@ export default function App() {
                 <div className="flex py-2 px-1 justify-between">
                   <Checkbox
                     classNames={{
-                      label: "text-sm",
+                      label: "text-small",
                     }}
                   >
                     Remember me

apps/docs/content/components/pagination/custom-styles.ts

@@ -5,8 +5,8 @@ export default function App() {
     <Pagination
       total={10}
       classNames={{
-        base: "gap-0 overflow-visible h-8 rounded border border-divider",
+        wrapper: "gap-0 overflow-visible h-8 rounded border border-divider",
-        item: "w-8 h-8 text-sm rounded-none bg-transparent",
+        item: "w-8 h-8 text-small rounded-none bg-transparent",
         cursor:
           "bg-gradient-to-b shadow-lg from-default-500 to-default-800 dark:from-default-300 dark:to-default-100 text-white font-bold",
       }}

apps/docs/content/components/pagination/sizes.ts

@@ -2,7 +2,7 @@ const App = `import {Pagination} from "@nextui-org/react";
 
 export default function App() {
 
-  const sizes = ["xs", "sm", "md", "lg", "xl"]
+  const sizes = ["sm", "md", "lg"]
 
   return (
     <div className="flex flex-wrap gap-4 items-center">

apps/docs/content/components/popover/arrow.ts

@@ -8,8 +8,8 @@ export default function App() {
       </PopoverTrigger>
       <PopoverContent>
         <div className="px-1 py-2">
-          <div className="text-sm font-bold">Popover Content</div>
+          <div className="text-small font-bold">Popover Content</div>
-          <div className="text-xs">This is the popover content</div>
+          <div className="text-tiny">This is the popover content</div>
         </div>
       </PopoverContent>
     </Popover>

apps/docs/content/components/popover/backdrop.ts

@@ -8,7 +8,7 @@ export default function App() {
     <PopoverContent className="w-[240px]">
       {(titleProps) => (
         <div className="px-1 py-2 w-full">
-          <p className="text-sm font-bold text-foreground" {...titleProps}>
+          <p className="text-small font-bold text-foreground" {...titleProps}>
             Dimensions
           </p>
           <div className="mt-2 flex flex-col gap-2 w-full">
@@ -33,7 +33,7 @@ export default function App() {
           backdrop={backdrop}
         >
           <PopoverTrigger>
-            <Button color="warning" className="capitalize">
+            <Button color="warning" variant="flat" className="capitalize">
               {backdrop}
             </Button>
           </PopoverTrigger>

apps/docs/content/components/popover/colors.ts

@@ -4,8 +4,8 @@ export default function App() {
   const content = (
     <PopoverContent>
       <div className="px-1 py-2">
-        <div className="text-sm font-bold">Popover Content</div>
+        <div className="text-small font-bold">Popover Content</div>
-        <div className="text-xs">This is the popover content</div>
+        <div className="text-tiny">This is the popover content</div>
       </div>
     </PopoverContent>
   );

apps/docs/content/components/popover/controlled.ts

@@ -11,12 +11,12 @@ export default function App() {
         </PopoverTrigger>
         <PopoverContent>
           <div className="px-1 py-2">
-            <div className="text-sm font-bold">Popover Content</div>
+            <div className="text-small font-bold">Popover Content</div>
-            <div className="text-xs">This is the popover content</div>
+            <div className="text-tiny">This is the popover content</div>
           </div>
         </PopoverContent>
       </Popover>
-      <p className="text-sm text-default-400">Open: {isOpen ? "true" : "false"}</p>
+      <p className="text-small text-default-400">Open: {isOpen ? "true" : "false"}</p>
     </div>
   );
 }`;

apps/docs/content/components/popover/custom-motion.ts

@@ -36,8 +36,8 @@ export default function App() {
       </PopoverTrigger>
       <PopoverContent>
         <div className="px-1 py-2">
-          <div className="text-sm font-bold">Popover Content</div>
+          <div className="text-small font-bold">Popover Content</div>
-          <div className="text-xs">This is the popover content</div>
+          <div className="text-tiny">This is the popover content</div>
         </div>
       </PopoverContent>
     </Popover>

apps/docs/content/components/popover/custom-styles.ts

@@ -17,10 +17,10 @@ export default function App() {
       <PopoverContent>
         {(titleProps) => (
           <div className="px-1 py-2">
-            <h3 className="text-sm font-bold" {...titleProps}>
+            <h3 className="text-small font-bold" {...titleProps}>
               Popover Content
             </h3>
-            <div className="text-xs">This is the popover content</div>
+            <div className="text-tiny">This is the popover content</div>
           </div>
         )}
       </PopoverContent>

apps/docs/content/components/popover/custom-trigger.ts

@@ -4,13 +4,13 @@ export const UserTwitterCard = () => {
   const [isFollowed, setIsFollowed] = React.useState(false);
 
   return (
-    <Card className="max-w-[300px] border-none bg-transparent">
+    <Card shadow="none" className="max-w-[300px] border-none bg-transparent">
       <CardHeader className="justify-between">
         <div className="flex gap-3">
           <Avatar isBordered radius="full" size="md" src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
           <div className="flex flex-col items-start justify-center">
-            <h4 className="text-sm font-semibold leading-none text-default-600">Zoey Lang</h4>
+            <h4 className="text-small font-semibold leading-none text-default-600">Zoey Lang</h4>
-            <h5 className="text-sm tracking-tight text-default-400">@zoeylang</h5>
+            <h5 className="text-small tracking-tight text-default-500">@zoeylang</h5>
           </div>
         </div>
         <Button
@@ -25,7 +25,7 @@ export const UserTwitterCard = () => {
         </Button>
       </CardHeader>
       <CardBody className="px-3 py-0">
-        <p className="text-sm pl-px text-default-400">
+        <p className="text-small pl-px text-default-500">
           Full-stack developer, @getnextui lover she/her
           <span aria-label="confetti" role="img">
             🎉
@@ -34,12 +34,12 @@ export const UserTwitterCard = () => {
       </CardBody>
       <CardFooter className="gap-3">
         <div className="flex gap-1">
-          <p className="font-semibold text-default-400 text-sm">4</p>
+          <p className="font-semibold text-default-600 text-small">4</p>
-          <p className=" text-default-400 text-sm">Following</p>
+          <p className=" text-default-500 text-small">Following</p>
         </div>
         <div className="flex gap-1">
-          <p className="font-semibold text-default-400 text-sm">97.1K</p>
+          <p className="font-semibold text-default-600 text-small">97.1K</p>
-          <p className="text-default-400 text-sm">Followers</p>
+          <p className="text-default-500 text-small">Followers</p>
         </div>
       </CardFooter>
     </Card>
@@ -64,7 +64,7 @@ export default function App() {
         />
       </PopoverTrigger>
       <PopoverContent className="p-1">
-        <UserTwitterCard/>
+        <UserTwitterCard />
       </PopoverContent>
     </Popover>
   );

apps/docs/content/components/popover/offset.ts

@@ -8,8 +8,8 @@ export default function App() {
       </PopoverTrigger>
       <PopoverContent>
         <div className="px-1 py-2">
-          <div className="text-sm font-bold">Popover Content</div>
+          <div className="text-small font-bold">Popover Content</div>
-          <div className="text-xs">This is the popover content</div>
+          <div className="text-tiny">This is the popover content</div>
         </div>
       </PopoverContent>
     </Popover>

apps/docs/content/components/popover/placements.ts

@@ -4,8 +4,8 @@ export default function App() {
   const content = (
     <PopoverContent>
       <div className="px-1 py-2">
-        <div className="text-sm font-bold">Popover Content</div>
+        <div className="text-small font-bold">Popover Content</div>
-        <div className="text-xs">This is the popover content</div>
+        <div className="text-tiny">This is the popover content</div>
       </div>
     </PopoverContent>
   );

apps/docs/content/components/popover/title-props.ts

@@ -9,10 +9,10 @@ export default function App() {
       <PopoverContent>
         {(titleProps) => (
           <div className="px-1 py-2">
-            <h3 className="text-sm font-bold" {...titleProps}>
+            <h3 className="text-small font-bold" {...titleProps}>
               Popover Content
             </h3>
-            <div className="text-xs">This is the popover content</div>
+            <div className="text-tiny">This is the popover content</div>
           </div>
         )}
       </PopoverContent>

apps/docs/content/components/popover/usage.ts

@@ -8,8 +8,8 @@ export default function App() {
       </PopoverTrigger>
       <PopoverContent>
         <div className="px-1 py-2">
-          <div className="text-sm font-bold">Popover Content</div>
+          <div className="text-small font-bold">Popover Content</div>
-          <div className="text-xs">This is the popover content</div>
+          <div className="text-tiny">This is the popover content</div>
         </div>
       </PopoverContent>
     </Popover>

apps/docs/content/components/popover/variants.ts

@@ -4,8 +4,8 @@ export default function App() {
   const content = (
     <PopoverContent>
       <div className="px-1 py-2">
-        <div className="text-sm font-bold">Popover Content</div>
+        <div className="text-small font-bold">Popover Content</div>
-        <div className="text-xs">This is the popover content</div>
+        <div className="text-tiny">This is the popover content</div>
       </div>
     </PopoverContent>
   );

apps/docs/content/components/popover/with-form.ts

@@ -9,7 +9,7 @@ export default function App() {
       <PopoverContent className="w-[240px]">
         {(titleProps) => (
           <div className="px-1 py-2 w-full">
-            <p className="text-sm font-bold text-foreground" {...titleProps}>
+            <p className="text-small font-bold text-foreground" {...titleProps}>
               Dimensions
             </p>
             <div className="mt-2 flex flex-col gap-2 w-full">

apps/docs/content/components/progress/indeterminate.ts

@@ -3,7 +3,7 @@ const App = `import { Progress } from "@nextui-org/react";
 export default function App() {
   return (
     <Progress
-      size="xs"
+      size="sm"
       isIndeterminate
       aria-label="Loading..."
       className="max-w-md"

apps/docs/content/components/progress/sizes.ts

@@ -3,11 +3,9 @@ const App = `import {Progress} from "@nextui-org/react";
 export default function App() {
   return (
     <div className="flex flex-col gap-6 w-full max-w-md">
-      <Progress size="xs" aria-label="Loading..." value={30} />
+      <Progress size="sm" aria-label="Loading..." value={30} />
-      <Progress size="sm" aria-label="Loading..." value={40} />
+      <Progress size="md" aria-label="Loading..." value={40} />
-      <Progress size="md" aria-label="Loading..." value={50} />
+      <Progress size="lg" aria-label="Loading..." value={50} />
-      <Progress size="lg" aria-label="Loading..." value={60} />
-      <Progress size="xl" aria-label="Loading..." value={70} />
     </div> 
   );
 }`;

apps/docs/content/components/radio-group/controlled.ts

@@ -16,7 +16,7 @@ export default function App() {
         <Radio value="london">London</Radio>
         <Radio value="tokyo">Tokyo</Radio>
       </RadioGroup>
-      <p className="text-default-500 text-sm">Selected: {selected}</p>
+      <p className="text-default-500 text-small">Selected: {selected}</p>
     </div>
   );
 }`;

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

@@ -32,7 +32,7 @@ export const CustomRadio = (props) => {
       <div {...getLabelWrapperProps()}>
         {children && <span {...getLabelProps()}>{children}</span>}
         {description && (
-          <span className="text-sm text-foreground opacity-70">{description}</span>
+          <span className="text-small text-foreground opacity-70">{description}</span>
         )}
       </div>
     </Component>
@@ -92,7 +92,7 @@ export const CustomRadio = (props: RadioProps) => {
       <div {...getLabelWrapperProps()}>
         {children && <span {...getLabelProps()}>{children}</span>}
         {description && (
-          <span className="text-sm text-foreground opacity-70">{description}</span>
+          <span className="text-small text-foreground opacity-70">{description}</span>
         )}
       </div>
     </Component>

apps/docs/content/components/snippet/colors.ts

@@ -2,7 +2,7 @@ const App = `import {Snippet} from "@nextui-org/react";
 
 export default function App() {
   return (
-    <div className="flex gap-4">
+    <div className="flex flex-wrap gap-4">
       <Snippet color="default">npm install @nextui-org/react</Snippet>
       <Snippet color="primary">npm install @nextui-org/react</Snippet>
       <Snippet color="secondary">npm install @nextui-org/react</Snippet>

apps/docs/content/components/snippet/sizes.ts

@@ -2,12 +2,10 @@ const App = `import {Snippet} from "@nextui-org/react";
 
 export default function App() {
   return (
-    <div className="flex gap-4">
+    <div className="flex flex-wrap gap-4">
-      <Snippet size="xs">npm install @nextui-org/react</Snippet>
       <Snippet size="sm">npm install @nextui-org/react</Snippet>
       <Snippet size="md">npm install @nextui-org/react</Snippet>
       <Snippet size="lg">npm install @nextui-org/react</Snippet>
-      <Snippet size="xl">npm install @nextui-org/react</Snippet>
     </div>  
   );
 }`;

apps/docs/content/components/snippet/variants.ts

@@ -2,7 +2,7 @@ const App = `import {Snippet} from "@nextui-org/react";
 
 export default function App() {
   return (
-    <div className="flex gap-4">
+    <div className="flex flex-wrap gap-4">
       <Snippet variant="bordered">npm install @nextui-org/react</Snippet>
       <Snippet variant="flat" color="warning">npm install @nextui-org/react</Snippet>
       <Snippet variant="solid" color="primary">npm install @nextui-org/react</Snippet>

apps/docs/content/components/spinner/label-colors.ts

@@ -3,10 +3,10 @@ const App = `import {Spinner} from "@nextui-org/react";
 export default function App() {
   return (
     <div className="flex gap-4">
-      <Spinner label="default" color="default" labelColor="foreground"/>
+      <Spinner label="Default" color="default" labelColor="foreground"/>
       <Spinner label="Primary" color="primary" labelColor="primary"/>
       <Spinner label="Secondary" color="secondary" labelColor="secondary"/>
-      <Spinner label="Success" color="secondary" labelColor="success"/>
+      <Spinner label="Success" color="success" labelColor="success"/>
       <Spinner label="Warning" color="warning" labelColor="warning"/>
       <Spinner label="Danger" color="danger" labelColor="danger"/>
     </div> 

apps/docs/content/components/spinner/sizes.ts

@@ -3,11 +3,9 @@ const App = `import {Spinner} from "@nextui-org/react";
 export default function App() {
   return (
     <div className="flex gap-4">
-      <Spinner size="xs" />
       <Spinner size="sm" />
       <Spinner size="md" />
       <Spinner size="lg" />
-      <Spinner size="xl" />
     </div> 
   );
 }`;

apps/docs/content/components/switch/custom-styles.ts

@@ -21,8 +21,8 @@ export default function App() {
       }}
     >
       <div className="flex flex-col gap-1">
-        <p className="text-base">Enable early access</p>
+        <p className="text-medium">Enable early access</p>
-        <p className="text-xs text-default-400">
+        <p className="text-tiny text-default-400">
           Get access to new features before they are released.
         </p>
       </div>

apps/docs/content/components/switch/sizes.ts

@@ -3,11 +3,9 @@ const App = `import {Switch} from "@nextui-org/react";
 export default function App() {
   return (
     <div className="flex gap-4">
-      <Switch defaultSelected size="xs">Option</Switch>
+      <Switch defaultSelected size="sm">Small</Switch>
-      <Switch defaultSelected size="sm">Option</Switch>
+      <Switch defaultSelected size="md">Medium</Switch>
-      <Switch defaultSelected size="md">Option</Switch>
+      <Switch defaultSelected size="lg">Large</Switch>
-      <Switch defaultSelected size="lg">Option</Switch>
-      <Switch defaultSelected size="xl">Option</Switch>
     </div>  
   );
 }`;

apps/docs/content/components/table/index.ts

@@ -0,0 +1,5 @@
+import usage from "./usage";
+
+export const tableContent = {
+  usage,
+};

apps/docs/content/components/table/usage.ts

@@ -0,0 +1,43 @@
+const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Table aria-label="Example static collection table">
+      <TableHeader>
+        <TableColumn>NAME</TableColumn>
+        <TableColumn>ROLE</TableColumn>
+        <TableColumn>STATUS</TableColumn>
+      </TableHeader>
+      <TableBody>
+        <TableRow key="1">
+          <TableCell>Tony Reichert</TableCell>
+          <TableCell>CEO</TableCell>
+          <TableCell>Active</TableCell>
+        </TableRow>
+        <TableRow key="2">
+          <TableCell>Zoey Lang</TableCell>
+          <TableCell>Technical Lead</TableCell>
+          <TableCell>Paused</TableCell>
+        </TableRow>
+        <TableRow key="3">
+          <TableCell>Jane Fisher</TableCell>
+          <TableCell>Senior Developer</TableCell>
+          <TableCell>Active</TableCell>
+        </TableRow>
+        <TableRow key="4">
+          <TableCell>William Howard</TableCell>
+          <TableCell>Community Manager</TableCell>
+          <TableCell>Vacation</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/tabs/form.ts

@@ -9,7 +9,7 @@ export default function App() {
         <CardBody>
           <Tabs
             fullWidth
-            size="sm"
+            size="md"
             aria-label="Tabs form"
             selectedKey={selected}
             onSelectionChange={setSelected}
@@ -23,7 +23,7 @@ export default function App() {
                   placeholder="Enter your password"
                   type="password"
                 />
-                <p className="text-center text-sm">
+                <p className="text-center text-small">
                   Need to create an account?{" "}
                   <Link size="sm" onPress={() => setSelected("sign-up")}>
                     Sign up
@@ -46,7 +46,7 @@ export default function App() {
                   placeholder="Enter your password"
                   type="password"
                 />
-                <p className="text-center text-sm">
+                <p className="text-center text-small">
                   Already have an account?{" "}
                   <Link size="sm" onPress={() => setSelected("login")}>
                     Login