docs: add styles page

Author: mehdibha

content/docs/installation.mdx

@@ -9,6 +9,8 @@ description: How to install dependencies and structure your app.
 
 <Step>Create a project</Step>
 
+Start by creating a new Next.js project using `create-next-app`:
+
 ```bash
 npx create-next-app@latest my-app --typescript --tailwind --eslint
 ```
@@ -100,6 +102,8 @@ export default config;
 
 <Step>Update `globals.css`</Step>
 
+Add the following code to the `globals.css` file:
+
 ```css
 @tailwind base;
 @tailwind components;
@@ -170,6 +174,8 @@ npm i clsx class-variance-authority tailwind-merge
 
 <Step>Add `utils/classes.ts`</Step>
 
+Add utilities for classnames:
+
 ```ts
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -183,6 +189,8 @@ export { cva, type VariantProps } from "class-variance-authority";
 
 <Step>You're done.</Step>
 
+You can now start adding components of your choice
+
 </Steps>
 
 ## Vite
@@ -191,12 +199,16 @@ export { cva, type VariantProps } from "class-variance-authority";
 
 <Step>Create project</Step>
 
+Start by creating a new Vite project using the following command:
+
 ```bash
 npm create vite@latest
 ```
 
 <Step>Add Tailwind and its configuration</Step>
 
+Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and `postcss.config.js` files:
+
 ```bash
 npm install -D tailwindcss postcss autoprefixer
 ```
@@ -207,6 +219,8 @@ npx tailwindcss init -p
 
 <Step>Edit tsconfig.json file</Step>
 
+Add the following code to the `tsconfig.json` file so your app can resolve paths without error
+
 ```json
 {
   "compilerOptions": {
@@ -222,7 +236,7 @@ npx tailwindcss init -p
 
 <Step>Update vite.config.ts</Step>
 
-Add the following code to the vite.config.ts so your app can resolve paths without error
+Add the following code to the `vite.config.ts`:
 
 ```bash
 npm i -D @types/node

content/docs/styles.mdx

@@ -0,0 +1,9 @@
+---
+title: Styles
+---
+
+## Playground
+
+Click the customize button on top left to change the styles of the components.
+
+<ComponentPreview name="demos/components/core/all-components" centered={false} />

scripts/build-docs-config.ts

@@ -26,6 +26,10 @@ const docsConfig: DocsConfig = {
           title: "Installation",
           href: "/docs/installation",
         },
+        {
+          title: "Styles",
+          href: "/docs/styles",
+        },
         {
           title: "Changelog",
           href: "/docs/changelog",

src/autogenerated/previews.ts

@@ -12,17 +12,21 @@ import { Preview } from "./preview";
 
 type PreviewsKeys = keyof typeof previews;
 
+export interface ComponentPreviewProps {
+  name: PreviewsKeys;
+  centered?: boolean;
+  className?: string;
+  containerClassName?: string;
+  aspect?: "default" | "page";
+}
+
 export const ComponentPreview = ({
   name,
   centered = true,
   className,
+  containerClassName,
   aspect = "default",
-}: {
-  name: PreviewsKeys;
-  centered?: boolean;
-  className?: string;
-  aspect?: "default" | "page";
-}) => {
+}: ComponentPreviewProps) => {
   const component = React.useMemo(() => {
     const Component = previews[name]?.component;
 
@@ -47,31 +51,29 @@ export const ComponentPreview = ({
   }, [name]);
 
   return (
-    <div>
-      <Tabs defaultValue="preview">
-        <TabsList className="grid w-[200px] grid-cols-2 lg:w-[400px]">
-          <TabsTrigger value="preview">Preview</TabsTrigger>
-          <TabsTrigger value="code">Code</TabsTrigger>
-        </TabsList>
-        <TabsContent value="preview" className="rounded-md border">
-          <Preview aspect={aspect} centered={centered} className={className}>
-            {component}
-          </Preview>
-        </TabsContent>
-        <TabsContent value="code" className="rounded border">
-          <Code
-            subProps={code.map((file) => ({
-              title: code.length > 1 ? file.title : undefined,
-              code: file.code,
-              lang: "tsx",
-            }))}
-            style={{ marginTop: 0, marginBottom: 0 }}
-            theme="github-dark-dimmed"
-            codeClassName="text-xs min-h-[318px]"
-            extensions={[tabs]}
-          />
-        </TabsContent>
-      </Tabs>
-    </div>
+    <Tabs defaultValue="preview" className={containerClassName}>
+      <TabsList className="grid w-[200px] grid-cols-2 lg:w-[400px]">
+        <TabsTrigger value="preview">Preview</TabsTrigger>
+        <TabsTrigger value="code">Code</TabsTrigger>
+      </TabsList>
+      <TabsContent value="preview" className="rounded-md border">
+        <Preview aspect={aspect} centered={centered} className={className}>
+          {component}
+        </Preview>
+      </TabsContent>
+      <TabsContent value="code" className="rounded border">
+        <Code
+          subProps={code.map((file) => ({
+            title: code.length > 1 ? file.title : undefined,
+            code: file.code,
+            lang: "tsx",
+          }))}
+          style={{ marginTop: 0, marginBottom: 0 }}
+          theme="github-dark-dimmed"
+          codeClassName="text-xs min-h-[318px]"
+          extensions={[tabs]}
+        />
+      </TabsContent>
+    </Tabs>
   );
 };

src/components/component-preview.tsx

@@ -9,7 +9,12 @@ import { UseHooksLogo } from "@/assets/images/brands/usehooks";
 
 export const Brands = ({ className }: { className?: string }) => {
   return (
-    <div className={cn("flex flex-wrap items-center justify-center gap-8 ", className)}>
+    <div
+      className={cn(
+        "flex flex-wrap items-center justify-center gap-4 sm:gap-8 ",
+        className
+      )}
+    >
       <TailwindLogo className="h-4 fill-muted-foreground md:h-6" />
       <ReactIcon className="h-4 fill-muted-foreground md:h-6" />
       <NextjsLogo className="h-4 fill-muted-foreground md:h-6" />

src/components/marketing/brands.tsx

@@ -3,11 +3,14 @@ import NavLink from "next/link";
 import { Code } from "bright";
 import { CodeTabs } from "@/components/code-highlighter/code-tabs";
 import { preWrapper } from "@/components/code-highlighter/pre-wrapper-extension";
+import {
+  ComponentPreview,
+  type ComponentPreviewProps,
+} from "@/components/component-preview";
+import { ComponentSource } from "@/components/component-source";
 import { DocsList, type DocsListProps } from "@/components/docs/docs-list";
+import { IconsExplorer } from "@/components/icons-explorer";
 import { cn } from "@/lib/utils/classes";
-import { ComponentPreview } from "../component-preview";
-import { ComponentSource } from "../component-source";
-import { IconsExplorer } from "../icons-explorer";
 
 export const Link = ({
   className,
@@ -176,7 +179,9 @@ export const components = {
   ComponentSource: ({ name, ...rest }: { name: string }) => (
     <ComponentSource name={name} className="my-2" {...rest} />
   ),
-  ComponentPreview,
+  ComponentPreview: (props: ComponentPreviewProps) => (
+    <ComponentPreview containerClassName="[&:not(:first-child)]:mt-4" {...props} />
+  ),
   IconsExplorer,
   CodeTabs,
   DocsList: (props: DocsListProps) => <DocsList {...props} className="mt-4" />,

src/components/mdx/mdx-components.tsx

@@ -22,25 +22,30 @@ export const Preview = ({
       <div className="absolute left-4 top-4 z-50 flex items-center space-x-2">
         <CustomizeTheme />
       </div>
-      <ScrollArea
-        viewportProps={{
-          className: cn({
-            "min-h-[350px] max-h-[800px]": aspect === "default",
-          }),
-        }}
-      >
-        <ThemeWrapper fallback={<Skeleton className="h-[350px]" />}>
+      <ThemeWrapper fallback={<Skeleton className="h-[350px]" />}>
+        <ScrollArea
+          viewportProps={{
+            className: cn("bg-background", {
+              "min-h-[350px] max-h-[800px]": aspect === "default",
+            }),
+          }}
+        >
           <div
             className={cn("min-h-[350px] w-full", {
-              "flex items-center justify-center bg-background px-8 py-8": centered,
+              "flex items-center justify-center px-8 py-8": centered,
             })}
           >
-            <div className={cn("flex w-full items-center justify-center", className)}>
+            <div
+              className={cn(
+                "flex w-full items-center justify-center" && centered,
+                className
+              )}
+            >
               {children}
             </div>
           </div>
-        </ThemeWrapper>
-      </ScrollArea>
+        </ScrollArea>
+      </ThemeWrapper>
     </div>
   );
 };

src/components/preview.tsx

@@ -10,6 +10,7 @@ export const docsConfig: DocsConfig = {
       items: [
         { title: "Introduction", href: "/docs" },
         { title: "Installation", href: "/docs/installation" },
+        { title: "Styles", href: "/docs/styles" },
         { title: "Changelog", href: "/docs/changelog" },
       ],
     },