Reference

Resolves TypeScript and JSDoc types from all module exports in a source file.

Union Type ButtonVariant

Type

"primary" | "secondary" | "danger"

Interface ButtonProps

Extends

React.ButtonHTMLAttributes<HTMLButtonElement>

Properties

PropertyTypeModifiers
variant?ButtonVariant—

Visual style to apply. Defaults to 'primary'.

Function getButtonVariantClassNames

Maps a ButtonVariant to a Tailwind utility‑class string.

Parameters

ParameterTypeDefault Value
variant?ButtonVariantprimary

Returns

string

Component Button

A minimal, accessible button that follows design‑system color tokens.

import { Button } from './Button'

export default function Example() {
  return (
    <Button variant="secondary" onClick={() => alert('Clicked!')}>
      Save changes
    </Button>
  )
}

Properties

ButtonProps

Returns

React.JSX.Element
import { Reference, type ReferenceComponents, Markdown } from 'renoun'

export default function () {
  return (
    <div
      css={{
        display: 'flex',
        flexDirection: 'column',
        gap: '3rem',
      }}
    >
      <Reference
        source="./fixtures/Button.tsx"
        baseDirectory={import.meta.url}
        components={components}
      />
    </div>
  )
}

const gapSizes = {
  small: '0.5rem',
  medium: '1rem',
  large: '2rem',
}

const components = {
  Column: ({ gap, ...props }) => (
    <div
      {...props}
      css={{
        display: 'flex',
        flexDirection: 'column',
        gap: gap ? gapSizes[gap] : undefined,
      }}
    />
  ),
  Row: ({ gap, ...props }) => (
    <div
      {...props}
      css={{
        display: 'flex',
        flexDirection: 'row',
        gap: gap ? gapSizes[gap] : undefined,
      }}
    />
  ),
  SectionHeading: ({ label, title, ...props }) => (
    <h3
      {...props}
      css={{
        display: 'flex',
        flexDirection: 'column',
        gap: '0.5rem',
        fontSize: 'var(--font-size-heading-2)',
        lineHeight: 'var(--line-height-heading-2)',
        fontWeight: 'var(--font-weight-heading)',
        marginBottom: '1.6rem',

        '& span': {
          textTransform: 'uppercase',
          letterSpacing: '0.1rem',
          fontSize: 'var(--font-size-title)',
          lineHeight: 1,
          color: 'var(--color-foreground-secondary)',
        },
      }}
    >
      <span>{label}</span> {title}
    </h3>
  ),
  Detail: (props) => (
    <div
      {...props}
      css={{
        display: 'flex',
        flexDirection: 'column',
        gap: '0.5rem',
        marginBottom: '1rem',
      }}
    />
  ),
  DetailHeading: (props) => (
    <h4
      {...props}
      css={{
        fontSize: 'var(--font-size-heading-3)',
        lineHeight: 'var(--line-height-heading-3)',
        fontWeight: 'var(--font-weight-heading)',
        marginBottom: '1.6rem',
      }}
    />
  ),
  Code: (props) => (
    <code
      {...props}
      css={{
        fontFamily: 'var(--font-family-mono)',
        color: 'var(--color-foreground-interactive)',
      }}
    />
  ),
  Description: (props) => (
    <Markdown
      {...props}
      components={{
        p: (props) => (
          <p
            {...props}
            css={{
              fontSize: 'var(--font-size-body-2)',
              lineHeight: 'var(--line-height-body-2)',
            }}
          />
        ),
        code: (props) => (
          <code
            {...props}
            css={{
              fontFamily: 'var(--font-family-mono)',
              color: 'var(--color-foreground-interactive)',
            }}
          />
        ),
      }}
    />
  ),
  Table: (props) => (
    <table
      {...props}
      css={{
        width: '100%',
        tableLayout: 'fixed',
        fontSize: 'var(--font-size-body-2)',
        lineHeight: 'var(--line-height-body-2)',
        borderBottom: '1px solid var(--color-separator)',
        borderCollapse: 'collapse',
      }}
    />
  ),
  TableRow: ({ hasSubRow, ...props }) => (
    <tr
      {...props}
      css={{
        borderBottom: '1px solid var(--color-separator)',
      }}
    />
  ),
  TableHeader: (props) => (
    <th
      {...props}
      css={{
        textAlign: 'left',
        fontWeight: 'var(--font-weight-heading)',
        padding: '0.5rem 0',
        color: 'var(--color-foreground)',
      }}
    />
  ),
  TableData: ({ index, hasSubRow, ...props }) => (
    <td
      {...props}
      css={{
        width: '100%',
        padding: '0.5rem 0',
        whiteSpace: 'nowrap',
        overflow: 'auto',

        ':nth-child(1)': {
          maxWidth: '30.77%',
        },
        ':nth-child(2)': {
          maxWidth: '38.46%',
        },
        ':nth-child(3)': {
          maxWidth: '30.77%',
        },
      }}
    />
  ),
} satisfies Partial<ReferenceComponents>

The Reference component resolves all module exports and outputs structured, accessible sections for components, functions, classes, interfaces, type aliases, mapped/intersection/union types, variables, and more. It’s fully headless meaning every piece of UI can be overridden via the components prop.

Filtering

If your types reference external libraries (like React), use filter to pull selected properties inline:

<Reference
  source="components/Button.tsx"
  filter={{
    moduleSpecifier: 'react',
    types: [{ name: 'ButtonHTMLAttributes' }],
  }}
/>

Styling and Layout

Override any element via components—from headings to table cells:

<Reference
  source="hooks/useHover.ts"
  components={{
    SectionHeading: (props) => <h3 style={{ fontWeight: 700 }} {...props} />,
    Code: (props) => <code className="code" {...props} />,
  }}
/>

API Reference

Last updated