Skip to content
fayeuiStatic / 0.1.0
LLMs
Components / Static edition

Component reference

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

MarkdownAPI JSONLLM indexLive examplesExample source

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. All public entries, example coverage, explicit dispositions and the API index expose the independent inventory and coverage without browser execution.

Live examples

Try the controls below, then read or copy the complete example to adapt it for your application.

155 of 155 documented UI components

Buttonclient
@fayegram-ai/faye-ui/controls/button
Properties and partsAccessibility and input behaviorAdvanced field compositionsApplication patternsAsynchronous workflowsBrowser and interaction utilitiesButtons and actionsCards, media and composed dialogsConsumer interactions and navigationCustomization sheetsDialogs, modal and drawersFeedback and statusInteractive consumer experienceLocalizationMenus and contextual actionsMotion and interactive navigationMotion and presenceNavigation and disclosurePortals and floating contentSelect and autocompleteText fields and formsTheme and color systemTheme studioAPI JSON
Inline
@fayegram-ai/faye-ui/layout/layout
Properties and partsAccessibility and input behaviorAdvanced field compositionsAsynchronous workflowsButtons and actionsCheckboxes, radios and switchesConsumer interactions and navigationCustomization sheetsDialogs, modal and drawersFeedback and statusInteractive consumer experienceLayout primitivesMotion and interactive navigationMotion and presenceNumeric and specialized inputPortals and floating contentText fields and formsTheme and color systemTypography and surfacesAPI JSON
Stack
@fayegram-ai/faye-ui/layout/layout
Properties and partsAccessibility and input behaviorAdvanced field compositionsAll components galleryApplication patternsAsynchronous workflowsButtons and actionsCards, media and composed dialogsCheckboxes, radios and switchesComponent referenceConsumer interactions and navigationCustomization sheetsDialogs, modal and drawersFeedback and statusInteractive consumer experienceLayout primitivesMotion and interactive navigationNumeric and specialized inputPortals and floating contentSelect and autocompleteText fields and formsTheme and color systemTypography and surfacesAPI JSON
Read the complete example
'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>;
}