Low-level building blocks for documentation pages. These are the same components used throughout this site to render API tables, code blocks, and interactive examples.
Renders a styled inline <code> element.
Accepts all standard HTML attributes and an optional class override.
Pass a src URL to the component. Use onchange to capture updates. The value prop accepts the full state object.
Renders a PropDef[] array as a structured API reference table.
Rows with the same group value are collected under a shared section header.
Use <code>…</code> tags inside description to render inline code fragments.
A collapsible accordion wrapper for API tables. Pass the title prop as the accordion header and place a DocApiTable as children.
Syntax-highlighted code block with support for single-file and multi-file (tabbed) display.
Wrap in a collapsible by setting title.
Languages supported: TypeScript, JavaScript, Svelte, Python, CSS, JSON, SQL, Go, Rust, and more.
import type { CalendarTypes } from '@atom-forge/ui';
type MyEvent = CalendarTypes.CalendarEvent & { notes: string };<script lang="ts">
import { Calendar } from '@atom-forge/ui';
import type { CalendarTypes } from '@atom-forge/ui';
let events = $state<CalendarTypes.CalendarEvent[]>([]);
function onEventMove(id: string, startDate: string, endDate: string) {
events = events.map(event => event.id === id ? { ...event, startDate, endDate } : event);
}
</script>
<Calendar {events} {onEventMove} onEventResize={onEventMove} />Component preview card with a collapsible Show Code section.
Pass a Svelte component via component — it is rendered without
props so the component must be self-contained. Import the source file with ?raw and pass it as code.