Component Library

<TerminalCard title="Section.sh" icon="terminal" variant="primary">
  <div className="p-4 font-mono text-[12px]">
    Content here
  </div>
</TerminalCard>

<BackgroundCanvas />

<PageTransition>
  <YourPageContent />
</PageTransition>

<ProfileCard />

<IntroSection />

<SkillsSection />

<ExperienceSection />

<ProjectsSection />

<Breadcrumbs />

<TableOfContents headings={post.headings} />

<ReadingProgress />

<CodeCopyHandler>
  <MDXRemote source={rawMDX} components={...} />
</CodeCopyHandler>

<CollapsibleSummary title="cat summary.txt">
  <p>Content here</p>
</CollapsibleSummary>

<Callout type="info" title="Key Insight">
  Important conceptual information.
</Callout>

<Callout type="info" title="Takeaways" list="ol">
  1. First item
  2. Second item
</Callout>

<Banner type="info" title="Release" action={{ label: "Changelog", href: "#" }}>
  Version 2.0 is now available.
</Banner>

<IconButton icon="play_arrow" variant="default">Run</IconButton>
<IconButton icon="delete" variant="destructive">Delete</IconButton>
<IconButton icon="settings" variant="outline" size="icon" />

<Grid cols={2}>
  <GridItem title="Left" icon="terminal">
    Left column content
  </GridItem>
  <GridItem title="Right" icon="code">
    Right column content
  </GridItem>
</Grid>

<Columns first="center" second="right">
  <div>
    First column content (centered)
  </div>
  <div>
    Second column content (right-aligned)
  </div>
</Columns>

<HoverCard trigger={<span>Hover me</span>}>
  <div className="text-emerald-400">&gt; Rich content</div>
  <div className="text-zinc-400">Any React children work here.</div>
              </HoverCard>

<Quote from="John Doe" link="https://example.com">
  This is a blockquote component with attribution.
</Quote>

{/* Minimal: head defaults to children */}
<Tip tip="This is an inline tooltip">this text</Tip>

{/* Full: custom head, description, and docs link */}
<Tip head="Sharding" tip="Splits tenants into isolated instances" link="https://example.com">Sharding</Tip>

<Popup trigger={<span>Open</span>} variant="popover" title="Quick Info">
  Lightweight popover content
</Popup>

<Popup trigger={<span>Open</span>} variant="dialog" title="Details">
  Full dialog modal content
</Popup>

<Tooltip label="Explanation text">
  <span>Hover target</span>
</Tooltip>

<ColorPalette colors={[
  { name: 'Primary', hex: '#d0bcff' },
  { name: 'Emerald', hex: '#34d399' },
]} />

const columns = [
  { key: 'service', header: 'Service' },
  { key: 'status', header: 'Status' },
];
const rows = [
  { service: 'api-gateway', status: 'Healthy' },
];

<Table columns={columns} rows={rows} striped />

const nodes = [
  {
    id: 'src',
    label: 'src/',
    children: [
      { id: 'components', label: 'components/', children: [...] },
      { id: 'lib', label: 'lib/', children: [...] },
    ],
  },
];

<TreeTable nodes={nodes} showConnectors />

Task <StatusPill status="done" /> means complete.</Code>

Default: <Highlight>green text</Highlight>
Info:    <Highlight type="info">info text</Highlight>
Warning: <Highlight type="warn">warning text</Highlight>
Error:   <Highlight type="error">error text</Highlight>

// TSX — use children:
<TableCSV iconMap="..." columnColors="..." highlightCol="Status" striped>
Service | Status | Uptime
api-gateway | UP | 99.99
</TableCSV>

// MDX — use source prop:
<TableCSV source="Service|Status|Uptime
api-gateway|UP|99.99
auth-service|DEGRADED|98.50" />

<Sparkline
  data={[12, 48, 35, 62, 58, 81, 74]}
  color="#34d399"
  height={60}
  showDots
/>

<AsciiBarChart
  bars={[
    { label: 'JAN', value: 65 },
    { label: 'FEB', value: 78 },
  ]}
  maxLabel="REQUESTS_PER_MONTH"
/>

<CircularGauge
  value={87}
  label="CPU"
  color="#34d399"
  size={64}
/>

<FrequencyBars barCount={20} interval={200} />

<NetworkActivity nodeCount={7} interval={400} />

<MatrixRain speed={1} fadeOpacity={0.05} />

<TypewriterText
  phrases={['ACCESS_GRANTED', 'FIREWALL_BYPASSED']}
  speed={60}
  pause={1800}
/>

<GlitchText
  text="SYSTEM_ONLINE"
  interval={2000}
  glitchProbability={0.6}
/>

const messages = [
  { user: 'guest', text: 'Hello!', delay: 500 },
  { user: 'host', text: 'Hi there!', delay: 2000 },
];

<TerminalChat messages={messages} hostName="host" />

const rows = [
  { pid: 4217, user: 'root', cpu: '0.3', mem: '1.2', cmd: 'nginx' },
];

<TerminalTable rows={rows} />

const commits = [
  { hash: 'a3f2c9e', author: 'ounak', date: '2025-05-16', message: 'feat: add feature', files: 4, added: 87, deleted: 12 },
];

<ChangelogView commits={commits} />

const files = [
  {
    name: 'file.tsx',
    status: 'modified',
    hunks: [
      { type: '+', content: 'new line' },
      { type: '-', content: 'old line' },
    ],
  },
];

<CodeDiffView files={files} />