---
title: "Type table"
description: "A table of props or fields that expand to show their details."
url: https://docscn.dev/docs/components/type-table
lastModified: 2026-10-08T07:54:30.000Z
---

# Type table (/docs/components/type-table)

> A table of props or fields that expand to show their details.

<TypeTable
  type="{
  title: {
    description: <>The card's title.</>,
    type: &#x22;ReactNode&#x22;,
    required: true,
  },
  href: {
    description: <>Makes the card a link.</>,
    type: &#x22;string&#x22;,
  },
  icon: {
    description: <>An icon shown above the title.</>,
    type: &#x22;ReactNode&#x22;,
    default: &#x22;undefined&#x22;,
  },
}"
/>

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add @docscn/type-table
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @docscn/type-table
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @docscn/type-table
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add @docscn/type-table
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Usage [#usage]

```mdx
import { TypeTable } from "@/components/docs/components/type-table";

<TypeTable
  type={{
    title: {
      description: <>The card's title.</>,
      type: "ReactNode",
      required: true,
    },
    href: {
      description: <>Makes the card a link.</>,
      type: "string",
    },
  }}
/>
```

The `docs` block adds `TypeTable` to your MDX components.

Give the table an `id` to make each field linkable: a field gets the id `{id}-{name}`, and opening it updates the URL hash.

## Props [#props]

<TypeTable
  type="{
  type: {
    description: <>The fields, by name.</>,
    type: &#x22;Record<string, TypeNode>&#x22;,
    required: true,
  },
  id: {
    description: <>Prefix for the fields' ids, which makes them linkable.</>,
    type: &#x22;string&#x22;,
  },
}"
/>

### `TypeNode` [#typenode]

<TypeTable
  type="{
  type: {
    description: <>The short type, shown in the row.</>,
    type: &#x22;ReactNode&#x22;,
    required: true,
  },
  description: {
    description: <>What the field does.</>,
    type: &#x22;ReactNode&#x22;,
  },
  typeDescription: {
    description: <>The full type, shown when the field is open.</>,
    type: &#x22;ReactNode&#x22;,
  },
  typeDescriptionLink: {
    description: <>Makes the short type a link.</>,
    type: &#x22;string&#x22;,
  },
  default: {
    description: <>The default value.</>,
    type: &#x22;ReactNode&#x22;,
  },
  required: {
    description: (
      <>
        Leaves the <code>{&#x22;?&#x22;}</code> off the field's name.
      </>
    ),
    type: &#x22;boolean&#x22;,
  },
  deprecated: {
    description: <>Strikes through the field's name.</>,
    type: &#x22;boolean&#x22;,
  },
  parameters: {
    description: <>For functions, each parameter's name and description.</>,
    type: &#x22;{ name: string; description: ReactNode }[]&#x22;,
  },
  returns: {
    description: <>For functions, what they return.</>,
    type: &#x22;ReactNode&#x22;,
  },
}"
/>