Skip to main content
Urbicon UI

Doc Components

The documentation kit this site is built with — layout shell, code examples, playgrounds, and generated API tables.

Overview

@urbicon-ui/docs is the documentation kit this site is built with — every page you are reading composes exactly these components. Use it to document your own component library or design system with the same editorial look: a page shell with scroll-spy navigation, live code examples, an interactive prop playground, and API tables fed by generated metadata.

Page Anatomy

The structural components a documentation page is assembled from.

DocsLayout

Page shell for documentation, with a hero header, breadcrumb strip, table of contents and content column.

Section

Anchored content section with an editorial marker, title, subtitle and badges.

TableOfContents

Sticky page navigation that tracks scroll position and links on to related pages.

Content Blocks

The building blocks that fill a page: examples, playgrounds, and reference tables.

ApiReference

Sortable, filterable table of a component API with type cross-links and source badges.

CodeExample

A titled code snippet with an optional live preview rendered above it.

CodePanel

Collapsible code block with syntax highlighting and copy-to-clipboard.

InfoCard

Inline callout for notes, tips and warnings inside documentation prose.

InlineCode

Renders a plain string, turning its backtick-wrapped spans into code.

NoteList

Card of short titled notes separated by rules — the accessibility block of a docs page.

PlaygroundConfigurator

Live component playground pairing a preview stage with prop controls and a generated snippet.

TypesReference

Expandable table of the local type definitions a component API refers to.

Installation

Install

bun add -d @urbicon-ui/docs

A minimal documentation page

<script lang="ts">
  import { DocsLayout, Section, CodeExample, ApiReference } from '@urbicon-ui/docs';
  import { componentData } from './api'; // generated by docs-gen
</script>

<DocsLayout title="Button" description="…" navigation={[…]}>
  <Section id="examples" title="Examples">
    <CodeExample title="Basic">
      <Button>Click me</Button>
    </CodeExample>
  </Section>
  <Section id="api" title="API Reference">
    <ApiReference props={componentData.props} />
  </Section>
</DocsLayout>