UPDATED: Keep React V1.5.0.

README.md

@@ -59,11 +59,14 @@ pnpm add keep-react phosphor-react
 following code:
 
 ```jsx
-import keepPreset from 'keep-react/preset'
-export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', 'node_modules/keep-react/**/*.{js,jsx,ts,tsx}'],
-  presets: [keepPreset],
+import { keepTheme } from 'keep-react/keepTheme'
+
+const config = {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {},
 }
+
+export default keepTheme(config)
 ```
 
 `Step 5:` Add Tailwind CSS to index.css File:
@@ -111,13 +114,14 @@ pnpm add keep-react phosphor-react
 following code
 
 ```js
-module.exports = {
-  content: [
-    // ... (existing content)
-    './node_modules/keep-react/**/*.{js,jsx,ts,tsx}',
-  ],
-  presets: [require('keep-react/preset')],
+import { keepTheme } from 'keep-react/keepTheme'
+
+const config = {
+  content: ['./components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {},
 }
+
+export default keepTheme(config)
 ```
 
 `Step 4:` Add Tailwind CSS to `globals.css` File:
@@ -134,7 +138,6 @@ Congratulations! You have successfully installed the Keep React. Now you can imp
 ## usage
 
 ```jsx
-'use client'
 import { Button } from 'keep-react'
 const App = () => {
   return <Button>Button</Button>

app/components/CodeHighlight.tsx

@@ -0,0 +1,73 @@
+'use client'
+import { Check, Copy } from 'phosphor-react'
+import { FC, useState } from 'react'
+import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import useCopy from '~/hooks/useCopy'
+import { Tooltip, TooltipAction, TooltipContent } from '../src'
+import { cn } from '../src/utils/cn'
+
+interface CodeHighlightProps {
+  code: {
+    [key: string]: string
+  }
+}
+
+const CodeHighlight: FC<CodeHighlightProps> = ({ code }) => {
+  const [codeType, setCodeType] = useState(0)
+  const { copy, copyToClipboard } = useCopy()
+  return (
+    <div className="my-5 w-full overflow-hidden rounded-xl border border-metal-900 bg-[#0D1015] dark:bg-[#0D1015]/90">
+      <div className="flex justify-between">
+        <div className="flex text-white">
+          {Object.keys(code).map((key, index) => (
+            <button
+              key={key}
+              onClick={() => setCodeType(index)}
+              className={cn(
+                'border-b border-r border-metal-800  px-6 py-2.5 text-body-4 font-normal',
+                codeType === index ? 'bg-metal-900/10' : 'bg-metal-900',
+              )}>
+              <span>{key}</span>
+            </button>
+          ))}
+        </div>
+        <div>
+          <Tooltip placement="top">
+            <TooltipAction asChild>
+              <button onClick={() => copyToClipboard(Object.values(code)[codeType])} className="mx-6 my-2.5">
+                {copy ? (
+                  <Check size={20} weight="light" color="#fff" />
+                ) : (
+                  <Copy size={20} weight="light" color="#fff" />
+                )}
+              </button>
+            </TooltipAction>
+            <TooltipContent>
+              <p className="text-body-5 font-medium text-white dark:text-metal-900">{copy ? 'Copied' : 'Copy Code'}</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+      <div>
+        <SyntaxHighlighter
+          language="javascript"
+          style={coldarkDark}
+          customStyle={{
+            maxHeight: '420px',
+            borderRadius: '0px',
+            padding: '32px',
+            marginTop: '0px',
+            marginBottom: '0px',
+            fontSize: '14px',
+            lineHeight: '22px',
+            letterSpacing: '-0.4px',
+          }}>
+          {Object.values(code)[codeType].trim()}
+        </SyntaxHighlighter>
+      </div>
+    </div>
+  )
+}
+
+export default CodeHighlight

app/components/CodeHighlightPreview.tsx

@@ -0,0 +1,111 @@
+'use client'
+import { Check, Copy } from 'phosphor-react'
+import { forwardRef, HTMLAttributes, useState } from 'react'
+import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import useCopy from '~/hooks/useCopy'
+import { Tooltip, TooltipAction, TooltipContent } from '../src'
+import { cn } from '../src/utils/cn'
+
+interface CodeHighlightPreviewProps extends HTMLAttributes<HTMLDivElement> {
+  code: {
+    [key: string]: string
+  }
+  activeTab?: number
+}
+
+const CodeHighlightPreview = forwardRef<HTMLDivElement, CodeHighlightPreviewProps>(
+  ({ children, code, className, activeTab }, ref) => {
+    const [active, setActive] = useState(activeTab ?? 0)
+    const { copy, copyToClipboard } = useCopy()
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'my-10 max-w-full overflow-hidden rounded-xl border border-metal-200 dark:border-metal-800 ',
+          className,
+        )}>
+        <div className="flex items-center justify-between bg-[#0D1015] dark:bg-metal-900/60">
+          <div className="flex items-center">
+            <button
+              type="button"
+              onClick={() => setActive(0)}
+              className={cn(
+                'border-b border-b-transparent px-6 py-2.5 text-body-4 font-normal',
+                active === 0
+                  ? 'border-b-metal-800 bg-metal-900/10 text-white dark:border-b-metal-200'
+                  : 'bg-metal-800 text-white opacity-50',
+              )}
+              id="preview-btn">
+              Preview
+            </button>
+            {Object.keys(code).map((key, index) => (
+              <button
+                key={key}
+                onClick={() => setActive(index + 1)}
+                className={cn(
+                  'border-b border-b-transparent px-6 py-2.5 text-body-4 font-normal',
+                  active === index + 1
+                    ? 'border-b-metal-200 bg-metal-900/10 text-white'
+                    : 'bg-metal-900 text-white opacity-70',
+                )}>
+                <span>{key}</span>
+              </button>
+            ))}
+          </div>
+          <div>
+            <Tooltip placement="top">
+              <TooltipAction asChild>
+                <button
+                  onClick={() => copyToClipboard(Object.values(code)[active === 0 ? 0 : active - 1])}
+                  className="mx-6 my-2.5">
+                  {copy ? (
+                    <Check size={20} weight="light" color="#fff" />
+                  ) : (
+                    <Copy size={20} weight="light" color="#fff" />
+                  )}
+                </button>
+              </TooltipAction>
+              <TooltipContent>
+                <p className="text-body-5 font-medium text-white dark:text-metal-900">
+                  {copy ? 'Copied' : 'Copy Code'}
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+
+        {active !== 0 && (
+          <div>
+            <SyntaxHighlighter
+              language="javascript"
+              style={coldarkDark}
+              customStyle={{
+                maxHeight: '420px',
+                borderRadius: '0px',
+                padding: '32px',
+                marginTop: '0px',
+                marginBottom: '0px',
+                fontSize: '14px',
+                lineHeight: '22px',
+                letterSpacing: '-0.4px',
+              }}>
+              {Object.values(code)[active - 1].trim()}
+            </SyntaxHighlighter>
+          </div>
+        )}
+
+        {active === 0 && (
+          <div className={cn('bg-white px-2 py-3 md:p-6 dark:bg-[#0D1015]', className)}>
+            <div className="h-full w-full overflow-auto">{children}</div>
+          </div>
+        )}
+      </div>
+    )
+  },
+)
+
+CodeHighlightPreview.displayName = 'CodeHighlightPreview'
+
+export default CodeHighlightPreview

app/components/Community.tsx

@@ -2,7 +2,7 @@
 import Link from 'next/link'
 import { ArrowLineUpRight } from 'phosphor-react'
 import { useEffect, useState } from 'react'
-import { Avatar, AvatarGroup } from '../src'
+import { Avatar, AvatarGroup, AvatarImage } from '../src'
 
 interface Contributor {
   login: string
@@ -36,10 +36,10 @@ const Community = () => {
     <section className="community py-20">
       <div className="mx-auto max-w-7xl px-6 py-6 2xl:px-0">
         <div className="mb-12 text-center">
-          <h4 className="mb-1 text-body-1 !font-semibold text-black dark:text-white lg:text-heading-5">
+          <h4 className="mb-1 text-body-1 !font-semibold text-black lg:text-heading-5 dark:text-white">
             Join The Community
           </h4>
-          <p className="mx-auto max-w-sm text-body-4 font-normal text-metal-600 dark:text-metal-300 md:text-body-3">
+          <p className="mx-auto max-w-sm text-body-4 font-normal text-metal-600 md:text-body-3 dark:text-metal-300">
             Become a member of a community of developers by supporting Keep React
           </p>
         </div>
@@ -51,13 +51,9 @@ const Community = () => {
                   {contributors?.length ? (
                     <AvatarGroup>
                       {contributors?.map((user) => (
-                        <Avatar
-                          key={user?.id}
-                          shape="circle"
-                          size="lg"
-                          img={user?.avatar_url}
-                          className="border-2 border-[#9686E5] p-0"
-                        />
+                        <Avatar key={user?.id} className="size-14">
+                          <AvatarImage src={user?.avatar_url} />
+                        </Avatar>
                       ))}
                     </AvatarGroup>
                   ) : null}

app/components/ComponentApi.tsx

@@ -19,7 +19,7 @@ const spaceMono = Space_Mono({ subsets: ['latin'], weight: ['400'] })
 const ComponentApi: FC<ComponentProps> = ({ data }) => {
   return (
     <div className={spaceMono.className + 'mx-auto w-full overflow-auto'}>
-      <table className="whitespace-no-wrap z-50 mt-10 min-w-max table-auto overflow-hidden rounded-xl bg-white text-left dark:bg-metal-900 md:w-full lg:min-w-min">
+      <table className="whitespace-no-wrap z-50 mt-10 min-w-max table-auto overflow-hidden rounded-xl bg-white text-left md:w-full lg:min-w-min dark:bg-metal-900">
         <thead>
           <tr>
             <th className="rounded-bl rounded-tl bg-metal-50 px-4  py-3 text-body-4 font-medium text-metal-900 dark:bg-white dark:text-metal-900">