tscircuit · seveibar · Oct 11, 2025 · Oct 11, 2025 · Oct 11, 2025 · Oct 11, 2025
diff --git a/docs/advanced/units.md b/docs/advanced/units.md
@@ -1,5 +1,6 @@
 ---
 title: tscircuit Units
+description: Understanding default units in tscircuit for length, electrical properties, and other measurements.
 ---
 
 In tscircuit you can specify a unit explicitly with a string e.g. "0.1mm", but

diff --git a/docs/command-line/tsci-export.md b/docs/command-line/tsci-export.md
@@ -1,5 +1,6 @@
 ---
 title: tsci export
+description: Export tscircuit files to various formats including SVG schematics, PCB layouts, and fabrication files.
 ---
 
 import ImageWithCaption from "../../src/components/ImageWithCaption"

diff --git a/docs/contributing/overview-of-projects.md b/docs/contributing/overview-of-projects.md
@@ -1,6 +1,7 @@
 ---
 title: Overview of Projects
 sidebar_position: 2
+description: Explore the key tscircuit repositories including core libraries, tools, and web components that power the ecosystem.
 ---
 
 | Repo                                                                          | Description                                                                                    | Open Issues                                                                                                                                 |

diff --git a/docs/contributing/the-contributor-handbook.md b/docs/contributing/the-contributor-handbook.md
@@ -1,5 +1,6 @@
 ---
 title: The Contributor Handbook
+description: Essential patterns and guidelines for contributing to tscircuit, including development tools and coding standards.
 ---
 
 We have some important patterns that make contributing to

diff --git a/docs/footprints/silkscreencircle.mdx b/docs/footprints/silkscreencircle.mdx
@@ -1,5 +1,6 @@
 ---
 title: <silkscreencircle />
+description: Silkscreen circles are often used to indicate "pin1" on a chip.
 ---
 
 ## Overview

diff --git a/docs/footprints/silkscreenrect.mdx b/docs/footprints/silkscreenrect.mdx
@@ -1,5 +1,6 @@
 ---
 title: <silkscreenrect />
+description: Silkscreen rectangles can be used to encapsulate a rectangular area around a chip.
 ---
 
 ## Overview

diff --git a/docs/guides/running-tscircuit/building-static-sites-with-tsci.mdx b/docs/guides/running-tscircuit/building-static-sites-with-tsci.mdx
@@ -1,5 +1,6 @@
 ---
 title: Building a Static Site
+description: "`tsci build --site` packages your tscircuit project into a static website that anyone can browse without running a server."
 ---
 
 `tsci build --site` packages your tscircuit project into a static website that anyone can browse without running a server. The command evaluates your circuits, exports the generated assets into a `dist` folder, and wires them up to the tscircuit RunFrame viewer so visitors can flip between PCB, schematic, and 3D previews right in the browser.

diff --git a/docs/intro/installation.md b/docs/intro/installation.md
@@ -1,6 +1,7 @@
 ---
 title: Installation
 sidebar_position: 2
+description: Install tscircuit CLI globally or per-project to start building electronic circuits with TypeScript.
 ---
 
 ## Dependencies

diff --git a/docs/tutorials/building-a-simple-usb-flashlight.mdx b/docs/tutorials/building-a-simple-usb-flashlight.mdx
@@ -1,37 +1,38 @@
----
-title: Building a Simple USB Flashlight
----
-
-## Overview
-
-This tutorial will walk you through building a simple USB flashlight using
-tscircuit.
-
-import TscircuitIframe from "@site/src/components/TscircuitIframe"
-
-<TscircuitIframe defaultView="3d" code={`
-import { usePushButton } from "@tsci/seveibar.push-button"
-import { useUsbC } from "@tsci/seveibar.smd-usb-c"
-
-export default () => {
-  const USBCPort = useUsbC("USBC")
-  const Button = usePushButton("SW1")
-  return (
-    <board width="12mm" height="30mm">
-      <USBCPort
-        GND1="net.GND"
-        GND2="net.GND"
-        VBUS1="net.VBUS"
-        VBUS2="net.VBUS"
-        pcbY={-10}
-        schX={-4}
-      />
-      <led name="LED" color="red" footprint="0603" pcbY={12} schY={2} />
-      <Button pcbY={0} pin2=".R1 > .pos" pin3="net.VBUS" schY={-2} />
-      <resistor name="R1" footprint="0603" resistance="1k" pcbY={7} />
-      <trace from=".R1 .neg" to=".LED .pos" />
-      <trace from=".LED .neg" to="net.GND" />
-    </board>
-  )
-}
-`} />
+---
+title: Building a Simple USB Flashlight
+description: Learn how to build a simple USB-powered flashlight circuit using tscircuit with a push button, LED, and USB-C connector.
+---
+
+## Overview
+
+This tutorial will walk you through building a simple USB flashlight using
+tscircuit.
+
+import TscircuitIframe from "@site/src/components/TscircuitIframe"
+
+<TscircuitIframe defaultView="3d" code={`
+import { usePushButton } from "@tsci/seveibar.push-button"
+import { useUsbC } from "@tsci/seveibar.smd-usb-c"
+
+export default () => {
+  const USBCPort = useUsbC("USBC")
+  const Button = usePushButton("SW1")
+  return (
+    <board width="12mm" height="30mm">
+      <USBCPort
+        GND1="net.GND"
+        GND2="net.GND"
+        VBUS1="net.VBUS"
+        VBUS2="net.VBUS"
+        pcbY={-10}
+        schX={-4}
+      />
+      <led name="LED" color="red" footprint="0603" pcbY={12} schY={2} />
+      <Button pcbY={0} pin2=".R1 > .pos" pin3="net.VBUS" schY={-2} />
+      <resistor name="R1" footprint="0603" resistance="1k" pcbY={7} />
+      <trace from=".R1 .neg" to=".LED .pos" />
+      <trace from=".LED .neg" to="net.GND" />
+    </board>
+  )
+}
+`} />
diff --git a/docs/web-apis/datasheet-sdk.md b/docs/web-apis/datasheet-sdk.md
@@ -1,6 +1,7 @@
 ---
 title: Retrieve datasheets with the SDK
 sidebar_position: 5
+description: Use the @tscircuit/api SDK to programmatically retrieve and process component datasheets with pin information.
 ---
 
 The [`@tscircuit/api`](https://github.com/tscircuit/api) package provides a

diff --git a/docs/web-apis/jlcsearch-api.md b/docs/web-apis/jlcsearch-api.md
@@ -1,6 +1,7 @@
 ---
 title: jlcsearch API
 sidebar_position: 6
+description: Search and query JLCPCB in-stock components with the jlcsearch JSON API for scripting and integration.
 ---
 
 # jlcsearch.tscircuit.com

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -601,7 +601,7 @@ article h4 {
 }
 
 .markdown > p:first-of-type {
-  margin-bottom: 2rem !important;
+  margin-top: 2rem !important;
 }
 
 .skeleton-container {
@@ -732,6 +732,16 @@ article h4 {
   font-size: 1rem !important;
 }
 
+/* Allow inline code styling in overview pages */
+[class*="generatedIndexPage"] p code {
+  all: revert !important;
+  background: var(--ifm-code-background) !important;
+  border-radius: 3px !important;
+  font-family: var(--ifm-font-family-monospace) !important;
+  padding: var(--ifm-code-padding-vertical) var(--ifm-code-padding-horizontal) !important;
+  font-size: 0.9em !important;
+}
+
 /* Add colon separator between heading and description */
 [class*="generatedIndexPage"] h2::after {
   content: ": " !important;

diff --git a/src/theme/DocCard/index.tsx b/src/theme/DocCard/index.tsx
@@ -79,13 +79,24 @@ function CardLayout({
           className={clsx("text--truncate", styles.cardDescription)}
           title={description}
         >
-          {description}
+          {parseInlineMarkdown(description)}
         </p>
       )}
     </CardContainer>
   )
 }
 
+function parseInlineMarkdown(text: string): ReactNode[] {
+  // Convert inline code (backticks) to <code> elements
+  const parts = text.split(/(`[^`]+`)/g)
+  return parts.map((part, i) => {
+    if (part.startsWith("`") && part.endsWith("`")) {
+      return <code key={i}>{part.slice(1, -1)}</code>
+    }
+    return <React.Fragment key={i}>{part}</React.Fragment>
+  })
+}
+
 function NestedItem({
   item,
 }: { item: PropSidebarItemLink | PropSidebarItemCategory }) {
@@ -95,11 +106,15 @@ function NestedItem({
     return (
       <li>
         <Link to={item.href} className={styles.nestedLink}>
-          <span className={styles.nestedTitle}>{item.label}</span>
+          <span className={styles.nestedTitle}>
+            {parseInlineMarkdown(item.label)}
+          </span>
           {description && (
             <>
               <span className={styles.nestedColon}>: </span>
-              <span className={styles.nestedDescription}>{description}</span>
+              <span className={styles.nestedDescription}>
+                {parseInlineMarkdown(description)}
+              </span>
             </>
           )}
         </Link>
@@ -110,12 +125,14 @@ function NestedItem({
     return subHref ? (
       <li>
         <Link to={subHref} className={styles.nestedLink}>
-          <span className={styles.nestedTitle}>{item.label}</span>
+          <span className={styles.nestedTitle}>
+            {parseInlineMarkdown(item.label)}
+          </span>
           {item.description && (
             <>
               <span className={styles.nestedColon}>: </span>
               <span className={styles.nestedDescription}>
-                {item.description}
+                {parseInlineMarkdown(item.description)}
               </span>
             </>
           )}
@@ -148,7 +165,7 @@ function CardCategory({ item }: { item: PropSidebarItemCategory }): ReactNode {
           className={clsx("text--truncate", styles.cardDescription)}
           title={item.description}
         >
-          {item.description}
+          {parseInlineMarkdown(item.description)}
         </p>
       )}
       {item.items.length > 0 && (