@cakemail-org/ui

Reusable React component library for all Cakemail web properties. Built with TypeScript, Tailwind CSS, and based on shadcn/ui and Radix UI primitives.

Installation

npm install @cakemail-org/ui @cakemail-org/design-tokens
# or
pnpm add @cakemail-org/ui @cakemail-org/design-tokens
# or
yarn add @cakemail-org/ui @cakemail-org/design-tokens

Setup

1. Configure Tailwind

// tailwind.config.js
module.exports = {
  presets: [require('@cakemail-org/ui/tailwind-preset')],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@cakemail-org/ui/**/*.{js,ts,jsx,tsx}',
  ],
};

2. Import Styles

// In your app entry point (e.g., _app.tsx, layout.tsx, or main.tsx)
import '@cakemail-org/ui/styles';

Components

Button

Primary, secondary, and tertiary button variants following Cakemail brand guidelines.

import { Button } from '@cakemail-org/ui';

<Button variant="primary">Get Started Free</Button>
<Button variant="secondary">Learn More</Button>
<Button variant="tertiary">Cancel</Button>

Props:

• variant: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link'
• size: 'default' | 'sm' | 'lg' | 'icon'
• All standard button HTML attributes

Hero

Hero section component with eyebrow, heading, description, and CTA.

import { Hero, Button } from '@cakemail-org/ui';

<Hero
  eyebrow="EMAIL MARKETING PLATFORM"
  title="Built to drive results"
  description="Cakemail delivers with precision—so every send hits, converts, and drives revenue."
  subtext="No credit card required"
  align="center"
>
  <Button variant="primary">Create Free Account</Button>
</Hero>

Props:

• eyebrow: Optional category label
• title: Main heading (required)
• description: Supporting text
• subtext: Small text below CTA
• align: 'center' | 'left'
• children: CTA buttons or other content

Card

Flexible card component for features, testimonials, etc.

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@cakemail-org/ui';

<Card>
  <CardHeader>
    <CardTitle>AI-Powered Content Generation</CardTitle>
    <CardDescription>
      Jumpstart campaign content creation with the help of AI.
    </CardDescription>
  </CardHeader>
  <CardContent>
    Additional content goes here...
  </CardContent>
</Card>

Eyebrow

Category label component (small, uppercase, purple text).

import { Eyebrow } from '@cakemail-org/ui';

<Eyebrow>EMAIL MARKETING PLATFORM</Eyebrow>

Usage Examples

Marketing Page

import { Hero, Button, Card, CardHeader, CardTitle, CardDescription } from '@cakemail-org/ui';

export default function MarketingPage() {
  return (
    <>
      <Hero
        eyebrow="EMAIL MARKETING PLATFORM"
        title="Built to drive results"
        description="Cakemail delivers with precision—so every send hits, converts, and drives revenue."
        subtext="No credit card required"
      >
        <Button variant="primary">Get Started Free</Button>
        <Button variant="secondary">Learn More</Button>
      </Hero>

      <section className="py-4xl">
        <div className="container mx-auto px-xl">
          <h2 className="text-center mb-3xl">Features</h2>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-xl">
            <Card>
              <CardHeader>
                <CardTitle>AI-Powered Content</CardTitle>
                <CardDescription>
                  Jumpstart campaign content creation with AI.
                </CardDescription>
              </CardHeader>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Personalized Messaging</CardTitle>
                <CardDescription>
                  Send content that adapts to each subscriber.
                </CardDescription>
              </CardHeader>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Auto-Branded Templates</CardTitle>
                <CardDescription>
                  Start with your brand, not a blank page.
                </CardDescription>
              </CardHeader>
            </Card>
          </div>
        </div>
      </section>
    </>
  );
}

Customization

All components support className prop for additional customization:

<Button className="w-full" variant="primary">
  Full Width Button
</Button>

<Hero className="bg-neutral-100" title="Custom Background">
  <Button>CTA</Button>
</Hero>

Design Tokens

Components automatically use design tokens from @cakemail-org/design-tokens. You can also use tokens directly in your custom components:

<div className="bg-brand-primary-purple text-white p-xl rounded-medium">
  Custom component using design tokens
</div>

TypeScript Support

All components are fully typed with TypeScript. Import types as needed:

import type { ButtonProps, HeroProps } from '@cakemail-org/ui';

Browser Support

• Chrome (latest 2 versions)
• Firefox (latest 2 versions)
• Safari (latest 2 versions)
• Edge (latest 2 versions)

Contributing

When adding new components:

1. Place base UI components in src/components/ui/
2. Place Cakemail-specific components in src/components/cakemail/
3. Export from src/index.ts
4. Follow existing patterns for props and styling
5. Use design tokens from @cakemail-org/design-tokens

License

UNLICENSED - Internal use only for Cakemail properties.