/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    div: "div",
    h2: "h2",
    table: "table",
    thead: "thead",
    tr: "tr",
    th: "th",
    tbody: "tbody",
    td: "td",
    code: "code",
    em: "em",
    a: "a",
    strong: "strong"
  }, _provideComponents(), props.components), {Code, PermanentLink, QuickNav} = _components;
  if (!Code) _missingMdxReference("Code", true);
  if (!PermanentLink) _missingMdxReference("PermanentLink", true);
  if (!QuickNav) _missingMdxReference("QuickNav", false);
  if (!QuickNav.Heading) _missingMdxReference("QuickNav.Heading", true);
  if (!QuickNav.Item) _missingMdxReference("QuickNav.Item", true);
  if (!QuickNav.Link) _missingMdxReference("QuickNav.Link", true);
  if (!QuickNav.List) _missingMdxReference("QuickNav.List", true);
  if (!QuickNav.Root) _missingMdxReference("QuickNav.Root", true);
  return _jsxs(_Fragment, {
    children: [_jsxs(QuickNav.Root, {
      children: [_jsx(QuickNav.Heading, {}), _jsxs(QuickNav.List, {
        children: [_jsx(QuickNav.Item, {
          children: _jsx(QuickNav.Link, {
            href: "/demo/table/default-table",
            children: "Default table"
          })
        }), _jsx(QuickNav.Item, {
          children: _jsxs(QuickNav.Link, {
            href: "/demo/table/formatting-with-inline-code-blocks-links-and-text-styles",
            children: ["Formatting with ", _jsx(Code, {
              variant: "ghost",
              children: "inline code blocks"
            }), ", ", _jsx(Code, {
              variant: "ghost",
              children: "links"
            }), ", and ", _jsx(Code, {
              variant: "ghost",
              children: "text styles"
            })]
          })
        }), _jsx(QuickNav.Item, {
          children: _jsx(QuickNav.Link, {
            href: "/demo/table/text-alignment",
            children: "Text alignment"
          })
        })]
      })]
    }), _jsxs(_components.div, {
      tabIndex: "-1",
      "data-section-slug": "/demo/table/default-table",
      children: [_jsx(PermanentLink, {
        label: "Section titled Default table",
        hidden: true,
        href: "/demo/table/default-table",
        children: _jsx(_components.h2, {
          id: "/demo/table/default-table",
          children: "Default table"
        })
      }), "\n", _jsx(_components.div, {
        children: _jsxs(_components.table, {
          children: [_jsx(_components.thead, {
            children: _jsxs(_components.tr, {
              children: [_jsx(_components.th, {
                children: "First Header"
              }), _jsx(_components.th, {
                children: "Second Header"
              })]
            })
          }), _jsxs(_components.tbody, {
            children: [_jsxs(_components.tr, {
              children: [_jsx(_components.th, {
                scope: "row",
                children: "Content Cell"
              }), _jsx(_components.td, {
                children: "Content Cell"
              })]
            }), _jsxs(_components.tr, {
              children: [_jsx(_components.th, {
                scope: "row",
                children: "Content Cell"
              }), _jsx(_components.td, {
                children: "Content Cell"
              })]
            })]
          })]
        })
      }), "\n"]
    }), _jsxs(_components.div, {
      tabIndex: "-1",
      "data-section-slug": "/demo/table/formatting-with-inline-code-blocks-links-and-text-styles",
      children: [_jsx(PermanentLink, {
        label: "Section titled Formatting with inline code blocks, links, and text styles",
        hidden: true,
        href: "/demo/table/formatting-with-inline-code-blocks-links-and-text-styles",
        children: _jsxs(_components.h2, {
          id: "/demo/table/formatting-with-inline-code-blocks-links-and-text-styles",
          children: ["Formatting with ", _jsx(_components.code, {
            children: "inline code blocks"
          }), ", ", _jsx(_components.code, {
            children: "links"
          }), ", and ", _jsx(_components.code, {
            children: "text styles"
          })]
        })
      }), "\n", _jsx(_components.div, {
        children: _jsxs(_components.table, {
          children: [_jsx(_components.thead, {
            children: _jsxs(_components.tr, {
              children: [_jsx(_components.th, {
                children: "Command"
              }), _jsx(_components.th, {
                children: "Description"
              })]
            })
          }), _jsxs(_components.tbody, {
            children: [_jsxs(_components.tr, {
              children: [_jsx(_components.th, {
                scope: "row",
                children: _jsx(Code, {
                  variant: "ghost",
                  children: "git status"
                })
              }), _jsxs(_components.td, {
                children: ["List all ", _jsx(_components.em, {
                  children: "new or modified"
                }), " files"]
              })]
            }), _jsxs(_components.tr, {
              children: [_jsx(_components.th, {
                scope: "row",
                children: _jsx(Code, {
                  variant: "ghost",
                  children: "git diff"
                })
              }), _jsxs(_components.td, {
                children: ["Show ", _jsx(_components.a, {
                  href: "https://workos.com",
                  children: "file"
                }), " differences that ", _jsx(_components.strong, {
                  children: "haven’t been"
                }), " staged"]
              })]
            })]
          })]
        })
      }), "\n"]
    }), _jsxs(_components.div, {
      tabIndex: "-1",
      "data-section-slug": "/demo/table/text-alignment",
      children: [_jsx(PermanentLink, {
        label: "Section titled Text alignment",
        hidden: true,
        href: "/demo/table/text-alignment",
        children: _jsx(_components.h2, {
          id: "/demo/table/text-alignment",
          children: "Text alignment"
        })
      }), "\n", _jsx(_components.div, {
        children: _jsxs(_components.table, {
          children: [_jsx(_components.thead, {
            children: _jsxs(_components.tr, {
              children: [_jsx(_components.th, {
                children: "Left-aligned"
              }), _jsx(_components.th, {
                align: "right",
                children: "Center-aligned"
              }), _jsx(_components.th, {
                align: "right",
                children: "Right-aligned"
              })]
            })
          }), _jsxs(_components.tbody, {
            children: [_jsxs(_components.tr, {
              children: [_jsx(_components.th, {
                scope: "row",
                children: "git status"
              }), _jsx(_components.td, {
                align: "right",
                children: "git status"
              }), _jsx(_components.td, {
                align: "right",
                children: "git status"
              })]
            }), _jsxs(_components.tr, {
              children: [_jsx(_components.th, {
                scope: "row",
                children: "git diff"
              }), _jsx(_components.td, {
                align: "right",
                children: "git diff"
              }), _jsx(_components.td, {
                align: "right",
                children: "git diff"
              })]
            })]
          })]
        })
      })]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


Demo

Accordion

Checklist

Code Block

Definition List

Punctuation

Replacements

Share Images

Table

Tabs

Docs

Command	Description
`git status`	List all new or modified files
`git diff`	Show file differences that haven’t been staged

Table

On this page

Default table

Formatting with `inline code blocks`, `links`, and `text styles`

Text alignment

First Header	Second Header
Content Cell	Content Cell
Content Cell	Content Cell

Left-aligned	Center-aligned	Right-aligned
git status	git status	git status
git diff	git diff	git diff