Componentes

Ardo incluye avisos, insignias, tarjetas, pestañas, acordeones, pasos, bloques de código, iconos y elementos de portada. Siguen los temas claro y oscuro y funcionan con teclado. Los ejemplos usan el diseño real: cambia el tema o el tamaño de ventana para comprobarlos.

En MDX, usa Tip, Card y Tabs sin importarlos. En TSX, importa sus variantes con el prefijo Ardo desde ardo/ui, como ArdoTip, ArdoCard y ArdoTabs. Los componentes de portada requieren un import explícito en ambos formatos.

Avisos

Elige la variante adecuada. Las cinco usan los tokens del tema y admiten títulos propios.

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

Estas variantes también existen como alertas de GitHub en Markdown simple.

Insignias

Las insignias añaden un estado compacto en el texto: Nuevo Estable Vista previa Obsoleto Referencia ✦Con icono.

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

Tarjetas

Usa tarjetas enlazadas para navegar y estáticas para resumir. La cuadrícula pasa a una columna en pantallas pequeñas.

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

Pestañas

Las pestañas sirven para alternativas equivalentes, como gestores de paquetes. Selecciona una o usa Izquierda, Derecha, Inicio y Fin tras enfocarla.

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 tus componentes crean pestañas internamente, define defaultValue en Tabs y valores value explícitos coincidentes en cada pareja de pestaña y panel.

Acordeones

Coloca explicaciones opcionales en un acordeón. Con onlyOneOpen, abrir un elemento cierra el otro. Espacio y Entrar alternan el estado; Arriba y Abajo desplazan el foco.

<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 acordeón independiente puede empezar abierto:

Pasos

Envuelve una lista ordenada en Steps. Cada paso admite texto, enlaces y bloques de código.

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

Bloques de código

El botón copia el código sin título ni números de línea. Los bloques Markdown se resaltan durante el build; CodeBlock también acepta una cadena directamente.

pnpm add ardo

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

CodeGroup reúne fragmentos relacionados con sus nombres de archivo:

import { defineArdoConfig } from "ardo/config"

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

# Welcome

Start with your first guide.

Los bloques Markdown admiten títulos, líneas destacadas, numeración y ajuste de prompts; consulta Resaltado de sintaxis.

En rutas TSX

Usa ArdoCodeBlock directamente en rutas .tsx. Escribe el código como contenido hijo, sin literales de plantilla ni escapes especiales:

import { ArdoCodeBlock } from "ardo/ui"

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

El plugin ardo:codeblock-highlight procesa ArdoCodeBlock antes del analizador JSX. El contenido admite <, {, > y cualquier sintaxis. Se elimina la sangría común.

También funcionan la prop code y los literales de plantilla:

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

Si language es dinámico, se omite el resaltado del build y el código aparece como texto plano.

Iconos

Ardo incluye 50 iconos Streamline Core Line. Comparten la cuadrícula 14×14, trazos redondeados y currentColor de los controles de navegación.

Los iconos registrados aparecen a 14 y 28 píxeles. Usa su nombre con Icon o importa el componente desde 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

Usar en MDX

Los 50 iconos Core están disponibles sin imports ni registro:

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

Usar en 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" />

El tamaño predeterminado es 24 px. size admite números o longitudes CSS; también puedes definir width y height. Los iconos heredan el color del texto y son decorativos por defecto. Añade aria-label o aria-labelledby si transmiten información sin texto.

ArdoIcon muestra un icono registrado por su nombre, por ejemplo en un enlace:

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

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

Añadir o reemplazar iconos

Registra otros componentes SVG de React e iconos de marca con registerIcons() en app/root.tsx:

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

registerIcons({ Github })

Después usa <Icon name="Github" /> en MDX. Un nombre existente reemplaza su icono integrado. Declara otras bibliotecas como dependencias directas e impórtalas en el módulo de registro.

getRegisteredIconNames() devuelve los nombres integrados y propios para validar la configuración.

Elegir un icono

Usa estos nombres al importar desde ardo/icons o en MDX. Los iconos siguientes miden 20 px.

Contenido y navegación

Desarrollo y entrega

Infraestructura y seguridad

Personas y comunicación

Orientación y búsqueda

Planificación y mantenimiento

Iconos de marca y licencia

Github, Linkedin, Npm, Twitter y Youtube también están disponibles desde ardo/icons, con alias Icon como GithubIcon. Las marcas conservan sus proporciones y los colores siguen currentColor.

Los iconos Core son © Streamline Design Inc., usados bajo Streamline Premium License como parte de Ardo. No los cubre la licencia MIT de Ardo. Consulta ICONS-LICENSE.md para redistribución y atribución.

Hero y funciones

Hero y Features componen portadas. Este hero compacto muestra texto secundario y acciones. En el inicio, name aporta el título principal; imagen e insignia de versión son opcionales.

Tu proyecto, explicado con claridad.

Guías, referencia API y ejemplos React. Un punto de partida claro para tus lectores.

Leer la guíaVer el código fuente

image={{ light, dark, alt }} proporciona imágenes para ambos temas. Una URL o { light, alt } usa la misma imagen; un elemento React puede mostrar una ilustración integrada.

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

Diseño y navegación

Esta página muestra el diseño real: cabecera, secciones, barra lateral, migas, artículo, índice, acciones y pie. En pantallas pequeñas, abre el menú y el índice. Prueba la búsqueda y el tema en la cabecera.

Diseño y navegación describe la composición y Temas la paleta. Los ejemplos heredan los ajustes sin un tema de vista previa separado.