# Component reference

Search every documented public UI component, inspect its package entry, and jump to the real executable example that uses it.

## Independent public API coverage
The reference derives components and compound parts from emitted package declarations using dependency-aware TypeScript symbol resolution. Manifest exports supply the complete public-entry denominator. Example registration does not determine which components exist.

Each component links to a readable reference page and a usage guide. Callable components and parts must have registered JSX use or an explicit documented disposition. Optional presentation, advanced grouping and server-only resources have stated reasons; this is source coverage, not interaction certification.

## Properties and parts
Reference pages list public exports, resolved component and compound-part properties, event callbacks, descriptor defaults, rendering boundaries and links to actual usage. Common React/native HTML attributes are intentionally omitted from property tables. Installed TypeScript declarations remain authoritative for inherited attributes, overloads, generics and discriminated unions.

## Machine access
The same index is published as [components](/api/components.json). [All public entries](/api/public-entries.json), [example coverage](/api/coverage.json), [explicit dispositions](/api/component-dispositions.json) and the [API index](/api/index.json) expose the independent inventory and coverage without browser execution.

## Executable example source

```tsx
'use client';
import { useMemo, useState } from 'react';
import Link from 'next/link';
import components from '../generated/components.json';
import { Input } from '@fayegram-ai/faye-ui/controls/input';
import { Badge } from '@fayegram-ai/faye-ui/feedback/badge';
import { Text } from '@fayegram-ai/faye-ui/core/text';
import { Stack } from '@fayegram-ai/faye-ui/layout/layout';

export default function ComponentReference() {
  const [query, setQuery] = useState('');
  const normalized = query.trim().toLowerCase();
  const rows = useMemo(() => components.components.filter(item => !normalized || `${item.name} ${item.entry} ${item.pages.map(page => page.title).join(' ')}`.toLowerCase().includes(normalized)), [normalized]);
  return <Stack gap="4">
    <label className="docs-component-search">Filter components<Input type="search" value={query} onChange={event => setQuery(event.target.value)} placeholder="Button, dialog, table…"/></label>
    <Text as="p" size="sm" tone="muted" role="status">{rows.length} of {components.components.length} documented UI components</Text>
    <div className="docs-component-index" role="list">{rows.map(item => <article className="docs-component-card" role="listitem" key={`${item.entry}#${item.name}`}>
      <div className="docs-component-card-head"><strong>{item.name}</strong>{item.clientBoundary && <Badge tone="neutral">client</Badge>}</div>
      <code>{item.entry}</code>
      <div className="docs-component-links"><Link href={item.reference}>Properties and parts</Link>{item.pages.map(page => <Link key={page.slug} href={`/docs/${page.slug}/#live-example`}>{page.title}</Link>)}{!item.pages.length && <Link href={item.guide}>Usage guide</Link>}<a href={item.api}>API JSON</a></div>
    </article>)}</div>
  </Stack>;
}
```