Component showcase
Compare every Ginko Docs prose component in quiet and tint appearances.
This laboratory covers every public authored tag. Surface families appear in both appearances; structural helpers appear once.
Notices and prose
Note
GFM alerts stay readable outside Ginko Docs.
Warning
Structured values and booleans belong in component YAML.
Quiet
One content model
Navigation, search, and agent Markdown derive from the same document.
Tint
One content model
Navigation, search, and agent Markdown derive from the same document.
Validation passed
The content and translated identities agree.
Check translations
Keep equivalent locale trees structurally aligned.
Route unavailable
The collection contains no matching document.
Editorial idea
Lead with a working example.
Quiet
Tint
Excerpt
A canonical document supplies every reader and agent output.
Excerpt
A canonical document supplies every reader and agent output.
Ginko Docs turns structured Markdown into a documentation site for readers and software agents. The drop cap gives longer prose a distinct opening without changing its source structure.
Press ⌘ + K to open search.
> [!NOTE]
> Native GFM alert.
::note{title="A semantic notice" appearance="quiet"}
Prose stays in the slot.
::
::aside{label="Context" appearance="tint"}
Supporting prose.
::
::excerpt{label="Excerpt" source="Source title" appearance="tint"}
Quoted prose.
::
::dropcap{lines="3"}
Opening paragraph.
::
Press :kbd[⌘] + :kbd[K].Accordions
Quiet
Ginko Content owns identity, routes, locales, search, and agent output.
Ginko Docs owns the shell and component system.
Tint
Ginko Content owns identity, routes, locales, search, and agent output.
Ginko Docs owns the shell and component system.
Full Markdown
Accordion bodies accept ordinary Markdown and nested Ginko components.
- Lists retain their structure.
- Interactive children retain their state when the accordion closes.
Add the content
Write prose and nested components in the item body.
Verify the result
Close and reopen the accordion without losing its content.
::accordion{appearance="tint"}
:::accordion-item{value="portable" title="Is the syntax portable?"}
The answer is authored as prose.
:::
::Cards and links
Quiet
Author content
Write stable Markdown.
Use components when structure improves comprehension.
Configure the site
Choose identity and navigation.
Consumer config merges with layer defaults.
Tint
Author content
Write stable Markdown.
Use components when structure improves comprehension.
Configure the site
Choose identity and navigation.
Consumer config merges with layer defaults.
Quiet
Tint
::cards{cols="2" appearance="quiet"}
:::card{title="Author content" icon="lucide:file-pen-line" to="$docs/authoring/write-content"}
Card prose.
:::
::
::read-more{title="Continue reading" appearance="tint"}
---
links:
- title: Content configuration
to: $docs/reference/content-config
icon: lucide:database
---
::Layout
Centered content keeps a deliberately narrow measure.
Content
Markdown defines published documents.
Presentation
The layer renders them through one shell.
::center{size="lg" type="border"}
Centered prose.
::
::layout{type="border"}
:::column{size="sm"}
First column.
:::
:::column{size="md"}
Second column.
:::
::Steps and timeline
Quiet
Tint
Quiet
Consistent prose
September 2026ActiveQuiet and tint share markup, states, and accessibility behavior.
Publish
NextThe packed release gate certifies the result.
Tint
Consistent prose
September 2026ActiveQuiet and tint share markup, states, and accessibility behavior.
Publish
NextThe packed release gate certifies the result.
::steps{mode="numbered" appearance="quiet"}
### Install
Add the packages.
### Publish
Build the site.
::
::timeline{appearance="tint"}
:::timeline-item
---
date: July 2026
title: Active milestone
active: true
---
Milestone prose.
:::
::Tabs and code
Quiet
Readers get searchable localized pages.
Tint
Readers get searchable localized pages.
Line layout
Install with
pnpm add -D @lupinum/ginko-docs.Quiet code group
pnpm add -D @lupinum/ginko-docsTint code group
pnpm add -D @lupinum/ginko-docsQuiet collapse
export default defineAppConfig({
ginkoDocs: {
prose: { appearance: "quiet", components: { tabs: "tint" } },
},
});Tint collapse
export default defineAppConfig({
ginkoDocs: {
prose: { appearance: "quiet", components: { tabs: "tint" } },
},
});Quiet code tree
export default defineAppConfig({ ginkoDocs: { prose: { appearance: "quiet" } } });Tint code tree
export default defineAppConfig({ ginkoDocs: { prose: { appearance: "quiet" } } });::tabs{layout="line" appearance="quiet"}
:::tab{label="pnpm" icon="logos:pnpm"}
Install instructions.
:::
::
::code-group{appearance="quiet"}
```sh [pnpm]
pnpm add -D @lupinum/ginko-docs
```
::
::collapse{appearance="tint"}
```ts [app.config.ts]
export default defineAppConfig({});
```
::
::code-tree{defaultValue="app.config.ts" appearance="tint"}
```ts [app.config.ts]
export default defineAppConfig({});
```
::Files and API
Quiet
- app
- app.config.tssite identity
- components
- FeaturePanel.vue
- content
- 1.getting-started.md
Tint
- app
- app.config.tssite identity
- components
- FeaturePanel.vue
- content
- 1.getting-started.md
Quiet
GET/api/content/docs
body: MarkdownRoot required Validated Markdown AST.
toc?: TocDerived heading outline.
Tint
GET/api/content/docs
body: MarkdownRoot required Validated Markdown AST.
toc?: TocDerived heading outline.
::files{appearance="tint"}
---
active: content/1.index.md
annotations:
content/1.index.md: landing document
---
- `content`
- `1.index.md`
::
::api{method="GET" path="/api/content/docs" appearance="tint"}
---
groups:
- label: Response
entries:
- name: body
annotation: MarkdownRoot
required: true
description: Validated Markdown AST.
---
::Images
Plain Markdown image
Quiet figure
Tint figure
::figure{src="/images/content-demo-detail.png" alt="Descriptive alternative" caption="Explicit caption." aspect="video" fit="cover" appearance="quiet"}
::Quiz
Quiet
Knowledge check
Answer to reveal the explanation.
Which package owns document identity?
Tint
Knowledge check
Answer to reveal the explanation.
Which package owns document identity?
::quiz{title="Knowledge check" appearance="tint"}
:::quiz-question
---
question: Which answer is correct?
options:
- text: This one
correct: true
- text: Not this one
correct: false
---
The body explains the answer.
:::
::In-page navigation
::toc{title="On this page"}
::