TypesReference

Expandable type definitions panel for component documentation, with inline code blocks, literal-value badges and cross-links into the API reference.

Playground

Configure and preview the types panel

Type Definitions

Local types used by this component.

3 types

Only referenced

Name	Kind	Category	Used by	Description
ComponentSize	type	helper	2	Standard size scale for all components.
MintProp	type	helper	0	Micro-interaction animation type.
MenuProps	interface	props	0	Props for the Menu select component.

Size

Title

Description

<TypesReference />

01 Examples

How TypesReference renders type definitions

Interface & Type Definitions

Button Types

Types extracted from the Button component source.

3 types

Only referenced

Name	Kind	Category	Used by	Description
ButtonVariant	type	variant	1	Visual weight of the Button component.
ComponentIntent	type	helper	2	Semantic color intent shared across all components.
ButtonProps	interface	props	0	Props interface for the Button component.

<TypesReference
  id="types-button"
  types={sampleTypes}
  title="Button Types"
  description="Types extracted from the Button component source."
/>

02 Empty State

What happens when no types are provided

No Types

Types

This component has no local types.

0 types

Only referenced

No types match the current filter.

<TypesReference
  id="types-empty"
  types={[]}
  title="Types"
  description="This component has no local types."
/>

03 Accessibility

A named region with its own heading

The panel renders a <section> labelled by the heading it draws from title, so it is one region in the landmark list rather than an unnamed block at the end of the page.

Expanding a definition is a button

Each row's toggle carries aria-expanded and is in the tab order with a visible focus ring. Definitions are collapsed by default, so a keyboard reader passes 20 type names rather than 20 type bodies.

Cross-links are in-page anchors

The "used by" links point at rows of the API table on the same page. They are ordinary anchors — they work with the keyboard, appear in a link list, and survive being copied out of the page.

Literal values are text, not colour

A union type's members render as badges whose meaning is in their text. Nothing on the panel is distinguished by colour alone.

04 API Reference

Complete list of component properties and their configurations

13 props 1 required

Prop	Type	Default	Description
`types` required	`LocalTypeDef[]`	—	Array of type definitions to display.
`class`	`string`	—	Extra CSS classes merged onto the root section element.
`description`	`string`	—	Descriptive text below the title.
`emptyState`	`Snippet`	—	Optional snippet rendered below the table when no types match the filter.
`id`	`string`	`'types'`	Anchor id of the rendered `<Section>`, and the stem its heading id is derived from (`{id}-title`). Keep the default on a component page: it is one half of the anchor pair `ApiReference` jumps to. A page rendering several instances gives each its own.
`marker`	`string \| boolean`	`true`	Editorial marker before the heading. `true` (the default) claims the page's next section number — the same automatic numbering every other `<Section marker>` on the page uses, so inserting or removing a section renumbers this one too. A string numbers it by hand; `false` leaves it unstamped. An instance rendered inside another section (a playground stage, a code example) never claims a number, whatever this says.
`meta`	`string`	—	Right-aligned counter in the section header, e.g. `"27 types"` — the same slot the API Reference section uses for its prop count. Unset by default; the toolbar above the table already states the count of what is visible.
`size`	smmdlg	`'md'`	Density of the expanded panel — code block, badges, footnotes. It does not reach the heading (that is `<Section intent="secondary">`, pinned so the types section reads as a sibling of the API Reference above it) nor the table rows (pinned to `sm`, so both reference tables on a page share one row rhythm).
`slotClasses`	`Partial<Record<TypesReferenceSlots, string>>`	—	Per-slot class overrides for internal elements.
`title`	`string`	—	Section heading text. There is no literal default to quote: it falls back to the localized `typesTitle` — "Types" in English, "Typen" in German.
`unstyled`	`boolean`	`false`	Strip all default tv() styles from internal slots.
`...HTMLAttributes<HTMLElement>` inherited	`HTMLAttributes`	—	HTML attributes (excluding: 'children')
`...TypesReferenceVariantProps` variant	`VariantProps`	—	Styling variants from TypesReferenceVariantProps

05 Types

Local type definitions used by this component.

5 types

Only referenced

Name	Kind	Category	Used by	Description
TypeUsedByRef	interface	helper	0	Reference to a prop that uses this type.
LocalTypeDef	interface	helper	1	A local type definition extracted from the component source.
TypesReferenceProps	interface	props	0	Displays expandable type definitions extracted from component source, with inline code blocks, literal value badges, and cross-links to the API Reference.
TypesReferenceSlots	type	variant	0	Slot names derived from the `tv()` config above — single source of truth for `slotClasses`.
TypesReferenceVariantProps	type	variant	0	—

06 Installation

Import

import { TypesReference } from '@urbicon-ui/docs';

llm.txt