Contributing to the Wiki

content/
  your-article-name/
    index.mdx           # Main article content
    demos/
      index.ts          # Demo exports
      demo-name/
        index.tsx       # Demo component
        styles.module.css

---
title: "Your Article Title"
description: "Brief description for SEO and previews"
date: "2026-03-03"
author: "your-github-username"
icon: "code"
---

import { YourDemo } from "./demos";

<Figure>
  <YourDemo />
  <Caption>Description of what the demo demonstrates</Caption>
</Figure>

interface ButtonProps {
  variant?: "primary" | "secondary";
  children: ReactNode;
}

function Button({ variant = "primary", children }: ButtonProps) {
  return (
    <button className={styles.button} data-variant={variant}>
      {children}
    </button>
  );
}

export { Button };

.button {
  background: var(--gray-12);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-letter-spacing-14px);
}

.button[data-variant="secondary"] {
  background: var(--gray-6);
}

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
    transition: none;
  }
}

import { Button } from "@/components/button";

// Define components inline
function Button({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {
  return <button className={styles.button} onClick={onClick}>{children}</button>;
}

function Controls({ children }: { children: React.ReactNode }) {
  return <div className={styles.controls}>{children}</div>;
}

pnpm lint