feat(docs): introduction and installation docs in progress

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

@@ -0,0 +1,37 @@
+import {FC} from "react";
+import {tv, VariantProps} from "tailwind-variants";
+
+const blockquote = tv({
+  base: "border pl-4 bg-neutral-50 my-6 py-3 rounded-xl [&>p]:mt-0",
+
+  variants: {
+    color: {
+      neutral: "border-neutral-100 bg-neutral-50",
+      primary: "border-primary-200 bg-primary-50",
+      secondary: "border-secondary-200 bg-secondary-50",
+      success: "border-success-200 bg-success-50",
+      warning: "border-warning-200 bg-warning-50",
+      danger: "border-danger-200 bg-danger-50",
+    },
+  },
+  defaultVariants: {
+    color: "neutral",
+  },
+});
+
+type BlockquoteVariantProps = VariantProps<typeof blockquote>;
+
+export interface BlockquoteProps extends BlockquoteVariantProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export const Blockquote: FC<BlockquoteProps> = ({children, color, className, ...props}) => {
+  const styles = blockquote({color, className});
+
+  return (
+    <blockquote className={styles} {...props}>
+      {children}
+    </blockquote>
+  );
+};

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

@@ -0,0 +1,47 @@
+import React from "react";
+import {clsx} from "@nextui-org/shared-utils";
+import BaseHighlight, {Language, PrismTheme, defaultProps} from "prism-react-renderer";
+
+import defaultTheme from "@/libs/prism-theme";
+
+interface CodeblockProps {
+  codeString: string;
+  language: Language;
+  theme?: PrismTheme;
+  showLines?: boolean;
+}
+
+export function Codeblock({
+  codeString,
+  language,
+  showLines,
+  theme: themeProp,
+  ...props
+}: CodeblockProps) {
+  const theme = themeProp || defaultTheme;
+
+  return (
+    <BaseHighlight {...defaultProps} code={codeString} language={language} theme={theme} {...props}>
+      {({className, style, tokens, getLineProps, getTokenProps}) => (
+        <div data-language={language}>
+          <pre className={className} style={style}>
+            {tokens.map((line, i) => {
+              const lineProps = getLineProps({line, key: i});
+
+              return (
+                <div key={i} {...lineProps} className={clsx(lineProps.className, "px-2")}>
+                  {showLines && (
+                    <span className="select-none text-sm mr-6 opacity-30">{i + 1}</span>
+                  )}
+                  {line.map((token, key) => (
+                    <span key={key} {...getTokenProps({token, key})} />
+                  ))}
+                </div>
+              );
+            })}
+          </pre>
+        </div>
+      )}
+    </BaseHighlight>
+  );
+}

apps/docs/components/docs/components/community.tsx

@@ -0,0 +1,19 @@
+import {FeaturesGrid} from "@/components/marketing";
+import {communityAccounts} from "@/libs/constants";
+
+export const Community = () => {
+  return (
+    <div className="max-w-4xl flex flex-col gap-8">
+      <FeaturesGrid
+        classNames={{
+          base: "lg:grid-cols-3",
+          iconWrapper: "bg-transparent",
+          header: "pt-2",
+          body: "pt-0 pb-2",
+          description: "hidden",
+        }}
+        features={communityAccounts}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,67 @@
+import {Button, Link} from "@nextui-org/react";
+
+import {GithubIcon, NpmIcon, AdobeIcon} from "@/components/icons";
+import {COMPONENT_PATH, COMPONENT_THEME_PATH} from "@/libs/github/constants";
+
+export interface ComponentLinksProps {
+  component: string;
+  reactAria?: string;
+}
+
+export const ComponentLinks = ({component, reactAria}: ComponentLinksProps) => {
+  if (!component) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-3 mt-6">
+      <Button
+        isExternal
+        as={Link}
+        className="text-neutral-700 font-normal"
+        href={`${COMPONENT_PATH}/${component}`}
+        size="sm"
+        startIcon={<GithubIcon />}
+        variant="flat"
+      >
+        Source
+      </Button>
+      <Button
+        isExternal
+        as={Link}
+        className="text-neutral-700 font-normal"
+        href={`${COMPONENT_THEME_PATH}/${component}.ts`}
+        size="sm"
+        startIcon={<GithubIcon />}
+        variant="flat"
+      >
+        Styles source
+      </Button>
+      <Button
+        isExternal
+        as={Link}
+        className="text-neutral-700 font-normal"
+        href={`https://www.npmjs.com/package/@nextui-org/${component}`}
+        size="sm"
+        startIcon={<NpmIcon className="text-2xl text-[#E53E3E]" />}
+        variant="flat"
+      >
+        {`@nextui-org/${component}`}
+      </Button>
+
+      {reactAria && (
+        <Button
+          isExternal
+          as={Link}
+          className="text-neutral-700 font-normal"
+          href={reactAria}
+          size="sm"
+          startIcon={<AdobeIcon />}
+          variant="flat"
+        >
+          React Aria
+        </Button>
+      )}
+    </div>
+  );
+};

apps/docs/components/docs/components/index.ts

@@ -0,0 +1,4 @@
+export * from "./component-links";
+export * from "./package-managers";
+export * from "./blockquote";
+export * from "./community";

apps/docs/components/docs/components/package-managers.tsx

@@ -0,0 +1,72 @@
+import {Tabs, TabItem, Snippet} from "@nextui-org/react";
+
+import {Codeblock} from "./codeblock";
+
+import {YarnIcon, NpmSmallIcon, PnpmIcon} from "@/components/icons";
+
+type PackageManagerName = "npm" | "yarn" | "pnpm";
+
+type PackageManager = {
+  icon: JSX.Element;
+  name: PackageManagerName;
+};
+
+const packageManagers: PackageManager[] = [
+  {
+    name: "npm",
+    icon: <NpmSmallIcon className="text-[#E53E3E]" />,
+  },
+  {
+    name: "yarn",
+    icon: <YarnIcon className="text-[#2C8EBB]" />,
+  },
+  {
+    name: "pnpm",
+    icon: <PnpmIcon className="text-[#F69220]" />,
+  },
+];
+
+export interface PackageManagersProps {
+  commands: Partial<Record<PackageManagerName, string>>;
+}
+
+export const PackageManagers = ({commands}: PackageManagersProps) => {
+  return (
+    <Tabs
+      aria-label="NextUI installation commands"
+      classNames={{
+        base: "mt-4",
+      }}
+      variant="underlined"
+    >
+      {packageManagers.map(({name, icon}) => {
+        if (!commands[name]) return null;
+
+        return (
+          <TabItem
+            key={name}
+            title={
+              <div className="flex items-center space-x-2">
+                {icon}
+                <span>{name}</span>
+              </div>
+            }
+          >
+            <Snippet
+              disableTooltip
+              fullWidth
+              hideSymbol
+              classNames={{
+                base: "bg-code-background text-code-foreground",
+                pre: "font-light text-base",
+                copyButton: "text-lg text-code-foreground/50",
+              }}
+            >
+              <Codeblock codeString={commands[name] as string} language="bash" />
+            </Snippet>
+          </TabItem>
+        );
+      })}
+    </Tabs>
+  );
+};

apps/docs/components/docs/footer-nav.tsx

@@ -14,7 +14,7 @@ export interface FooterNavProps {
 
 export const FooterNav: React.FC<FooterNavProps> = ({tag, prevRoute, nextRoute}) => {
   return (
-    <div className="flex justify-between py-44">
+    <div className="flex w-full justify-between py-20">
       {prevRoute ? (
         <Link
           isBlock

apps/docs/components/docs/sidebar.tsx

@@ -4,9 +4,8 @@ import {CollectionBase, Expandable, MultipleSelection, Node, ItemProps} from "@r
 import {BaseItem} from "@nextui-org/aria-utils";
 import React, {useRef, useMemo} from "react";
 import {useFocusRing} from "@react-aria/focus";
-import {mergeProps} from "@react-aria/utils";
 import {TreeState, useTreeState} from "@react-stately/tree";
-import {useSelectableCollection, useSelectableItem} from "@react-aria/selection";
+import {useSelectableCollection} from "@react-aria/selection";
 import {usePress} from "@react-aria/interactions";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
 import {SpacerProps, Spacer, Link as NextUILink} from "@nextui-org/react";
@@ -61,18 +60,13 @@ function TreeItem<T>(props: TreeItemProps<T>) {
   const isExpanded = state.expandedKeys.has(key);
   const isSelected = state.selectionManager.isSelected(key) || paths.pathname === item.props.slug;
 
-  const ref = useRef<HTMLLIElement>(null);
-
-  const {itemProps} = useSelectableItem({
-    selectionManager: state.selectionManager,
-    key: item.key,
-    ref,
-  });
+  const ref = useRef<any>(null);
 
   const hasChildNodes = !isEmpty([...childNodes]);
 
+  const Component = hasChildNodes ? "ul" : "li";
+
   const {pressProps} = usePress({
-    ...itemProps,
     onPress: () => {
       if (hasChildNodes) {
         state.toggleKey(item.key);
@@ -85,8 +79,8 @@ function TreeItem<T>(props: TreeItemProps<T>) {
   const {focusProps, isFocused, isFocusVisible} = useFocusRing();
 
   return (
-    <li
-      {...mergeProps(focusProps, itemProps)}
+    <Component
+      {...focusProps}
       ref={ref}
       aria-expanded={dataAttr(hasChildNodes ? isExpanded : undefined)}
       aria-selected={dataAttr(isSelected)}
@@ -120,6 +114,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
             as={Link}
             className={clsx(
               "opacity-60",
+              "dark:font-light",
               {
                 "opacity-100": isSelected,
                 "pointer-events-none": item.props?.comingSoon,
@@ -155,7 +150,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
           })}
         </div>
       )}
-    </li>
+    </Component>
   );
 }
 
@@ -214,7 +209,7 @@ export const DocsSidebar: FC<DocsSidebarProps> = ({routes, slug, tag}) => {
   }, [] as string[]);
 
   return (
-    <div className="sticky top-20 h-[calc(100vh-121px)]">
+    <div className="sticky top-20 mt-2 z-0 h-[calc(100vh-121px)]">
       <Tree defaultExpandedKeys={expandedKeys} items={routes || []}>
         {(route) => (
           <Item

apps/docs/components/docs/toc.tsx

@@ -1,5 +1,7 @@
 import {FC} from "react";
 import {clsx} from "@nextui-org/shared-utils";
+import {Divider, Spacer} from "@nextui-org/react";
+import {ChevronCircleTopLinearIcon} from "@nextui-org/shared-icons";
 
 import {Heading} from "@/utils/docs-utils";
 import {useScrollSpy} from "@/hooks/use-scroll-spy";
@@ -8,26 +10,37 @@ export interface DocsTocProps {
   headings: Heading[];
 }
 
+const paddingLeftByLevel: Record<string, string> = {
+  1: "pl-0",
+  2: "pl-4",
+  3: "pl-8",
+  4: "pl-12",
+};
+
 export const DocsToc: FC<DocsTocProps> = ({headings}) => {
   const activeId = useScrollSpy(
     headings.map(({id}) => `[id="${id}"]`),
     {
-      rootMargin: "0% 0% -100% 0%",
+      rootMargin: "0% 0% -80% 0%",
     },
   );
 
   if (headings.length <= 0) return null;
 
+  const activeIndex = headings.findIndex(({id}) => id == activeId);
+  const firstId = headings[0].id;
+
   return (
-    <div className="sticky top-20 h-[calc(100vh-121px)]">
-      <h4>Contents</h4>
-      <ul className="scrollbar-hide flex flex-col gap-2 mt-4 ml-6">
+    <div className="sticky w-full flex flex-col gap-4 text-left top-20 h-[calc(100vh-121px)]">
+      <p className="text-sm">On this page</p>
+      <ul className="scrollbar-hide flex flex-col gap-2">
         {headings.map((heading, i) => (
           <li
             key={i}
             className={clsx(
-              "flex items-center text-sm font-light text-foreground/30",
+              "flex items-center text-sm font-normal text-foreground/30",
               "data-[active=true]:text-foreground/80",
+              "data-[active=true]:font-medium",
               "before:content-['']",
               "before:opacity-0",
               "data-[active=true]:before:opacity-100",
@@ -38,12 +51,27 @@ export const DocsToc: FC<DocsTocProps> = ({headings}) => {
               "before:w-1",
               "before:h-1",
               "before:rounded-full",
+              paddingLeftByLevel[heading.level],
             )}
             data-active={activeId == heading.id}
           >
             <a href={`#${heading.id}`}>{heading.text}</a>
           </li>
         ))}
+        <li
+          className="mt-2 opacity-0 data-[visible=true]:opacity-100 transition-opacity"
+          data-visible={activeIndex >= 2}
+        >
+          <Divider />
+          <Spacer y={2} />
+          <a
+            className="flex gap-2 items-center text-sm text-foreground/30 hover:text-foreground/80 pl-4 transition-opacity"
+            href={`#${firstId}`}
+          >
+            Back to top
+            <ChevronCircleTopLinearIcon />
+          </a>
+        </li>
       </ul>
     </div>
   );

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

@@ -11,3 +11,6 @@ export * from "./note";
 export * from "./copy";
 export * from "./check";
 export * from "./link-circle";
+export * from "./paperclip";
+export * from "./link-squared";
+export * from "./link";

apps/docs/components/icons/linear/link-squared.tsx

@@ -0,0 +1,42 @@
+import {IconSvgProps} from "@/types";
+
+export const LinkSquaredLinearIcon = ({
+  size = 24,
+  width,
+  height,
+  strokeWidth = "1.5",
+  ...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="M8.18009 16.0199C7.42009 15.9499 6.6701 15.5999 6.0901 14.9899C4.7701 13.5999 4.7701 11.3199 6.0901 9.92989L8.2801 7.6299C9.6001 6.2399 11.7701 6.2399 13.1001 7.6299C14.4201 9.0199 14.4201 11.2999 13.1001 12.6899L12.0101 13.8399"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={strokeWidth}
+    />
+    <path
+      d="M15.8202 7.97998C16.5802 8.04998 17.3302 8.39998 17.9102 9.00998C19.2302 10.4 19.2302 12.68 17.9102 14.07L15.7202 16.37C14.4002 17.76 12.2302 17.76 10.9002 16.37C9.58016 14.98 9.58016 12.7 10.9002 11.31L11.9902 10.16"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={strokeWidth}
+    />
+    <path
+      d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={strokeWidth}
+    />
+  </svg>
+);

apps/docs/components/icons/linear/link.tsx

@@ -0,0 +1,35 @@
+import {IconSvgProps} from "@/types";
+
+export const LinkLinearIcon = ({
+  size = 24,
+  width,
+  height,
+  strokeWidth = "1.5",
+  ...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="M13.0601 10.9399C15.3101 13.1899 15.3101 16.8299 13.0601 19.0699C10.8101 21.3099 7.17009 21.3199 4.93009 19.0699C2.69009 16.8199 2.68009 13.1799 4.93009 10.9399"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={strokeWidth}
+    />
+    <path
+      d="M10.59 13.4099C8.24996 11.0699 8.24996 7.26988 10.59 4.91988C12.93 2.56988 16.73 2.57988 19.08 4.91988C21.43 7.25988 21.42 11.0599 19.08 13.4099"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={strokeWidth}
+    />
+  </svg>
+);

apps/docs/components/icons/linear/paperclip.tsx

@@ -0,0 +1,22 @@
+import {IconSvgProps} from "@/types";
+
+export const PaperclipLinearIcon = ({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="M12.3299 12.1499L9.85993 14.6199C8.48993 15.9899 8.48993 18.1999 9.85993 19.5699C11.2299 20.9399 13.4399 20.9399 14.8099 19.5699L18.6999 15.6799C21.4299 12.9499 21.4299 8.50992 18.6999 5.77992C15.9699 3.04992 11.5299 3.04992 8.79993 5.77992L4.55993 10.0199C2.21993 12.3599 2.21993 16.1599 4.55993 18.5099"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+  </svg>
+);

apps/docs/components/icons/social.tsx

@@ -116,6 +116,98 @@ const VercelIcon: React.FC<IconSvgProps> = ({width, height = 44, ...props}) => {
   );
 };
 
+const NpmIcon: React.FC<IconSvgProps> = ({width = "1em", height = "1em", ...props}) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      focusable="false"
+      height={height}
+      stroke="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 576 512"
+      width={width}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M288 288h-32v-64h32v64zm288-128v192H288v32H160v-32H0V160h576zm-416 32H32v128h64v-96h32v96h32V192zm160 0H192v160h64v-32h64V192zm224 0H352v128h64v-96h32v96h32v-96h32v96h32V192z" />
+    </svg>
+  );
+};
+
+const NpmSmallIcon: React.FC<IconSvgProps> = ({width = "1em", height = "1em", ...props}) => {
+  return (
+    <svg
+      fill="currentColor"
+      focusable="false"
+      height={height}
+      stroke="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 16 16"
+      width={width}
+      {...props}
+    >
+      <path d="M0 0v16h16v-16h-16zM13 13h-2v-8h-3v8h-5v-10h10v10z" />
+    </svg>
+  );
+};
+
+// #E1251B
+export const AdobeIcon: React.FC<IconSvgProps> = ({width = "1em", height = "1em", ...props}) => {
+  return (
+    <svg
+      aria-hidden="true"
+      aria-label="Adobe"
+      fill="currentColor"
+      focusable="false"
+      height={height}
+      viewBox="0 0 30 26"
+      width={width}
+      {...props}
+    >
+      <polygon points="19,0 30,0 30,26" />
+      <polygon points="11.1,0 0,0 0,26" />
+      <polygon points="15,9.6 22.1,26 17.5,26 15.4,20.8 10.2,20.8" />
+    </svg>
+  );
+};
+
+const YarnIcon: React.FC<IconSvgProps> = ({width = "1em", height = "1em", ...props}) => {
+  return (
+    <svg
+      fill="currentColor"
+      focusable="false"
+      height={height}
+      stroke="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 496 512"
+      width={width}
+      {...props}
+    >
+      <path d="M393.9 345.2c-39 9.3-48.4 32.1-104 47.4 0 0-2.7 4-10.4 5.8-13.4 3.3-63.9 6-68.5 6.1-12.4.1-19.9-3.2-22-8.2-6.4-15.3 9.2-22 9.2-22-8.1-5-9-9.9-9.8-8.1-2.4 5.8-3.6 20.1-10.1 26.5-8.8 8.9-25.5 5.9-35.3.8-10.8-5.7.8-19.2.8-19.2s-5.8 3.4-10.5-3.6c-6-9.3-17.1-37.3 11.5-62-1.3-10.1-4.6-53.7 40.6-85.6 0 0-20.6-22.8-12.9-43.3 5-13.4 7-13.3 8.6-13.9 5.7-2.2 11.3-4.6 15.4-9.1 20.6-22.2 46.8-18 46.8-18s12.4-37.8 23.9-30.4c3.5 2.3 16.3 30.6 16.3 30.6s13.6-7.9 15.1-5c8.2 16 9.2 46.5 5.6 65.1-6.1 30.6-21.4 47.1-27.6 57.5-1.4 2.4 16.5 10 27.8 41.3 10.4 28.6 1.1 52.7 2.8 55.3.8 1.4 13.7.8 36.4-13.2 12.8-7.9 28.1-16.9 45.4-17 16.7-.5 17.6 19.2 4.9 22.2zM496 256c0 136.9-111.1 248-248 248S0 392.9 0 256 111.1 8 248 8s248 111.1 248 248zm-79.3 75.2c-1.7-13.6-13.2-23-28-22.8-22 .3-40.5 11.7-52.8 19.2-4.8 3-8.9 5.2-12.4 6.8 3.1-44.5-22.5-73.1-28.7-79.4 7.8-11.3 18.4-27.8 23.4-53.2 4.3-21.7 3-55.5-6.9-74.5-1.6-3.1-7.4-11.2-21-7.4-9.7-20-13-22.1-15.6-23.8-1.1-.7-23.6-16.4-41.4 28-12.2.9-31.3 5.3-47.5 22.8-2 2.2-5.9 3.8-10.1 5.4h.1c-8.4 3-12.3 9.9-16.9 22.3-6.5 17.4.2 34.6 6.8 45.7-17.8 15.9-37 39.8-35.7 82.5-34 36-11.8 73-5.6 79.6-1.6 11.1 3.7 19.4 12 23.8 12.6 6.7 30.3 9.6 43.9 2.8 4.9 5.2 13.8 10.1 30 10.1 6.8 0 58-2.9 72.6-6.5 6.8-1.6 11.5-4.5 14.6-7.1 9.8-3.1 36.8-12.3 62.2-28.7 18-11.7 24.2-14.2 37.6-17.4 12.9-3.2 21-15.1 19.4-28.2z" />
+    </svg>
+  );
+};
+
+const PnpmIcon: React.FC<IconSvgProps> = ({width = "1em", height = "1em", ...props}) => {
+  return (
+    <svg
+      fill="currentColor"
+      focusable="false"
+      height={height}
+      role="img"
+      stroke="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 24 24"
+      width={width}
+      {...props}
+    >
+      <title />
+      <path d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" />
+    </svg>
+  );
+};
+
 export {
   TwitterIcon,
   DiscordIcon,
@@ -124,4 +216,8 @@ export {
   PatreonIcon,
   NextJsIcon,
   VercelIcon,
+  NpmIcon,
+  NpmSmallIcon,
+  PnpmIcon,
+  YarnIcon,
 };

apps/docs/components/marketing/community.tsx

@@ -3,37 +3,7 @@ import {Spacer} from "@nextui-org/react";
 import {sectionWrapper, titleWrapper, title, subtitle} from "../primitives";
 
 import {FeaturesGrid} from "@/components/marketing";
-import {DiscordIcon, GithubIcon, TwitterIcon} from "@/components/icons";
-
-export interface CommunityProps {
-  twitter?: string;
-  github?: string;
-  discord?: string;
-}
-
-const communityAccounts = [
-  {
-    title: "Twitter",
-    description: "For announcements, tips and general information.",
-    icon: <TwitterIcon className="text-[#00ACEE]" size={32} />,
-    href: "https://twitter.com/getnextui",
-    isExternal: true,
-  },
-  {
-    title: "Discord",
-    description: "To get involved in the community, ask questions and share tips.",
-    icon: <DiscordIcon className="text-[#7289DA]" size={32} />,
-    href: "https://discord.gg/9b6yyZKmH4",
-    isExternal: true,
-  },
-  {
-    title: "Github",
-    description: "To report bugs, request features and contribute to the project.",
-    icon: <GithubIcon className="text-[#333] dark:text-[#E7E7E7]" size={32} />,
-    href: "https://github.com/nextui-org/nextui",
-    isExternal: true,
-  },
-];
+import {communityAccounts} from "@/libs/constants";
 
 export const Community = () => {
   return (

apps/docs/components/mdx-components.tsx

@@ -11,6 +11,7 @@
 import {clsx} from "@nextui-org/shared-utils";
 import * as Components from "@nextui-org/react";
 
+import * as DocsComponents from "@/components/docs/components";
 import {VirtualAnchor} from "@/components";
 
 const Table: React.FC<{children?: React.ReactNode}> = ({children}) => {
@@ -43,43 +44,57 @@ export interface LinkedHeadingProps {
   className?: string;
 }
 
+const linkedLevels: Record<string, number> = {
+  h1: 0,
+  h2: 1,
+  h3: 2,
+  h4: 3,
+};
+
 const LinkedHeading: React.FC<LinkedHeadingProps> = ({as, linked = true, className, ...props}) => {
   const Component = as;
 
+  const level = linkedLevels[as] || 1;
+
   return (
     <Component
-      className={clsx({"linked-heading": linked}, "font-semibold", className)}
+      className={clsx({"linked-heading": linked}, linked ? {} : className)}
+      data-level={level}
       data-name={props.children}
       {...props}
     >
-      {linked ? (
-        <VirtualAnchor className={className}>{props.children}</VirtualAnchor>
-      ) : (
-        <>{props.children}</>
-      )}
+      {linked ? <VirtualAnchor>{props.children}</VirtualAnchor> : <>{props.children}</>}
     </Component>
   );
 };
 
 const List: React.FC<{children?: React.ReactNode}> = ({children}) => {
-  return <ul className="list-disc">{children}</ul>;
-};
-
-// // @ts-ignore
-const Paragraph = ({children}: {children?: React.ReactNode}) => {
-  return <p>{children}</p>;
+  return (
+    <ul className="list-disc flex flex-col gap-2 ml-4 mt-2 [&>li>strong]:text-pink-500 dark:[&>li>strong]:text-cyan-600">
+      {children}
+    </ul>
+  );
 };
 
 const Code = ({children, className}: {children?: React.ReactNode; className?: string}) => {
+  const isMultiline =
+    Array.isArray(children) && !!children.find((child) => String(child).includes("\n\n"));
+
   return (
     <Components.Snippet
       disableTooltip
       fullWidth
       hideSymbol
       classNames={{
-        base: clsx("bg-code-background text-code-foreground my-6", className),
+        base: clsx(
+          "bg-code-background text-code-foreground",
+          {
+            "items-start": isMultiline,
+          },
+          className,
+        ),
         pre: "font-light text-sm",
-        copyButton: "text-lg text-code-foreground/50",
+        copyButton: "text-lg text-code-foreground/50 -mr-2",
       }}
     >
       <div>{children}</div>
@@ -87,28 +102,38 @@ const Code = ({children, className}: {children?: React.ReactNode; className?: st
   );
 };
 
+const Link = ({href, children}: {href?: string; children?: React.ReactNode}) => {
+  const isExternal = href?.startsWith("http");
+
+  return (
+    <Components.Link showAnchorIcon href={href} isExternal={isExternal}>
+      {children}
+    </Components.Link>
+  );
+};
+
 export const MDXComponents = ({
   /**
    * NextUI components
    */
   ...Components,
+  /**
+   * Docs components
+   */
+  ...DocsComponents,
   /**
    * Markdown components
    */
   // ...Icons,
-  h1: (props: React.DetailsHTMLAttributes<unknown>) => (
-    <LinkedHeading as="h1" className="text-5xl mb-6" linked={false} {...props} />
+  h1: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <LinkedHeading as="h1" linked={false} {...props} />
   ),
-  h2: (props: React.DetailsHTMLAttributes<unknown>) => (
-    <LinkedHeading as="h2" className="text-xl" {...props} />
+  h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => <LinkedHeading as="h2" {...props} />,
+  h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => <LinkedHeading as="h3" {...props} />,
+  h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => <LinkedHeading as="h4" {...props} />,
+  strong: (props: React.HTMLAttributes<HTMLElement>) => (
+    <strong className="font-medium" {...props} />
   ),
-  h3: (props: React.DetailsHTMLAttributes<unknown>) => (
-    <LinkedHeading as="h3" className="text-lg" {...props} />
-  ),
-  h4: (props: React.DetailsHTMLAttributes<unknown>) => (
-    <LinkedHeading as="h4" className="text-base" {...props} />
-  ),
-  p: Paragraph,
   table: Table,
   thead: Thead,
   tr: Trow,
@@ -117,5 +142,12 @@ export const MDXComponents = ({
   // CarbonAd,
   code: Code,
   ul: List,
+  a: (props: React.HTMLAttributes<HTMLAnchorElement>) => <Link {...props} />,
+  blockquote: (props: Omit<React.HTMLAttributes<HTMLElement>, "color">) => (
+    <DocsComponents.Blockquote {...props} />
+  ),
+  inlineCode: (props: Omit<React.HTMLAttributes<HTMLElement>, "color">) => (
+    <Components.Code className="font-normal bg-transparent px-0 py-0 text-code-mdx" {...props} />
+  ),
   // Block,
 } as unknown) as Record<string, React.ReactNode>;

apps/docs/components/virtual-anchor.tsx

@@ -1,13 +1,10 @@
 import React, {useEffect, useRef, useState} from "react";
 import {Link} from "@nextui-org/react";
-import {clsx} from "@nextui-org/shared-utils";
 
-import {LinkCircleLinearIcon} from "@/components/icons";
+import {LinkLinearIcon} from "@/components/icons";
 
 export interface Props {
-  pure?: boolean;
   children?: React.ReactNode;
-  className?: string;
 }
 
 export const virtualAnchorEncode = (text?: string) => {
@@ -16,7 +13,7 @@ export const virtualAnchorEncode = (text?: string) => {
   return text.toLowerCase().replace(/ /g, "-");
 };
 
-export const VirtualAnchor: React.FC<Props> = ({children, className, pure}) => {
+export const VirtualAnchor: React.FC<Props> = ({children}) => {
   const ref = useRef<HTMLAnchorElement>(null);
   const [id, setId] = useState<string | undefined>();
 
@@ -26,19 +23,11 @@ export const VirtualAnchor: React.FC<Props> = ({children, className, pure}) => {
   }, [ref.current]);
 
   return (
-    <span ref={ref} className="relative text-inherit">
-      <Link className={clsx("text-inherit", className)} href={`#${id}`}>
-        {children}
-      </Link>
-      <span
-        className="absolute top-[-65px] left-0 opacity-0 invisible pointer-events-none"
-        id={id}
-      />
-      {!pure && (
-        <span className="absolute left-[-1em] top-1/2 transform -translate-y-1/2 inline-flex justify-center items-center overflow-hidden opacity-0 invisible transition-all duration-200 ease-in group-hover:opacity-100 group-hover:visible text-accent-7 w-4 h-4">
-          <LinkCircleLinearIcon size={20} />
-        </span>
-      )}
-    </span>
+    <Link ref={ref} className="relative flex items-center gap-1 group text-inherit" href={`#${id}`}>
+      {children}
+      <span className="opacity-0 transition-opacity group-hover:opacity-100">
+        <LinkLinearIcon size={20} strokeWidth="2" />
+      </span>
+    </Link>
   );
 };

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

@@ -8,8 +8,20 @@ url: https://nextui.org/docs/components/avatar
 
 The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.
 
+<ComponentLinks
+  component="avatar"
+/>
+
+## Import 
+
+NextUI exports 3 avatar-related components:
+
+- **Avatar**: The main component to display an avatar.
+- **AvatarGroup**: A wrapper component to display a group of avatars.
+- **AvatarIcon**: The default icon used as fallback when the image fails to load.
+
 ```jsx
-import {Avatar} from "@nextui-org/react";
+import { Avatar, AvatarGroup, AvatarIcon } from "@nextui-org/react";
 ```
 
 ## Usage

apps/docs/content/docs/guide/getting-started.mdx

@@ -1,9 +0,0 @@
----
-title: Getting started
-description: Get started with NextUI in the official documentation, and learn more about all our features!
-url: https://nextui.org/docs/getting-started
----
-
-# Getting started
-
-Welcome to the NextUI documentation!

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

@@ -0,0 +1,88 @@
+---
+title: Installation
+description: Get started with NextUI in the official documentation, and learn more about all our features!
+url: https://nextui.org/docs/getting-started
+---
+
+# Installation
+
+Requirements:
+
+- [React 18](https://reactjs.org/) or later
+- [Tailwind CSS 3](https://tailwindcss.com/) or later
+- [Framer Motion 4](https://www.framer.com/motion/) or later
+
+<Divider />
+
+<Spacer y={4}/>
+
+To install NextUI, run one of the following commands in your terminal:
+
+<PackageManagers
+  commands={{
+    npm: 'npm i @nextui-org/react framer-motion',
+    yarn: 'yarn add @nextui-org/react framer-motion',
+    pnpm: 'pnpm add @nextui-org/react framer-motion',
+  }}
+/>
+
+<Spacer y={4}/>
+
+After installing NextUI, you need do the following steps to complete the installation:
+
+
+### 1. Setup Tailwind CSS
+
+NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
+[installation guide](https://tailwindcss.com/docs/installation) to install Tailwind CSS. Then you need to add 
+the following code to your `tailwind.config.js` file:
+
+```js
+// tailwind.config.js
+
+const {nextui} = require("@nextui-org/react");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    // ...
+    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
+  ],
+  theme: {
+    extend: {},
+  },
+  darkMode: "class",
+  plugins: [nextui()]
+}
+```
+
+### 2. Setup Provider
+
+To ensure proper functioning of React Aria, NextUI utilizes the [React Aria SSRProvider](https://react-spectrum.adobe.com/react-aria/SSRProvider.html) and [Overlay provider](https://react-spectrum.adobe.com/react-aria/useOverlayTrigger.html#example) internally. 
+Therefore, it is essential to incorporate the `NextUIProvider` at the `root` of your application.
+
+```jsx
+import * as React from 'react'
+
+// 1. import `NextUIProvider` component
+import { NextUIProvider } from '@nextui-org/react'
+
+function App() {
+  // 2. Wrap NextUIProvider at the root of your app
+  return (
+    <NextUIProvider>
+      <YourApplication />
+    </NextUIProvider>
+  )
+}
+```
+
+<Blockquote
+ color="warning"
+>
+  Version 2 is only compatible with React 18 or later. If you are using React 17 or earlier, please use <Link href="https://v1.nextui.org/docs/getting-started" isExternal>version 1 of NextUI</Link>.
+</Blockquote>
+
+## Framework Guides
+
+NextUI UI is compatible with your preferred framework. We have compiled comprehensive, step-by-step tutorials for the following frameworks:

apps/docs/content/docs/guide/introduction.mdx

@@ -0,0 +1,61 @@
+---
+title: Introduction
+description: NextUI is a UI library for React that helps you build beautiful and accessible user interfaces. Created on top of Tailwind CSS and React Aria.
+url: https://nextui.org/docs/introduction
+---
+
+# Introduction
+
+Welcome to the NextUI documentation!
+
+
+## What is NextUI?
+
+NextUI is a UI library for React that helps you build beautiful and accessible user interfaces. Created on top of 
+[Tailwind CSS](https://tailwindcss.com/) and [React Aria](https://react-spectrum.adobe.com/react-aria/index.html).
+
+NextUI's primary goal is to streamline the development process, offering a beautiful and adaptable system design for an enhanced user experience.
+
+## FAQ
+
+### Is NextUI a Vercel related project?
+
+No, NextUI is an independent community project and is not related to Vercel.
+
+### How is NextUI different from TailwindCSS?
+
+- **TailwindCSS**: Tailwind CSS: CSS Framework that provides atomic CSS classes to help you style components, 
+leaving you to handle lots of other things like accessibility, component composition, keyboard navigation, 
+style overrides, etc.
+
+- **NextUI**: NextUI is a UI library for React that combines the power of TailwindCSS with React Aria to provide
+a complete solution for building accessible and customizable user interfaces. Since NextUI is built upon TailwindCSS,
+ you can utilize all TailwindCSS classes within your NextUI components, ensuring optimal compiled CSS size.
+
+### Does NextUI use runtime CSS?
+
+No, NextUI version 2 employs TailwindCSS JIT, which generates CSS at build time, eliminating the need for 
+runtime CSS. This means that NextUI is fully compatible with the latest React and Next.js versions.
+
+### Does NextUI support TypeScript?
+
+Yes, NextUI is written in TypeScript and has full support for it.
+
+### Can I use NextUI with other front-end frameworks or libraries?
+
+NextUI is specifically designed for React and is built on top of React Aria. As a result, it is primarily 
+tailored for React applications. However, you can still use the CSS part of NextUI with other frameworks or 
+libraries, but you will lose the benefits of React Aria and pre-built accessible components that come with NextUI.
+
+<Divider />
+
+## Community
+
+We're excited to see the community adopt NextUI, raise issues, and provide feedback.
+Whether it's a feature request, bug report, or a project to showcase, please get involved!
+
+<Community />
+
+## Contributing
+
+PR's on NextUI are always welcome, please see our [contribution guidelines](https://github.com/nextui-org/nextui/blob/main/CONTRIBUTING.MD) to learn how you can contribute to this project.

apps/docs/content/docs/guide/nextui-plus-nextjs.mdx

@@ -1,7 +0,0 @@
----
-title: NextUI + Next.js
-description: NextUI in Next.js
-url: https://nextui.org/docs/nextui-plus-nextjs
----
-
-### Next.js 13

apps/docs/content/docs/manifest.json

@@ -7,17 +7,16 @@
       "keywords": "guide, getting started, start, nextui",
       "routes": [
         {
-          "key": "getting-started",
-          "title": "Getting Started",
-          "keywords": "getting started, start, nextui",
-          "path": "/docs/guide/getting-started.mdx"
+          "key": "introduction",
+          "title": "Introduction",
+          "keywords": "introduction, nextui",
+          "path": "/docs/guide/introduction.mdx"
         },
         {
-          "key": "nextui-plus-nextjs",
-          "title": "NextUI + Next.js",
-          "keywords": "next, nextjs, nextui",
-          "path": "/docs/guide/nextui-plus-nextjs.mdx",
-          "updated": true
+          "key": "installation",
+          "title": "Installation",
+          "keywords": "getting started, installation, start, nextui",
+          "path": "/docs/guide/installation.mdx"
         }
       ]
     },

apps/docs/layouts/docs.tsx

@@ -1,5 +1,5 @@
 import {FC, useEffect, useState} from "react";
-import {Link as NextUILink} from "@nextui-org/react";
+import {Link as NextUILink, Image} from "@nextui-org/react";
 import Link from "next/link";
 import dynamic from "next/dynamic";
 
@@ -52,12 +52,12 @@ export const DocsLayout: FC<DocsLayoutProps> = ({
       <Head {...meta} />
       <Navbar />
       <main className="container mx-auto max-w-7xl min-h-[calc(100dvh_-_64px_-_108px)] px-6 mb-12">
-        <div className="grid grid-cols-12">
-          <div className="hidden lg:block lg:col-span-3 mt-8 pr-4">
+        <div className="flex">
+          <div className="hidden relative lg:block lg:w-[30%] mt-8 pr-4">
             <DocsSidebar routes={routes} slug={slug} tag={tag} />
           </div>
-          <div className="col-span-12 lg:col-span-9 xl:col-span-7 mt-10">
-            {children}
+          <div className="w-full xl:px-12 mt-10">
+            <div className="w-full prose prose-neutral">{children}</div>
             <FooterNav nextRoute={nextRoute} prevRoute={prevRoute} tag={tag} />
             <footer>
               {tag ? (
@@ -71,12 +71,36 @@ export const DocsLayout: FC<DocsLayoutProps> = ({
               )}
             </footer>
           </div>
-          <div className="hidden xl:flex xl:col-span-2 mt-8 justify-end pl-4">
+          <div className="hidden xl:flex xl:w-[30%] mt-8 pl-8">
             <DocsToc headings={headings} />
           </div>
         </div>
       </main>
       <Footer align="right" />
+
+      <div
+        aria-hidden="true"
+        className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-[-10]"
+      >
+        <Image
+          removeWrapper
+          alt="docs left background"
+          className="z-[-10]"
+          src="/gradients/docs-left.svg"
+        />
+      </div>
+
+      <div
+        aria-hidden="true"
+        className="fixed hidden dark:md:block dark:opacity-70 -top-[60%] -right-[45%] z-[-10] rotate-12"
+      >
+        <Image
+          removeWrapper
+          alt="docs right background"
+          className="z-[-10]"
+          src="/gradients/docs-right.svg"
+        />
+      </div>
     </div>
   );
 };

apps/docs/layouts/navbar.tsx

@@ -74,7 +74,7 @@ export const Navbar = () => {
       onMenuOpenChange={setIsMenuOpen}
     >
       <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
-        <NavbarBrand className="gap-3">
+        <NavbarBrand className="gap-3 max-w-fit">
           <NextLink href="/">
             <NextUILogo auto />
           </NextLink>
@@ -102,44 +102,46 @@ export const Navbar = () => {
             </Dropdown>
           )}
         </NavbarBrand>
+        <div className="hidden lg:flex gap-4 ml-10 justify-start">
+          <NavbarItem
+            as={Link}
+            className="data-[active=true]:text-primary"
+            color="foreground"
+            href="/docs/guide/introduction"
+            isActive={
+              !!(
+                isActive(router.pathname, "/docs/[[...slug]]") &&
+                !includes(router.asPath, "components")
+              )
+            }
+          >
+            Docs
+          </NavbarItem>
+          <NavbarItem
+            as={Link}
+            className="data-[active=true]:text-primary"
+            color="foreground"
+            href="/docs/components/avatar"
+            isActive={includes(router.asPath, "components")}
+          >
+            Components
+          </NavbarItem>
+          <NavbarItem
+            as={Link}
+            className="data-[active=true]:text-primary"
+            color="foreground"
+            href="/figma"
+            isActive={router.asPath === "/figma"}
+          >
+            Figma
+          </NavbarItem>
+        </div>
       </NavbarContent>
-      <NavbarContent className="hidden lg:flex" justify="center">
-        <NavbarItem
-          as={Link}
-          className="data-[active=true]:text-primary"
-          color="foreground"
-          href="/docs/guide/getting-started"
-          isActive={
-            !!(
-              isActive(router.pathname, "/docs/[[...slug]]") &&
-              !includes(router.asPath, "components")
-            )
-          }
-        >
-          Docs
-        </NavbarItem>
-        <NavbarItem
-          as={Link}
-          className="data-[active=true]:text-primary"
-          color="foreground"
-          href="/docs/components/avatar"
-          isActive={includes(router.asPath, "components")}
-        >
-          Components
-        </NavbarItem>
-        <NavbarItem
-          as={Link}
-          className="data-[active=true]:text-primary"
-          color="foreground"
-          href="/figma"
-          isActive={router.asPath === "/figma"}
-        >
-          Figma
-        </NavbarItem>
-      </NavbarContent>
+
       <NavbarContent className="flex w-full sm:hidden" justify="center">
         <NavbarItem>{searchInput}</NavbarItem>
       </NavbarContent>
+
       <NavbarContent className="basis-1/5 sm:basis-full" justify="end">
         <NavbarItem className="hidden sm:flex gap-2">
           <Link isExternal href="https://twitter.com/getnextui">

apps/docs/libs/constants.ts

@@ -1,2 +0,0 @@
-export const TWITTER_USER_NAME = "getnextui";
-export const SITE_URL = "https://nextui.org";

apps/docs/libs/constants.tsx

@@ -0,0 +1,28 @@
+import {DiscordIcon, GithubIcon, TwitterIcon} from "@/components/icons";
+
+export const TWITTER_USER_NAME = "getnextui";
+export const SITE_URL = "https://nextui.org";
+
+export const communityAccounts = [
+  {
+    title: "Twitter",
+    description: "For announcements, tips and general information.",
+    icon: <TwitterIcon className="text-[#00ACEE]" size={32} />,
+    href: "https://twitter.com/getnextui",
+    isExternal: true,
+  },
+  {
+    title: "Discord",
+    description: "To get involved in the community, ask questions and share tips.",
+    icon: <DiscordIcon className="text-[#7289DA]" size={32} />,
+    href: "https://discord.gg/9b6yyZKmH4",
+    isExternal: true,
+  },
+  {
+    title: "Github",
+    description: "To report bugs, request features and contribute to the project.",
+    icon: <GithubIcon className="text-[#333] dark:text-[#E7E7E7]" size={32} />,
+    href: "https://github.com/nextui-org/nextui",
+    isExternal: true,
+  },
+];

apps/docs/libs/github/constants.ts

@@ -1,3 +1,5 @@
+import {__PREVIEW__} from "@/utils";
+
 export const GITHUB_URL = "https://github.com";
 
 export const GITHUB_API_URL = "https://api.github.com";
@@ -7,3 +9,11 @@ export const RAW_GITHUB_URL = "https://raw.githubusercontent.com";
 export const REPO_NAME = "nextui-org/nextui";
 
 export const ISSUE_REPORT_URL = `${GITHUB_URL}/${REPO_NAME}/issues/new?assignees=&labels=bug&template=bug_report.yml&title=%5BBUG%5D+-+`;
+
+export const COMPONENT_PATH = __PREVIEW__
+  ? `${GITHUB_URL}/${REPO_NAME}/tree/feat/v2/packages/components`
+  : `${GITHUB_URL}/${REPO_NAME}/tree/main/packages/components`;
+
+export const COMPONENT_THEME_PATH = __PREVIEW__
+  ? `${GITHUB_URL}/${REPO_NAME}/tree/feat/v2/packages/core/theme/src/components`
+  : `${GITHUB_URL}/${REPO_NAME}/tree/main/packages/core/theme/src/components`;

apps/docs/libs/prism-theme.ts

@@ -1,33 +1,36 @@
 import {PrismTheme} from "prism-react-renderer";
-import {commonColors} from "@nextui-org/react";
 
 const codeTheme: PrismTheme = {
   plain: {
-    backgroundColor: "var(--nextui-colors-codeBackground)",
+    backgroundColor: "hsl(var(--nextui-code-background))",
     color: "#F4F4F4",
     fontWeight: "500",
     fontStyle: "normal",
-    fontFamily: "$mono",
-    fontSize: "$xs",
     textRendering: "geometricPrecision",
   },
   styles: [
     {
       types: ["comment", "prolog", "doctype", "cdata"],
       style: {
-        color: "var(--nextui-colors-codeComment)",
+        color: "#71717a",
       },
     },
     {
       types: ["symbol", "text"],
       style: {
-        color: "var(--nextui-colors-white)",
+        color: "#F4F4F4",
       },
     },
     {
       types: ["punctuation"],
       style: {
-        color: commonColors.green[500],
+        color: "#17c964",
+      },
+    },
+    {
+      types: ["property"],
+      style: {
+        color: "#17c964",
       },
     },
     {
@@ -48,12 +51,6 @@ const codeTheme: PrismTheme = {
         color: "#E5C07B",
       },
     },
-    {
-      types: ["property", "function"],
-      style: {
-        color: "var(--nextui-colors-success)",
-      },
-    },
     {
       types: ["tag-id", "selector", "atrule-id"],
       style: {
@@ -63,7 +60,7 @@ const codeTheme: PrismTheme = {
     {
       types: ["attr-name"],
       style: {
-        color: "var(--nextui-colors-yellow600)",
+        color: "#c4841d",
       },
     },
     {
@@ -96,7 +93,7 @@ const codeTheme: PrismTheme = {
     {
       types: ["language-javascript", "script"],
       style: {
-        color: "var(--nextui-colors-success)",
+        color: "#17c964",
       },
     },
     {

apps/docs/package.json

@@ -18,9 +18,9 @@
     "@nextui-org/use-clipboard": "workspace:*",
     "@nextui-org/use-is-mobile": "workspace:*",
     "@react-aria/focus": "^3.12.0",
-    "@react-aria/ssr": "^3.6.0",
     "@react-aria/interactions": "^3.15.0",
     "@react-aria/selection": "^3.14.0",
+    "@react-aria/ssr": "^3.6.0",
     "@react-aria/utils": "^3.16.0",
     "@react-aria/virtualizer": "^3.8.0",
     "@react-aria/visually-hidden": "^3.8.0",
@@ -51,6 +51,7 @@
   },
   "devDependencies": {
     "@react-types/shared": "^3.18.0",
+    "@tailwindcss/typography": "^0.5.9",
     "@types/canvas-confetti": "^1.4.2",
     "@types/lodash": "^4.14.194",
     "@types/node": "18.16.0",

apps/docs/pages/_app.tsx

@@ -21,6 +21,7 @@ const Application: NextPage<AppProps<{}>> = ({Component, pageProps}) => {
 };
 
 const sans = Inter({
+  variable: "--font-sans",
   adjustFontFallback: true,
   display: "optional",
   fallback: [

apps/docs/public/gradients/docs-left.svg

@@ -0,0 +1,12 @@
+<svg width="1266" height="1211" viewBox="0 0 1266 1211" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.3" filter="url(#filter0_f)">
+<path opacity="0.5" d="M800.99 565.412C807.9 589.241 834.75 600.713 838.91 626.322C839.5 633.212 847.03 646.162 872.42 642.845C896.89 657.07 972.65 629.431 991.15 653.205C1004.77 670.707 1019.76 692.536 1014.47 724.006C1010.39 748.27 996.81 772.188 983.05 792.839C963.11 822.752 939.58 849.957 914.16 871.496C831.32 941.712 736.47 959.99 654.39 960.24C554.38 960.55 467.74 921.927 394.81 860.159C364.73 834.686 337.79 805.2 317.08 767.666C298.02 733.109 282.51 694.472 270.54 653.568C255.29 601.497 246.7 543.115 253.09 479.95C257.94 431.908 278.55 386.095 307.09 344.272C346.09 287.095 398.52 254.63 449.29 250.971C480.61 248.715 515.38 262.282 516.83 304.632C517.93 336.939 503.01 373.248 493.33 406.417C486.87 428.583 478.06 459.976 492.83 471.537C517.81 491.094 552.6 496.711 584.1 500.672C624.34 505.732 667.42 494.843 709.3 492.18C733.42 490.646 752.96 502.475 770.12 516.942C783.91 528.575 795.06 544.983 800.99 565.412Z" fill="#0070F3"/>
+</g>
+<defs>
+<filter id="filter0_f" x="0.957031" y="0.734375" 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"/>
+</filter>
+</defs>
+</svg>

apps/docs/public/gradients/docs-right.svg

@@ -0,0 +1,20 @@
+<svg width="1833" height="1822" viewBox="0 0 1833 1822" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.5" filter="url(#filter0_f)">
+<path opacity="0.5" d="M984.056 818.268C980.152 843.942 1002.33 869.513 994.793 895.269C992.223 901.901 993.958 917.971 1021.46 929.197C1039.94 955.947 1130.16 973.222 1138.13 1005.35C1144.01 1029 1149.29 1057.4 1129.38 1083.2C1114.04 1103.1 1089.13 1117.35 1065.54 1128.5C1031.38 1144.67 994.771 1156.33 958.858 1161.76C841.771 1179.44 736.338 1142.89 652.265 1097.02C549.824 1041.13 478.98 957.154 432.832 859.709C413.799 819.523 399.817 777.425 395.923 731.471C392.338 689.16 394.272 645.118 400.858 600.984C409.243 544.8 427.346 486.583 462.97 432.404C490.064 391.197 532.243 360.872 580.691 338.648C646.926 308.267 715.506 308.019 769.124 333.187C802.196 348.71 831.518 380.648 813.492 420.191C799.741 450.355 767.751 475.177 742.581 500.08C725.76 516.721 702.289 540.481 712.072 559.349C728.619 591.264 761.622 615.942 792.02 637.256C830.853 664.484 879.927 678.715 923.99 699.8C949.368 711.943 963.91 733.735 974.799 756.603C983.555 774.989 987.403 796.258 984.056 818.268Z" fill="#7928CA"/>
+</g>
+<g opacity="0.3" filter="url(#filter1_f)">
+<path opacity="0.5" d="M1188.83 941.734C1207.53 958.034 1236.32 953.153 1253.67 972.439C1257.9 977.914 1271.24 984.73 1290.8 968.202C1319.07 966.924 1367.83 902.688 1396.25 912.671C1417.17 920.02 1441.59 930.266 1454.17 959.594C1463.87 982.207 1465.39 1009.67 1464.99 1034.48C1464.41 1070.43 1459.34 1106.04 1449.62 1137.9C1417.95 1241.78 1348.07 1308.47 1279.18 1353.09C1195.24 1407.47 1101.48 1421.87 1006.73 1409.39C967.65 1404.24 929.039 1394.02 891.314 1373.66C856.587 1354.91 822.637 1330.81 790.438 1302.89C749.438 1267.35 710.624 1222.9 681.82 1166.33C659.904 1123.3 652.447 1073.62 653.818 1023.01C655.678 953.821 682.203 898.149 722.919 867.601C748.038 848.757 784.619 841.353 808.754 876.183C827.16 902.757 834.259 941.365 844.066 974.496C850.627 996.633 860.204 1027.8 878.881 1029.53C910.47 1032.46 942.767 1018.36 971.4 1004.65C1007.98 987.129 1038.32 954.661 1072.09 929.761C1091.55 915.42 1114.38 914.795 1136.64 917.676C1154.53 919.997 1172.79 927.762 1188.83 941.734Z" fill="#0070F3"/>
+</g>
+<defs>
+<filter id="filter0_f" x="0.000976562" y="0" width="1427.76" height="1581.04" 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"/>
+</filter>
+<filter id="filter1_f" x="306" y="311" width="1526.91" height="1510.39" 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"/>
+</filter>
+</defs>
+</svg>

apps/docs/styles/globals.css

@@ -2,6 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
+@import 'prism.css';
+
 html {
   height: 100vh;
   padding: 0px !important;
@@ -20,192 +22,3 @@ body,
     overflow-x: hidden;
   }
 }
-
-@layer components {
-  /**
-  * ----------------------------------------
-  * Code block styles
-  * ----------------------------------------
-  */
-  .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;
-  }
-
-  /**
-  * ----------------------------------------
-  * Code snippet styles
-  * ----------------------------------------
-  */
-  .token.string {
-    @apply text-code-string;
-  }
-  .token.builtin {
-    @apply text-code-class;
-  }
-  .token.punctuation {
-    @apply text-code-punctuation;
-  }
-  .token.number {
-    @apply text-code-number;
-  }
-  .token.class-name {
-    @apply text-code-class;
-  }
-  .token.comment {
-    @apply text-code-comment;
-  }
-  .token.plain-text {
-    @apply text-code-foreground;
-  }
-  .token.module, .token.keyword {
-    @apply text-code-keyword;
-  }
-  .token.function {
-    @apply text-code-function;
-  }
-  .token.tag {
-    @apply text-code-tag;
-  }
-  .token.attr-name {
-    @apply text-code-attr-name;
-  }
-  .token.language-javascript {
-    @apply text-code-language-javascript;
-  }
-}

apps/docs/styles/prism.css

@@ -0,0 +1,190 @@
+/**
+  * ----------------------------------------
+  * Code block styles
+  * ----------------------------------------
+  */
+.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;
+}
+
+/**
+  * ----------------------------------------
+  * Code snippet styles
+  * ----------------------------------------
+  */
+.token.string {
+  @apply text-code-string;
+}
+.token.builtin {
+  @apply text-code-class;
+}
+.token.punctuation {
+  @apply text-code-punctuation;
+}
+.token.number {
+  @apply text-code-number;
+}
+.token.class-name {
+  @apply text-code-class;
+}
+.token.comment {
+  @apply text-code-comment;
+}
+.token.comment span {
+  @apply text-code-comment;
+}
+.token.plain-text {
+  @apply text-code-foreground;
+}
+.token.module,
+.token.keyword {
+  @apply text-code-keyword;
+}
+.token.function {
+  @apply text-code-function;
+}
+.token.tag {
+  @apply text-code-tag;
+}
+.token.attr-name {
+  @apply text-code-attr-name;
+}
+.token.language-javascript {
+  @apply text-code-language-javascript;
+}

apps/docs/tailwind.config.js

@@ -2,7 +2,7 @@ const {nextui} = require("@nextui-org/theme/plugin");
 const {commonColors} = require("@nextui-org/theme/colors");
 
 // get tailwindcss default config
-const defaultConfig = require("tailwindcss/defaultConfig");
+const defaultTheme = require("tailwindcss/defaultTheme");
 const twColors = require("tailwindcss/colors.js");
 
 /** @type {import('tailwindcss').Config} */
@@ -11,6 +11,7 @@ module.exports = {
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./layouts/**/*.{js,ts,jsx,tsx,mdx}",
+    "./libs/**/*.{js,ts,jsx,tsx,mdx}",
     "../../packages/core/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   darkMode: "class",
@@ -18,26 +19,26 @@ module.exports = {
     extend: {
       colors: {
         "code-foreground": "#F4F4F4",
-        "code-syntax1": "#61AFEF",
-        "code-syntax2": "#98C379",
+        "code-syntax1": "#ADD7FF",
+        "code-syntax2": "#5DE4C7",
         "code-syntax3": "#c678dd",
-        "code-syntax4": commonColors.yellow[600],
-        "code-syntax5": "#E06C75",
-        "code-syntax6": commonColors.yellow[600],
+        "code-syntax4": "#91B4D5",
+        "code-syntax5": "#5DE4C7",
+        "code-syntax6": "#91B4D5",
         "code-removed": commonColors.red[300],
-        "code-string": "#98C379",
-        "code-class": "#E5C07B",
+        "code-string": "#5DE4C7",
+        "code-class": "#91B4D5",
         "code-punctuation": commonColors.green[200],
-        "code-number": "#E5C07B",
+        "code-number": "#91B4D5",
         "code-added": commonColors.green[300],
         "code-line-number": twColors.zinc[300],
         "code-faded-line": twColors.zinc[500],
         "code-comment": twColors.zinc[500],
         "code-keyword": "#c678dd",
-        "code-function": "#61AFEF",
+        "code-function": "#ADD7FF",
         "code-tag": "#E06C75",
-        "code-attr-name": commonColors.yellow[600],
-        "code-language-javascript": "#E5C07B",
+        "code-attr-name": "#91B4D5",
+        "code-language-javascript": "#91B4D5",
         "code-highlighted-word1-bg": commonColors.purple[500],
         "code-highlighted-word1-bg-active": commonColors.purple[600],
         "code-highlighted-word1-text": commonColors.purple[800],
@@ -52,14 +53,207 @@ module.exports = {
         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,
+        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
+        serif: defaultTheme.fontFamily.serif,
+        mono: defaultTheme.fontFamily.mono,
       },
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
         "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
+      typography: (theme) => ({
+        DEFAULT: {
+          css: {
+            color: "hsl(var(--nextui-foreground))",
+            maxWidth: "none",
+            hr: {
+              marginTop: "2em",
+              marginBottom: "2em",
+            },
+            "h1, h2, h3": {
+              letterSpacing: "-0.025em",
+            },
+            h2: {
+              marginTop: "1.5em",
+              marginBottom: `${16 / 24}em`,
+            },
+            h3: {
+              marginTop: "1.8em",
+              lineHeight: "1.4",
+            },
+            h4: {
+              marginTop: "2em",
+              fontSize: "1.125em",
+            },
+            "h2 a": {
+              fontSize: `${theme("fontSize.2xl")[0]} !important`,
+              ...theme("fontSize.2xl")[1],
+            },
+            "h3 a" :{
+              fontWeight: theme("fontWeight.medium"),
+            },
+            "h2 small, h3 small, h4 small": {
+              fontFamily: theme("fontFamily.mono").join(", "),
+              color: theme("colors.slate.500"),
+              fontWeight: 500,
+            },
+            "h2 small": {
+              fontSize: theme("fontSize.lg")[0],
+              ...theme("fontSize.lg")[1],
+            },
+            "h3 small": {
+              fontSize: theme("fontSize.base")[0],
+              ...theme("fontSize.base")[1],
+            },
+            "h4 small": {
+              fontSize: theme("fontSize.sm")[0],
+              ...theme("fontSize.sm")[1],
+            },
+            "h2, h3, h4": {
+              "scroll-margin-top": "var(--scroll-mt)",
+            },
+            ul: {
+              listStyleType: "none",
+              paddingLeft: 0,
+            },
+            "ul > li": {
+              marginTop: "0.1em",
+              marginBottom: "0.1em",
+              fontWeight: theme("fontWeight.light"),
+            },
+            "ul > li > *:last-child": {
+              marginTop:0,
+              marginBottom:0,
+            },
+            "ul > li > a": {
+              marginTop: "0",
+              marginBottom: "0",
+            },
+            a: {
+              fontWeight: theme("fontWeight.normal"),
+            },
+            "a code": {
+              color: "inherit",
+              fontWeight: "inherit",
+            },
+            strong: {
+              color: theme("colors.cyan.600"),
+              fontWeight: theme("fontWeight.semibold"),
+            },
+            "a strong": {
+              color: "inherit",
+              fontWeight: "inherit",
+            },
+            kbd: {
+              background: theme("colors.slate.100"),
+              borderWidth: "1px",
+              borderColor: theme("colors.slate.200"),
+              padding: "0.125em 0.25em",
+              color: theme("colors.slate.700"),
+              fontWeight: 500,
+              fontSize: "0.875em",
+              fontVariantLigatures: "none",
+              borderRadius: "4px",
+              margin: "0 1px",
+            },
+            code: {
+              fontWeight: theme("fontWeight.medium"),
+              fontVariantLigatures: "none",
+            },
+            pre: {
+              display: "flex",
+              backgroundColor: "transparent",
+              padding: 0,
+              margin: 0,
+            },
+            p: {
+              marginTop: `${12 / 14}em`,
+              marginBottom: `${12 / 14}em`,
+              fontWeight: theme("fontWeight.light"),
+            },
+            "pre code": {
+              flex: "none",
+              minWidth: "100%",
+            },
+            table: {
+              fontSize: theme("fontSize.sm")[0],
+              lineHeight: theme("fontSize.sm")[1].lineHeight,
+            },
+            thead: {
+              color: theme("colors.slate.700"),
+              borderBottomColor: theme("colors.slate.200"),
+            },
+            "thead th": {
+              paddingTop: 0,
+              fontWeight: theme("fontWeight.semibold"),
+            },
+            "tbody tr": {
+              borderBottomColor: theme("colors.slate.100"),
+            },
+            "tbody tr:last-child": {
+              borderBottomWidth: "1px",
+            },
+            "tbody code": {
+              fontSize: theme("fontSize.xs")[0],
+            },
+            "figure figcaption": {
+              textAlign: "center",
+              fontStyle: "italic",
+            },
+            "figure > figcaption": {
+              marginTop: `${12 / 14}em`,
+            },
+            blockquote: {
+              fontWeight: theme("fontWeight.light"),
+              fontStyle: "font-normal",
+            },
+          },
+        },
+        dark: {
+          css: {
+            color: "hsl(var(--nextui-neutral-700))",
+            strong: {
+              color: theme("colors.pink.500"),
+            },
+          },
+        },
+        neutral: {
+          css: {
+            "--tw-prose-body": "hsl(var(--nextui-neutral-700))",
+            "--tw-prose-headings": "hsl(var(--nextui-foreground))",
+            "--tw-prose-lead": "hsl(var(--nextui-neutral-600))",
+            "--tw-prose-links": "hsl(var(--nextui-neutral-900))",
+            "--tw-prose-bold": "hsl(var(--nextui-neutral-900))",
+            "--tw-prose-counters": "hsl(var(--nextui-neutral-500))",
+            "--tw-prose-bullets": "hsl(var(--nextui-neutral-300))",
+            "--tw-prose-hr": "hsl(var(--nextui-neutral-200))",
+            "--tw-prose-quotes": "hsl(var(--nextui-neutral-900))",
+            "--tw-prose-quote-borders": "hsl(var(--nextui-neutral-200))",
+            "--tw-prose-captions": "hsl(var(--nextui-neutral-500))",
+            "--tw-prose-code": "hsl(var(--nextui-neutral-900))",
+            "--tw-prose-pre-code": "hsl(var(--nextui-neutral-200))",
+            "--tw-prose-pre-bg": "hsl(var(--nextui-neutral-800))",
+            "--tw-prose-th-borders": "hsl(var(--nextui-neutral-300))",
+            "--tw-prose-td-borders": "hsl(var(--nextui-neutral-200))",
+            "--tw-prose-invert-body": "hsl(var(--nextui-neutral-300))",
+            "--tw-prose-invert-headings": commonColors.white,
+            "--tw-prose-invert-lead": theme("twColors.neutral[400]"),
+            "--tw-prose-invert-links": commonColors.white,
+            "--tw-prose-invert-bold": commonColors.white,
+            "--tw-prose-invert-counters": theme("twColors.neutral[400]"),
+            "--tw-prose-invert-bullets": theme("twColors.neutral[600]"),
+            "--tw-prose-invert-hr": theme("twColors.neutral[700]"),
+            "--tw-prose-invert-quotes": theme("twColors.neutral[100]"),
+            "--tw-prose-invert-quote-borders": theme("twColors.neutral[700]"),
+            "--tw-prose-invert-captions": theme("twColors.neutral[400]"),
+            "--tw-prose-invert-code": commonColors.white,
+            "--tw-prose-invert-pre-code": "hsl(var(--nextui-neutral-300))",
+            "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
+            "--tw-prose-invert-th-borders": theme("twColors.neutral[600]"),
+            "--tw-prose-invert-td-borders": theme("twColors.neutral[700]"),
+          },
+        },
+      }),
     },
     keyframes: {
       heartbeat: {
@@ -116,12 +310,15 @@ module.exports = {
       themes: {
         light: {
           "code-background": "#363449",
+          "code-mdx": "#ff4ecd",
         },
         dark: {
           "code-background": "#111111",
+          "code-mdx": "#c678dd",
         },
       },
     }),
-    require('tailwind-scrollbar-hide')
+    require("tailwind-scrollbar-hide"),
+    require("@tailwindcss/typography"),
   ],
 };

apps/docs/utils/docs-utils.ts

@@ -7,15 +7,17 @@ export function removeFromLast<T>(path: string, key: string): string | T {
 export interface Heading {
   text: string;
   id: string;
+  level: string;
 }
 
 export function getHeadings(): Heading[] {
   const headings = document.getElementsByClassName("linked-heading") as HTMLCollection;
 
-  return Array.from(headings).map((e) => {
+  return Array.from(headings).map((h) => {
     return {
-      id: e.id,
-      text: e.getAttribute("data-name"),
+      id: h.id,
+      text: h.getAttribute("data-name"),
+      level: h.getAttribute("data-level"),
     };
   }) as Heading[];
 }

packages/components/accordion/package.json

@@ -41,7 +41,7 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "framer-motion": ">=6.2.8"
+    "framer-motion": ">=4.0.0"
   },
   "dependencies": {
     "@nextui-org/aria-utils": "workspace:*",

packages/components/dropdown/package.json

@@ -35,7 +35,7 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "framer-motion": ">=6.2.8"
+    "framer-motion": ">=4.0.0"
   },
   "dependencies": {
     "@nextui-org/aria-utils": "workspace:*",

packages/components/navbar/package.json

@@ -34,8 +34,8 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "framer-motion": ">=6.2.8",
-    "react": ">=18"
+    "react": ">=18",
+    "framer-motion": ">=4.0.0"
   },
   "dependencies": {
     "@nextui-org/dom-utils": "workspace:*",

packages/components/popover/package.json

@@ -35,7 +35,7 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "framer-motion": ">=6.2.8"
+    "framer-motion": ">=4.0.0"
   },
   "dependencies": {
     "@nextui-org/aria-utils": "workspace:*",

packages/components/tabs/package.json

@@ -35,7 +35,7 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "framer-motion": ">=6.2.8"
+    "framer-motion": ">=4.0.0"
   },
   "dependencies": {
     "@nextui-org/dom-utils": "workspace:*",

packages/components/tooltip/package.json

@@ -35,7 +35,7 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "framer-motion": ">=6.2.8"
+    "framer-motion": ">=4.0.0"
   },
   "dependencies": {
     "@nextui-org/dom-utils": "workspace:*",

packages/core/react/package.json

@@ -74,7 +74,7 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "framer-motion": ">=6.2.8"
+    "framer-motion": ">=4.0.0"
   },
   "devDependencies": {
     "react": "^18.0.0",

packages/utilities/framer-transitions/package.json

@@ -35,7 +35,7 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "framer-motion": ">=6.2.8"
+    "framer-motion": ">=4.0.0"
   },
   "dependencies": {
     "@nextui-org/system": "workspace:*",

packages/utilities/shared-icons/src/linear/chevron-circle-top.tsx

@@ -0,0 +1,30 @@
+import {IconSvgProps} from "../types";
+
+export const ChevronCircleTopLinearIcon = (props: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M8.46997 13.26L12 9.73999L15.53 13.26"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+  </svg>
+);

packages/utilities/shared-icons/src/linear/index.ts

@@ -1,2 +1,3 @@
 export * from "./check";
 export * from "./copy";
+export * from "./chevron-circle-top";

pnpm-lock.yaml

@@ -390,6 +390,9 @@ importers:
       '@react-types/shared':
         specifier: ^3.18.0
         version: 3.18.0(react@18.2.0)
+      '@tailwindcss/typography':
+        specifier: ^0.5.9
+        version: 0.5.9(tailwindcss@3.2.7)
       '@types/canvas-confetti':
         specifier: ^1.4.2
         version: 1.4.2
@@ -1163,7 +1166,7 @@ importers:
         specifier: ^3.6.0
         version: 3.6.0(react@18.2.0)
       framer-motion:
-        specifier: '>=6.2.8'
+        specifier: '>=4.0.0'
         version: 10.11.2(react-dom@18.2.0)(react@18.2.0)
     devDependencies:
       '@nextui-org/avatar':
@@ -1882,7 +1885,7 @@ importers:
         specifier: workspace:*
         version: link:../../components/user
       framer-motion:
-        specifier: '>=6.2.8'
+        specifier: '>=4.0.0'
         version: 10.11.2(react-dom@18.2.0)(react@18.2.0)
     devDependencies:
       clean-package:
@@ -8613,6 +8616,18 @@ packages:
       jsonc-parser: 3.2.0
     dev: true
 
+  /@tailwindcss/typography@0.5.9(tailwindcss@3.2.7):
+    resolution: {integrity: sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 3.2.7(postcss@8.4.21)(ts-node@10.9.1)
+    dev: true
+
   /@testing-library/dom@8.1.0:
     resolution: {integrity: sha512-kmW9alndr19qd6DABzQ978zKQ+J65gU2Rzkl8hriIetPnwpesRaK4//jEQyYh8fEALmGhomD/LBQqt+o+DL95Q==}
     engines: {node: '>=12'}
@@ -17155,6 +17170,10 @@ packages:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
     dev: true
 
+  /lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+    dev: true
+
   /lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
     dev: true
@@ -19421,6 +19440,14 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: true
+
   /postcss-selector-parser@6.0.12:
     resolution: {integrity: sha512-NdxGCAZdRrwVI1sy59+Wzrh+pMMHxapGnpfenDVlMEXoOcvt4pGE0JLK9YY2F5dLxcFYA/YbVQKhcGU+FtSYQg==}
     engines: {node: '>=4'}