Merge pull request #136 from TailGrids/feat/doc-content-redesign

johurul-pimjo · web-flow · commit 7961ecb5e8c2 · 2026-04-07T13:10:12.000+06:00
feat(doc-content): update doc content
diff --git a/apps/docs/content/get-started/global-variables.mdx b/apps/docs/content/get-started/global-variables.mdx
diff --git a/apps/docs/content/get-started/themes/dark.css b/apps/docs/content/get-started/themes/dark.css
diff --git a/apps/docs/content/get-started/themes/default.css b/apps/docs/content/get-started/themes/default.css
diff --git a/apps/docs/content/installation/astro.mdx b/apps/docs/content/installation/astro.mdx
@@ -77,12 +77,9 @@ Run the command in the CLI to initialize Tailgrids in your project:
 npx @tailgrids/cli@latest init
 ```
 
-</Step>
-
-<Step>
-### Configure Styles
+Follow the prompts to configure your project.
 
-Copy the contents of the generated `tailgrids.css` file and paste them into `src/styles/global.css` file.
+**Note:** If you have chosen not to replace the content of your main CSS file, you will need to copy and paste the styles of [tailgrids.css](/get-started/global-variables) into your main CSS file (e.g., `src/app/globals.css` or `src/index.css`).
 
 </Step>
 
diff --git a/apps/docs/content/installation/index.mdx b/apps/docs/content/installation/index.mdx
@@ -17,7 +17,9 @@ The fastest way to get started is by using our CLI. Run the following command in
 npx @tailgrids/cli@latest init
 ```
 
-This will initialize Tailgrids by installing required dependencies, generating the config file, and adding base styles. Then copy and paste the styles of [tailgrids.css](/get-started/global-variables) into your main CSS file (e.g., `src/app/globals.css`).
+This will initialize Tailgrids by installing required dependencies, generating the config file, and adding base styles.
+
+**Note:** If you have chosen not to replace the content of your main CSS file, you will need to copy and paste the styles of [tailgrids.css](/get-started/global-variables) into your main CSS file (e.g., `src/app/globals.css` or `src/index.css`).
 
 ## Pick Your Framework
 
diff --git a/apps/docs/content/installation/manual.mdx b/apps/docs/content/installation/manual.mdx
@@ -27,12 +27,7 @@ npx @tailgrids/cli@latest init
 
 Follow the prompts to configure your project structure and path aliases.
 
-</Step>
-
-<Step>
-### Configure Styles
-
-Copy the contents of the generated `tailgrids.css` file and paste them into your main CSS file (e.g., `src/styles.css`).
+**Note:** If you have chosen not to replace the content of your main CSS file, you will need to copy and paste the styles of [tailgrids.css](/get-started/global-variables) into your main CSS file (e.g., `src/app/globals.css` or `src/index.css`).
 
 </Step>
 
diff --git a/apps/docs/content/installation/next.mdx b/apps/docs/content/installation/next.mdx
@@ -33,14 +33,7 @@ npx @tailgrids/cli@latest init
 
 Follow the prompts to configure your project.
 
-</Step>
-
-<Step>
-### Configure Styles
-
-Copy the contents of the generated `tailgrids.css` file and paste them into your main CSS file (e.g., `src/app/globals.css`).
-
-Make sure you have imported the CSS file in your root layout.
+**Note:** If you have chosen not to replace the content of your main CSS file, you will need to copy and paste the styles of [tailgrids.css](/get-started/global-variables) into your main CSS file (e.g., `src/app/globals.css` or `src/index.css`).
 
 </Step>
 
diff --git a/apps/docs/content/installation/react-router.mdx b/apps/docs/content/installation/react-router.mdx
@@ -56,12 +56,9 @@ Run the command in the CLI to initialize Tailgrids UI in your project:
 npx @tailgrids/cli@latest init
 ```
 
-</Step>
-
-<Step>
-### Configure Styles
+Follow the prompts to configure your project.
 
-Copy the contents of the generated `tailgrids.css` file and transition them into your main CSS file (e.g., `src/app.css`).
+**Note:** If you have chosen not to replace the content of your main CSS file, you will need to copy and paste the styles of [tailgrids.css](/get-started/global-variables) into your main CSS file (e.g., `src/app/globals.css` or `src/index.css`).
 
 </Step>
 
diff --git a/apps/docs/content/installation/tanstack.mdx b/apps/docs/content/installation/tanstack.mdx
@@ -33,14 +33,7 @@ npx @tailgrids/cli@latest init
 
 Follow the prompts to configure Tailgrids UI
 
-</Step>
-
-<Step>
-### Configure Styles
-
-Copy the contents of the generated `tailgrids.css` file and paste them into your main CSS file (e.g., `src/styles.css`).
-
-Make sure your CSS file is imported in your root route.
+**Note:** If you have chosen not to replace the content of your main CSS file, you will need to copy and paste the styles of [tailgrids.css](/get-started/global-variables) into your main CSS file (e.g., `src/app/globals.css` or `src/index.css`).
 
 </Step>
 
diff --git a/apps/docs/content/installation/vite.mdx b/apps/docs/content/installation/vite.mdx
@@ -40,8 +40,9 @@ Vite requires some configuration for path aliases. Update your `tsconfig.json` a
 
 #### tsconfig.json
 
-```json title="tsconfig.json"
+```jsonc title="tsconfig.json"
 {
+  // ...existing code
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
@@ -80,12 +81,9 @@ Run the CLI in your project root to initialize Tailgrids UI:
 npx @tailgrids/cli@latest init
 ```
 
-</Step>
-
-<Step>
-### Configure Styles
+Follow the prompts to configure your project.
 
-Copy the contents of the generated `tailgrids.css` file into your main CSS file (e.g., `src/index.css`).
+**Note:** If you have chosen not to replace the content of your main CSS file, you will need to copy and paste the styles of [tailgrids.css](/get-started/global-variables) into your main CSS file (e.g., `src/app/globals.css` or `src/index.css`).
 
 </Step>
 
diff --git a/apps/docs/src/app/global.css b/apps/docs/src/app/global.css
@@ -859,10 +859,8 @@ aside#nd-sidebar-mobile > div:first-child > button {
   }
 }
 
-#nd-page article #fd-step {
-  &::after {
-    @apply bg-transparent! text-red-300!;
-  }
+#nd-page article .fd-step {
+  @apply relative before:absolute before:-left-10 md:before:-left-11 before:-top-[0.2rem] before:content-[counter(step)] before:text-title-50 before:font-semibold before:bg-white before:border before:border-base-100 before:z-9 after:absolute after:content-[''] after:size-10 after:bg-white after:-top-[0.45rem] after:-left-11 md:after:-left-12;
 }
 
 #nd-page article figure {
diff --git a/apps/docs/src/components/preview/badge/badge-custom.tsx b/apps/docs/src/components/preview/badge/badge-custom.tsx
@@ -6,7 +6,7 @@ export default function BadgeCustom() {
       <Badge className="border border-primary-500 bg-transparent text-primary-500">
         Outline Badge
       </Badge>
-      <Badge className="rounded-none bg-foreground-50 text-white dark:text-black">
+      <Badge className="rounded-none bg-foreground-50 text-text-white">
         Square Badge
       </Badge>
       <Badge className="bg-linear-to-r from-primary-500 to-badge-purple-icon-color text-white-100">
diff --git a/apps/docs/src/components/preview/chart/chart-zoomable-area-preview.tsx b/apps/docs/src/components/preview/chart/chart-zoomable-area-preview.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { buttonStyles } from "@/registry/core/button";
 import {
   ChartContainer,
   ChartTooltip,
@@ -50,7 +51,7 @@ export default function ChartZoomableAreaPreview() {
   const getAxisYDomain = (
     from: number,
     to: number,
-    ref: keyof Omit<typeof initialData[0], "name">,
+    ref: keyof Omit<(typeof initialData)[0], "name">,
     offset: number
   ) => {
     const fromIndex = data.findIndex(d => d.name === from);
@@ -118,16 +119,25 @@ export default function ChartZoomableAreaPreview() {
     <div className="w-80 p-4 md:p-8 md:w-140 aspect-video bg-background-50 rounded select-none relative">
       <button
         onClick={zoomOut}
-        className="absolute top-2 right-2 z-10 text-xs px-2 py-1 bg-white border rounded shadow-sm hover:bg-slate-50 cursor-pointer"
+        className={buttonStyles({
+          appearance: "fill",
+          variant: "ghost",
+          size: "xs",
+          className: "border absolute -top-2 right-10 z-10"
+        })}
       >
         Zoom Out
       </button>
       <ChartContainer initialDimension={{ width: 280, height: 160 }}>
         <AreaChart
           data={data}
-          onMouseDown={e => e?.activeLabel && setRefAreaLeft(e.activeLabel as number)}
+          onMouseDown={e =>
+            e?.activeLabel && setRefAreaLeft(e.activeLabel as number)
+          }
           onMouseMove={e =>
-            e?.activeLabel && refAreaLeft && setRefAreaRight(e.activeLabel as number)
+            e?.activeLabel &&
+            refAreaLeft &&
+            setRefAreaRight(e.activeLabel as number)
           }
           onMouseUp={zoom}
         >
diff --git a/apps/docs/src/components/preview/dropdown/dropdown-custom-preview.tsx b/apps/docs/src/components/preview/dropdown/dropdown-custom-preview.tsx
@@ -20,7 +20,7 @@ import {
 export default function DropdownCustomPreview() {
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger className="group flex items-center gap-2 rounded-full border border-neutral-200 bg-background-50 px-4 py-2 text-sm font-medium text-foreground-soft-200 shadow-sm transition-all hover:bg-background-soft-50 active:scale-95 dark:border-foreground-50 dark:bg-foreground-50 dark:text-white-60 dark:hover:bg-foreground-soft-500">
+      <DropdownMenuTrigger className="group flex items-center gap-2 rounded-full border border-base-200 bg-background-50 px-4 py-2 text-sm font-medium text-title-50 shadow-sm transition-all hover:bg-background-soft-50 focus-visible:bg-background-soft-50">
         <div className="flex h-6 w-6 items-center justify-center rounded-full bg-linear-to-tr from-white-100 to-button-primary-background text-[10px] lowercase text-white-100">
           jd
         </div>
@@ -44,7 +44,7 @@ export default function DropdownCustomPreview() {
           </DropdownMenuItem>
         </DropdownMenuSection>
         <DropdownMenuSeparator className="-mx-1.5 my-1" />
-        <DropdownMenuItem className="cursor-pointer gap-2.5 py-2 text-alert-danger-button-text focus:text-alert-danger-title focus:bg-alert-danger-background dark:text-alert-danger-button-text dark:focus:bg-alert-danger-background">
+        <DropdownMenuItem className="cursor-pointer gap-2.5 py-2 text-alert-danger-button-text focus:text-alert-danger-title focus:bg-alert-danger-background">
           <Exit className="size-5" />
           <span>Log out</span>
         </DropdownMenuItem>
diff --git a/apps/docs/src/components/preview/tabs/tabs-custom-preview.tsx b/apps/docs/src/components/preview/tabs/tabs-custom-preview.tsx
diff --git a/apps/docs/src/components/select-theme.tsx b/apps/docs/src/components/select-theme.tsx
