CRabbit.Design System

Componentes

Cada componente con sus variantes, sus estados y un ejemplo de composición real. Todo construido con los tokens del sistema.

Button

44px de alto, flecha solo en el CTA principal

Variantes
Tamaños
Estados
En contexto

Revisamos un PR de muestra sin coste.

Ver código
<Button variant="primary">Hablar con ventas</Button>
<Button variant="secondary">Ver cómo funciona</Button>
<Button variant="ghost">Cancelar</Button>

Card

Brillo radial de acento en hover, arriba a la izquierda

Arquitectura

Límites de módulos, acoplamiento y decisiones difíciles de revertir.

Elevada

Superficie elevada, para bandas destacadas.

Sin brillo

Para rejillas densas donde el hover distrae.

Ver código
<Card>
  <CardTitle>Arquitectura</CardTitle>
  <CardBody>Límites de módulos y acoplamiento.</CardBody>
</Card>

Eyebrow

Mono, mayúsculas, punto de acento de 6px

Variantes

Revisión de código por humanos

Sin punto

Ver código
<Eyebrow>Revisión de código por humanos</Eyebrow>

Metric

Cifra en mono a 48px con etiqueta apagada

< 24hde respuesta en revisiones estándar
98%de hallazgos accionables
100%del veredicto lo firma un humano
Ver código
<Metric value="< 24h" label="de respuesta" accent />

Badge

Chip de borde fino, mono 12px

Variantes
TypeScriptAprobadoRequiere decisiónRiesgo
Ver código
<Badge variant="accent">Más elegido</Badge>

Input · Textarea · Field

Etiqueta en mono, mensaje de error en destructivo

Correo no válido.
Ver código
<Field label="Empresa" htmlFor="empresa">
  <Input id="empresa" placeholder="Northlane" />
</Field>

Select

Sobre Radix Select, con marca de acento en el elemento activo

Ver código
<Select>
  <SelectTrigger><SelectValue placeholder="Selecciona" /></SelectTrigger>
  <SelectContent><SelectItem value="20-50">20 a 50</SelectItem></SelectContent>
</Select>

Dialog

Única superficie con sombra permitida

Ver código
<Dialog>
  <DialogTrigger asChild><Button>Abrir</Button></DialogTrigger>
  <DialogContent><DialogTitle>Título</DialogTitle></DialogContent>
</Dialog>

Tabs

Subrayado de acento en la pestaña activa

Doce hallazgos accionables en el último ciclo, ordenados por impacto.
Ver código
<Tabs defaultValue="a"><TabsList><TabsTrigger value="a">A</TabsTrigger></TabsList></Tabs>

Tooltip

Texto en mono a 12px

Ver código
<Tooltip><TooltipTrigger asChild><Button /></TooltipTrigger><TooltipContent>…</TooltipContent></Tooltip>

Accordion

Icono de más que rota a cruz al abrir

Ver código
<Accordion type="single" collapsible>…</Accordion>

Table

Cabeceras en mono; cifras en mono

IncluyeEquipoEscala
PR al mes40160
Revisores12
Ver código
<Table><TableHead>…</TableHead><TableBody>…</TableBody></Table>

CodeBlock · ReviewComment

Números de línea apagados y resaltado de diff

billing/charge.ts
1 const invoice = await db.invoice.find(id)2-await gateway.charge(invoice.total)3+const key = idempotencyKey(invoice)4+await gateway.charge(invoice.total, { key })
Diego Salas · Principal Engineer

El cobro no es idempotente: si el webhook reintenta, el cliente paga dos veces.

Ver código
<CodeBlock filename="billing/charge.ts" lines={[{ text: "…", kind: "added" }]} />
<ReviewComment author="Diego Salas" comment="…" />

ReviewerCard

Avatar en gris que se colorea en hover

AN

Ana Restrepo

Staff Engineer · 12 años

GoPostgreSQL
DI

Diego Salas

Principal Engineer · 15 años

TypeScriptAWS
MA

Marta Nieves

Senior Security · 10 años

PythonAppSec
Ver código
<ReviewerCard name="Ana Restrepo" seniority="Staff Engineer" stacks={["Go"]} />

Testimonial

Cita a 24px, sin comillas decorativas

Dejamos de discutir estilo y empezamos a discutir decisiones.
Valeria Ocampo — VP of Engineering, Northlane
Ver código
<Testimonial quote="…" author="Valeria Ocampo" role="VP of Engineering" />

DiffReview

Micro-animación del hero; se detiene con prefers-reduced-motion

billing/charge.tsAprobado
1 async function chargeInvoice(invoiceId) {
2 const invoice = await db.invoice.find(invoiceId)
3- await gateway.charge(invoice.total)
Revisión senior

Cobro sin idempotencia: un reintento duplica el cargo.

4+ const key = idempotencyKey(invoice)
5+ await gateway.charge(invoice.total, { key })
6 return invoice.markPaid()
Revisión senior

Envolver cobro y marcado en una transacción.

7 }
Ver código
<DiffReview />

Layout · SectionHeading · BentoGrid

Container 1200px, secciones de 128/80px, rejilla de 12 columnas

Alcance

Qué revisamos

Una o dos palabras en acento por titular, nunca más.

Seguridad

Span de 8 columnas.

Arquitectura

Span de 4 columnas.

Rendimiento

Span de 6 columnas.

Deuda técnica

Span de 6 columnas.

Section con superficie elevada: reservada para una sola banda por página.

Ver código
<Section><Container><SectionHeading title={<>Qué <em>revisamos</em></>} /></Container></Section>

Reveal

Fundido y 12px de desplazamiento, una sola vez, escalonado 60ms

Retardo 0ms

Aparece al entrar en pantalla.

Retardo 60ms

Aparece al entrar en pantalla.

Retardo 120ms

Aparece al entrar en pantalla.

Ver código
<Reveal index={1}><Card /></Reveal>

Toaster

Se monta una vez por aplicación

Ver código
toast("Mensaje enviado", { description: "…" })