Newsletter Template Package

A React component library based on the Simple Design System from Figma, specifically designed for newsletter signup pages and content cards. Perfect for use with v0 and other React applications.

Installation

npm install @florianbonnet/newsletter-template

Quick Start

import { NewsletterTemplate } from '@florianbonnet/newsletter-template';

function App() {
  return (
    <NewsletterTemplate
      title="Welcome to our platform"
      description="Discover amazing features and join our community."
      onCardButtonClick={() => console.log('Card button clicked')}
      onNewsletterSubmit={(email) => console.log('Newsletter signup:', email)}
    />
  );
}

Components

NewsletterTemplate (Main Component)

The complete template matching the Figma design with both card and newsletter sections.

import { NewsletterTemplate } from '@florianbonnet/newsletter-template';

<NewsletterTemplate
  title="Introducing the redesigned Figma"
  description="Body text for whatever you'd like to say..."
  buttonText="Read this article"
  newsletterHeading="Subscribe to our Newsletter"
  emailPlaceholder="[email protected]"
  submitButtonText="Submit"
  onCardButtonClick={() => {}}
  onNewsletterSubmit={(email) => {}}
  showCard={true}
  showNewsletter={true}
/>

Card Component

A standalone card component for content display.

import { Card } from '@florianbonnet/newsletter-template';
import { Zap } from 'lucide-react';

<Card
  title="Power up your workflow"
  description="Boost your productivity with our powerful new tools."
  buttonText="Get started"
  icon={<Zap className="w-8 h-8 text-yellow-500" />}
  onButtonClick={() => {}}
/>

NewsletterForm Component

A standalone newsletter signup form.

import { NewsletterForm } from '@florianbonnet/newsletter-template';

<NewsletterForm
  heading="Stay updated"
  emailPlaceholder="Enter your email"
  submitButtonText="Subscribe"
  onSubmit={(email) => {}}
/>

Button Component

A customizable button component matching the design system.

import { Button } from '@florianbonnet/newsletter-template';
import { ArrowRight } from 'lucide-react';

<Button
  variant="primary"
  size="medium"
  onClick={() => {}}
  endIcon={<ArrowRight />}
>
  Get Started
</Button>

InputField Component

A form input field component.

import { InputField } from '@florianbonnet/newsletter-template';

<InputField
  type="email"
  value={email}
  onChange={setEmail}
  placeholder="Enter your email"
  label="Email Address"
  required
/>

Props Reference

NewsletterTemplate Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | string | "Introducing the redesigned Figma" | Card title | | description | string | "Body text for whatever..." | Card description | | buttonText | string | "Read this article" | Card button text | | newsletterHeading | string | "Subscribe to our Newsletter" | Newsletter section heading | | emailPlaceholder | string | "[email protected]" | Email input placeholder | | submitButtonText | string | "Submit" | Newsletter submit button text | | icon | React.ReactNode | <Star /> | Custom icon for the card | | onCardButtonClick | () => void | - | Card button click handler | | onNewsletterSubmit | (email: string) => void | - | Newsletter form submit handler | | className | string | "" | Custom CSS classes | | showCard | boolean | true | Show/hide card section | | showNewsletter | boolean | true | Show/hide newsletter section |

Styling

This package uses Tailwind CSS classes. Make sure you have Tailwind CSS configured in your project. The components are designed to be responsive and follow the exact specifications from the Figma design.

Required Dependencies

• React 16.8+
• Tailwind CSS (for styling)
• lucide-react (for icons)

Usage with v0

This package is specifically designed to work well with v0. You can import and use the components directly:

import { NewsletterTemplate, Card, NewsletterForm } from '@florianbonnet/newsletter-template';

// Use the complete template
<NewsletterTemplate />

// Or use individual components
<Card title="..." description="..." />
<NewsletterForm onSubmit={handleSubmit} />

Customization

Custom Icons

You can replace the default star icon with any React component:

import { Heart, Zap, Coffee } from 'lucide-react';

<NewsletterTemplate
  icon={<Heart className="w-8 h-8 text-red-500" />}
  // ... other props
/>

Custom Styling

Add custom classes to override default styles:

<NewsletterTemplate
  className="my-custom-class"
  // ... other props
/>

Development

Setup

git clone <repository-url>
cd newsletter-template-package
npm install

Storybook

View components in Storybook:

npm run storybook

Build

npm run build

Design System

This package follows the Simple Design System from Figma with the following specifications:

• Typography: Inter font family
• Colors: Neutral grays with high contrast
• Spacing: Consistent 4px grid system
• Border Radius: 8px for components, 16px for containers
• Layout: Flexbox-based responsive design

License

MIT

Contributing

1. Fork the repository
2. Create your feature branch
3. Make your changes
4. Add/update tests and stories
5. Submit a pull request

Support

For issues and questions, please visit our GitHub repository.