Composants

Ardo fournit encadrés, badges, cartes, onglets, accordéons, étapes, blocs de code, icônes et éléments de page d’accueil. Ils suivent les thèmes clair et sombre et fonctionnent au clavier. Les exemples utilisent la véritable mise en page : changez le thème ou la taille de fenêtre pour les examiner.

En MDX, utilisez Tip, Card et Tabs sans import. En TSX, importez leurs variantes préfixées par Ardo depuis ardo/ui, par exemple ArdoTip, ArdoCard et ArdoTabs. Les composants de page d’accueil nécessitent un import explicite dans les deux formats.

Encadrés

Choisissez la variante adaptée. Les cinq utilisent les tokens du thème et acceptent un titre personnalisé.

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

Ces variantes existent aussi comme alertes GitHub en Markdown simple.

Badges

Les badges ajoutent un statut compact dans le texte : Nouveau Stable Aperçu Obsolète Référence ✦Avec icône.

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

Cartes

Utilisez les cartes liées pour naviguer et les cartes statiques pour résumer. La grille passe à une colonne sur petit écran.

<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>

Onglets

Les onglets conviennent aux choix équivalents, tels les gestionnaires de paquets. Sélectionnez-en un ou utilisez Gauche, Droite, Début et Fin après l’avoir ciblé.

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>

Si vos composants créent les onglets en interne, définissez defaultValue sur Tabs et des valeurs value explicites correspondantes sur chaque paire.

Accordéons

Placez les explications facultatives dans un accordéon. Avec onlyOneOpen, ouvrir un élément ferme l’autre. Espace et Entrée ouvrent ou ferment ; Haut et Bas déplacent le focus.

<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>

Un accordéon indépendant peut être ouvert initialement :

Étapes

Entourez une liste ordonnée avec Steps. Chaque étape accepte texte, liens et blocs de code.

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

Blocs de code

Le bouton de copie prend le code sans titre ni numéros de ligne. Les blocs Markdown sont colorés au build ; CodeBlock accepte aussi directement une chaîne.

pnpm add ardo

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

CodeGroup regroupe les extraits liés avec leur nom de fichier :

import { defineArdoConfig } from "ardo/config"

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

# Welcome

Start with your first guide.

Les blocs Markdown acceptent titres, lignes mises en évidence, numéros et retours à la ligne pour les prompts ; voir Coloration syntaxique.

Dans les routes TSX

Utilisez ArdoCodeBlock directement dans les routes .tsx. Écrivez le code comme contenu enfant, sans littéral de gabarit ni échappement particulier :

import { ArdoCodeBlock } from "ardo/ui"

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

Le plugin ardo:codeblock-highlight traite ArdoCodeBlock avant l’analyse JSX. Le contenu accepte donc <, {, > et toute autre syntaxe. L’indentation commune est retirée.

La prop code et les littéraux de gabarit fonctionnent aussi :

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

Si language est dynamique, la coloration au build est ignorée et le code s’affiche en texte brut.

Icônes

Ardo inclut 50 icônes Streamline Core Line. Elles partagent la grille 14×14, les traits arrondis et currentColor des contrôles de navigation.

Les icônes enregistrées apparaissent en 14 et 28 pixels. Utilisez leur nom avec Icon ou importez le composant depuis 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

Utiliser dans MDX

Les 50 icônes Core sont disponibles sans import ni enregistrement :

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

Utiliser dans React

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

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

La taille par défaut est 24 px. size accepte un nombre ou une longueur CSS ; vous pouvez aussi définir width et height. Les icônes héritent de la couleur du texte et sont décoratives par défaut. Ajoutez aria-label ou aria-labelledby si elles transmettent une information sans texte.

ArdoIcon affiche une icône enregistrée par son nom, par exemple dans un lien :

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

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

Ajouter ou remplacer des icônes

Enregistrez d’autres composants SVG React et icônes de marque avec registerIcons() dans app/root.tsx:

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

registerIcons({ Github })

Utilisez ensuite <Icon name="Github" /> dans MDX. Un nom existant remplace son icône intégrée. Déclarez les autres bibliothèques comme dépendances directes et importez-les dans le module d’enregistrement.

getRegisteredIconNames() renvoie les noms intégrés et personnalisés pour valider la configuration.

Choisir une icône

Utilisez ces noms dans les imports ardo/icons ou dans MDX. Les icônes ci-dessous font 20 px.

Contenu et navigation

Développement et livraison

Infrastructure et sécurité

Personnes et communication

Conseils et découverte

Planification et maintenance

Icônes de marque et licence

Github, Linkedin, Npm, Twitter et Youtube sont également disponibles depuis ardo/icons, avec des alias Icon tels GithubIcon. Les marques conservent leurs proportions et les couleurs suivent currentColor.

Les icônes Core sont © Streamline Design Inc., utilisées sous Streamline Premium License au sein d’Ardo. La licence MIT d’Ardo ne les couvre pas. Consultez ICONS-LICENSE.md pour la redistribution et l’attribution.

Hero et fonctionnalités

Hero et Features composent les pages d’accueil. Ce hero compact présente texte secondaire et actions. Sur l’accueil, name fournit le titre principal ; image et badge de version sont facultatifs.

Votre projet, expliqué clairement.

Guides, référence API et exemples React. Un point de départ clair pour vos lecteurs.

Lire le guideVoir le code source

image={{ light, dark, alt }} fournit une image par thème. Une URL ou { light, alt } utilise la même image ; un élément React peut afficher une illustration intégrée.

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" }]}
/>

Mise en page et navigation

Cette page montre la véritable mise en page : en-tête, sections, barre latérale, fil d’Ariane, article, sommaire, actions et pied de page. Sur petit écran, ouvrez menu et sommaire. Testez la recherche et le thème dans l’en-tête.

Mise en page et navigation décrit la composition et Thèmes la palette. Les exemples héritent des réglages sans thème d’aperçu distinct.