Peraa

import { Button } from '@peraa/react';

<Button intent="primary">Primary</Button>
<Button intent="secondary">Secondary</Button>
<Button intent="tertiary">Tertiary</Button>

// With additional props
<Button intent="primary" size="lg">
  Large Button
</Button>
<Button intent="primary" disabled>
  Disabled
</Button>

<button class="peraa-btn-primary">
  Primary
</button>

<button class="peraa-btn-secondary">
  Secondary
</button>

<button class="peraa-btn-tertiary">
  Tertiary
</button>

<!-- With sizes -->
<button class="peraa-btn-primary peraa-btn-sm">Small</button>
<button class="peraa-btn-primary peraa-btn-lg">Large</button>

import { Badge } from '@peraa/react';

<Badge>Default</Badge>
<Badge variant="brand">Brand</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>

// With props
<Badge variant="brand" size="sm">Small</Badge>
<Badge variant="success" outline>Outlined</Badge>

<span class="peraa-badge">Default</span>
<span class="peraa-badge-brand">Brand</span>
<span class="peraa-badge-success">Success</span>
<span class="peraa-badge-warning">Warning</span>
<span class="peraa-badge-error">Error</span>

<!-- With sizes -->
<span class="peraa-badge peraa-badge-sm">Small</span>
<span class="peraa-badge peraa-badge-lg">Large</span>

import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@peraa/react';

<Tabs defaultTab="overview">
  <TabList>
    <Tab id="overview">Overview</Tab>
    <Tab id="features">Features</Tab>
    <Tab id="pricing">Pricing</Tab>
  </TabList>
  <TabPanels>
    <TabPanel id="overview">
      Overview content here
    </TabPanel>
    <TabPanel id="features">
      Features content here
    </TabPanel>
    <TabPanel id="pricing">
      Pricing content here
    </TabPanel>
  </TabPanels>
</Tabs>

<div class="peraa-tabs-list">
  <button class="peraa-tab peraa-tab-active">Tab 1</button>
  <button class="peraa-tab">Tab 2</button>
  <button class="peraa-tab">Tab 3</button>
</div>
<div class="peraa-tab-panel">
  Content for the active tab
</div>

import { Card, CardImage, CardContent, CardTitle, CardDescription } from '@peraa/react';

<Card interactive>
  <CardImage src="/image.jpg" alt="Description" />
  <CardContent>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>
      Brief description of the card content.
    </CardDescription>
  </CardContent>
</Card>

// Variants
<Card horizontal>...</Card>
<Card compact>...</Card>
<Card featured>...</Card>

<div class="peraa-card-interactive">
  <img src="..." class="peraa-card-image" />
  <div class="peraa-card-content">
    <h3 class="peraa-card-title">Card Title</h3>
    <p class="peraa-card-description">
      Description text here.
    </p>
  </div>
</div>

<!-- Variants -->
<div class="peraa-card-featured">...</div>

import { Articles, Article } from '@peraa/react';

<Articles>
  <Article
    href="/article"
    title="Design Systems Must Evolve"
    description="Excerpt text..."
    date="April 2026"
    readingTime="5 min read"
  />
</Articles>

<div class="peraa-articles">
  <article class="peraa-article">
    <a href="/article" class="peraa-article__link">
      <h2 class="peraa-article__title">Title</h2>
      <p class="peraa-article__description">Excerpt...</p>
      <div class="peraa-article__meta">
        <span class="peraa-article__date">April 2026</span>
      </div>
    </a>
  </article>
</div>

import { FlipCard } from '@peraa/react';

<FlipCard
  front={<div>Front content</div>}
  back={<div>Back content</div>}
/>

<div class="peraa-flip-card">
  <div class="peraa-flip-card__inner">
    <div class="peraa-flip-card__front">...</div>
    <div class="peraa-flip-card__back">...</div>
  </div>
</div>

import { Field, Input, Textarea, Select } from '@peraa/react';

<Field label="Full name">
  <Input type="text" placeholder="Enter your name" />
</Field>

<Field label="Email" error="Invalid email address.">
  <Input type="email" status="error" />
</Field>

<Field label="Message">
  <Textarea rows={4} />
</Field>

<div class="peraa-field">
  <label class="peraa-label" for="name">
    Full name
  </label>
  <input class="peraa-input" type="text" id="name">
</div>

import { Alert } from '@peraa/react';

<Alert variant="info" title="Heads up">
  Message text here.
</Alert>

<Alert variant="success" title="All done">
  Changes saved.
</Alert>

<Alert variant="error" title="Something went wrong">
  Please try again.
</Alert>

<div class="peraa-alert peraa-alert--success">
  <div class="peraa-alert__content">
    <p class="peraa-alert__title">All done</p>
    <p class="peraa-alert__message">Changes saved.</p>
  </div>
</div>

<div class="peraa-glass" style="padding: var(--peraa-spacing-8);">
  Card content
</div>

<!-- Workshop Inquiry trigger -->
<button data-modal-trigger="workshop">Book a Workshop</button>

<!-- Start a Conversation trigger -->
<button data-modal-trigger="conversation">Start a Conversation</button>

<!-- Link trigger (footer pattern) -->
<a href="#" data-modal-trigger="conversation">
  trldesignr@gmail.com
</a>