Komponenten

Ardo liefert Callouts, Badges, Karten, Tabs, Akkordeons, Schritte, Codeblöcke, Icons und Landingpage-Bausteine. Sie folgen dem hellen und dunklen Theme und sind per Tastatur bedienbar. Die Beispiele laufen im echten Website-Layout. Wechsle das Theme oder ändere die Fenstergröße, um das Verhalten zu sehen.

In MDX verwendest du etwa Tip, Card und Tabs ohne Import. In TSX importierst du die mit Ardo präfixierten Varianten aus ardo/ui, etwa ArdoTip, ArdoCard und ArdoTabs. Landingpage-Komponenten werden in beiden Formaten explizit importiert.

Callouts

Wähle die passende Variante. Alle fünf nutzen die Theme-Tokens der Website und unterstützen eigene Titel.

<Tip title="Keep related instructions together">Put the guidance next to the task.</Tip>

Dieselben Varianten gibt es als GitHub-Hinweise in reinem Markdown.

Badges

Badges ergänzen einen kompakten Status im Text: Neu Stabil Vorschau Veraltet Referenz ✦Mit Icon.

<Badge variant="success">Stable</Badge>
<Badge icon="✦">With icon</Badge>

Karten

Verlinkte Karten dienen der Navigation, statische einer kurzen Zusammenfassung. Das Raster wird auf schmalen Bildschirmen einspaltig.

<CardGroup cols={2}>
  <Card title="Getting Started" icon="Rocket" href="/guide/getting-started">
    Set up a documentation site.
  </Card>
  <Card title="Local components" icon="Code">
    Import components into your MDX routes.
  </Card>
</CardGroup>

Tabs

Tabs eignen sich für gleichwertige Alternativen wie Paketmanager. Wähle einen Tab oder fokussiere ihn und nutze Links, Rechts, Pos1 und Ende.

pnpm add ardo

<Tabs defaultValue="pnpm">
  <TabList>
    <Tab value="pnpm">pnpm</Tab>
    <Tab value="npm">npm</Tab>
  </TabList>
  <TabPanels>
    <TabPanel value="pnpm">pnpm add ardo</TabPanel>
    <TabPanel value="npm">npm install ardo</TabPanel>
  </TabPanels>
</Tabs>

Bei Komponenten, die Tabs intern erzeugen, setze defaultValue auf Tabs und passende explizite value-Werte auf Tab und Panel.

Akkordeons

Nutze Akkordeons für optionale Erklärungen. Mit onlyOneOpen schließt ein geöffnetes Element sein Geschwister. Leertaste und Eingabe schalten um; Auf und Ab wechseln zwischen Auslösern.

<AccordionGroup onlyOneOpen>
  <Accordion title="Can I use React components?" icon="Code">
    Yes. Import a component into an MDX route.
  </Accordion>
  <Accordion title="Does it work without a server?" icon="Server">
    Yes. The production build contains static files.
  </Accordion>
</AccordionGroup>

Ein einzelnes Akkordeon kann anfangs offen sein:

Schritte

Umschließe eine nummerierte Liste mit Steps. Schritte können Text, Links und Codeblöcke enthalten.

<Steps>
  <ol>
    <li>Create a home route.</li>
    <li>Write a guide.</li>
    <li>Build the site.</li>
  </ol>
</Steps>

Codeblöcke

Die Kopiertaste übernimmt Code ohne Titel und Zeilennummern. Markdown-Codeblöcke werden beim Build hervorgehoben; CodeBlock akzeptiert auch direkt einen String.

pnpm add ardo

<CodeBlock language="bash" title="terminal" code="pnpm add ardo" />

CodeGroup bündelt zusammengehörige Beispiele mit eigenen Dateinamen:

import { defineArdoConfig } from "ardo/config"

export default defineArdoConfig({ title: "My docs" })

# Welcome

Start with your first guide.

Markdown-Codeblöcke unterstützen Titel, markierte Zeilen, Zeilennummern und umbrechende Agenten-Prompts; siehe Syntaxhervorhebung.

In TSX-Routen

ArdoCodeBlock funktioniert direkt in .tsx-Routen. Schreibe Code als Kinder ohne Template-Literale oder besondere Escape-Zeichen:

import { ArdoCodeBlock } from "ardo/ui"

export default function MyPage() {
  return (
    <ArdoCodeBlock language="tsx">
      export function Hello() {
        return <div>Hello world!</div>
      }
    </ArdoCodeBlock>
  )
}

Das Vite-Plugin ardo:codeblock-highlight verarbeitet ArdoCodeBlock vor dem JSX-Parser. Der Inhalt darf deshalb <, {, > und andere Syntax enthalten. Gemeinsame Einrückung wird entfernt.

Auch die code-Prop und Template-Literale als Kinder funktionieren:

<ArdoCodeBlock code="const x = 42" language="typescript" />

Ist language dynamisch, entfällt die Build-Hervorhebung und der Code erscheint als Klartext.

Icons

Ardo enthält 50 Streamline Core Line-Icons für Inhalte. Sie nutzen dasselbe 14×14-Raster, runde Konturen und currentColor wie Seitenleiste und Kopfzeile.

Die registrierten Icons erscheinen hier mit 14 und 28 Pixeln. Nutze den Namen mit Icon oder importiere die Komponente aus ardo/icons.

• Archive
• ArrowRight
• BookOpen
• Bookmark
• Branch
• Bug
• Check
• Clock
• Cloud
• Code
• Copy
• Database
• Download
• ExternalLink
• FileCode
• FileText
• Flag
• Folder
• Globe
• Help
• History
• Image
• Info
• Languages
• Layers
• LayoutGrid
• Lightbulb
• Link
• List
• ListChecks
• Lock
• MessageCircle
• Package
• Pencil
• Plug
• Rocket
• Search
• Server
• Settings
• ShieldCheck
• Table
• Terminal
• TestTube
• TriangleAlert
• Upload
• User
• Users
• Workflow
• Wrench
• Zap

In MDX verwenden

Alle 50 Core-Icons stehen automatisch ohne Import oder Registrierung bereit:

<Icon name="Zap" size={20} />
<Card title="Deploy your site" icon="Rocket">
  Build the static output and publish it to your host.
</Card>

In React verwenden

import { BookOpen, Rocket, ShieldCheck } from "ardo/icons"

<BookOpen size={20} />
<Rocket size={28} className="launch-icon" />
<ShieldCheck size={20} aria-label="Security checks passed" />

Die Standardgröße ist 24 px. size akzeptiert Zahlen und CSS-Längen; alternativ setzt du width und height. Icons erben die Textfarbe und sind standardmäßig dekorativ. Nutze aria-label oder aria-labelledby, wenn sie ohne Text Informationen vermitteln.

ArdoIcon rendert registrierte Icons anhand ihres Namens, etwa in einem Link:

import { ArdoIcon, ArdoLink } from "ardo/ui"

export function LaunchLink() {
  return (
    <ArdoLink to="/guide/getting-started">
      <ArdoIcon name="Rocket" aria-hidden /> Get started
    </ArdoLink>
  )
}

Icons hinzufügen oder ersetzen

Mit registerIcons() in app/root.tsx registrierst du weitere SVG-React-Komponenten und Markenicons:

import { Github } from "ardo/icons"
import { registerIcons } from "ardo/ui"

registerIcons({ Github })

Danach funktioniert <Icon name="Github" /> in MDX. Ein vorhandener Name ersetzt das integrierte Icon. Andere Iconbibliotheken müssen direkte Abhängigkeiten sein und im Registrierungsmodul importiert werden.

getRegisteredIconNames() liefert integrierte und eigene Namen zur Validierung von Konfiguration.

Ein Icon auswählen

Nutze diese Namen beim Import aus ardo/icons oder in MDX. Die folgenden Icons sind 20 px groß.

Inhalt und Navigation

Entwicklung und Auslieferung

Infrastruktur und Sicherheit

Menschen und Kommunikation

Orientierung und Suche

Planung und Wartung

Markenicons und Lizenz

Github, Linkedin, Npm, Twitter und Youtube sind ebenfalls aus ardo/icons verfügbar, mit passenden Icon-Aliasnamen wie GithubIcon. Markenlogos behalten ihre Proportionen; Farben folgen currentColor.

Die Core-Icons sind © Streamline Design Inc. und werden unter der Streamline Premium License als Teil von Ardo genutzt. Ardos MIT-Lizenz gilt dafür nicht. Bedingungen und Namensnennung stehen in ICONS-LICENSE.md.

Hero und Features

Hero und Features bilden Landingpages. Dieser kompakte Hero zeigt Untertitel und Aktionen. Auf der Startseite setzt name die Hauptüberschrift; Bild und Versionsbadge sind optional.

Dein Projekt, verständlich erklärt.

Handbücher, API-Referenz und React-Beispiele. Ein klarer Einstieg für deine Leser.

Guide lesenQuellcode ansehen

image={{ light, dark, alt }} liefert Bilder für beide Themes. Eine URL oder { light, alt } nutzt ein Bild für beide; ein React-Element kann eine Inline-Illustration rendern.

import { ArdoHero as Hero } from "ardo/ui"

<Hero
  name="My project"
  text="Documentation for your team"
  actions={[{ text: "Read the guide", link: "/guide/getting-started" }]}
/>

Layout und Navigation

Diese Seite zeigt das echte Layout mit Kopfzeile, Abschnittswechsel, Seitenleiste, Breadcrumbs, Artikel, Inhaltsverzeichnis, Seitenaktionen und Fußzeile. Öffne auf schmalen Bildschirmen Menü und Inhaltsverzeichnis. Teste Suche und Theme direkt in der Kopfzeile.

Layout und Navigation zeigt die Komposition, Theming die Farben. Alle Beispiele übernehmen Änderungen ohne separates Vorschau-Theme.