@burdenoff/website-sdk

Reusable React components and utilities for Burdenoff product websites.

Published automatically using npm trusted publishers (OIDC) - no long-lived tokens needed!

Features

• 🎨 Pre-built Components: Contact forms, newsletter subscriptions, pricing tables
• 🎯 SEO Optimized: Built-in meta tag management with React Helmet
• 🔧 Fully Configurable: All components accept props for complete customization
• 📱 Responsive Design: Mobile-first, works on all screen sizes
• 🎭 Theme Support: Built with Tailwind CSS and semantic tokens
• ✅ Type Safe: Written in TypeScript with full type definitions
• 🚀 Tree Shakeable: ESM and CJS builds for optimal bundle size

Installation

npm install @burdenoff/website-sdk

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-dom react-helmet-async react-hook-form @hookform/resolvers zod sonner

For UI components (if using separately):

npm install @radix-ui/react-label @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Quick Start

Contact Page

import { ContactPage } from '@burdenoff/website-sdk/components/contact'

function Contact() {
  return (
    <ContactPage
      productName="MyProduct"
      apiBaseUrl="https://api.myproduct.com"
      recaptchaSiteKey="your-recaptcha-site-key"
      contactEmail="[email protected]"
      contactPhone="+1 234 567 8900"
      officeAddress={{
        street: '123 Main St',
        city: 'San Francisco',
        state: 'CA',
        zip: '94102',
        country: 'United States',
      }}
      // Optional SEO props
      seoTitle="Contact Us"
      seoDescription="Get in touch with our team"
    />
  )
}

Newsletter Page

import { NewsletterPage } from '@burdenoff/website-sdk/components/newsletter'

function Newsletter() {
  return (
    <NewsletterPage
      productName="MyProduct"
      apiBaseUrl="https://api.myproduct.com"
      defaultEmail="[email protected]"
      layout="centered" // or "split"
      heroHeading="Stay Updated"
      heroSubtitle="Subscribe to our newsletter"
    />
  )
}

Pricing Page

import { PricingPage } from '@burdenoff/website-sdk/components/pricing'

function Pricing() {
  return (
    <PricingPage
      productName="MyProduct"
      productId="myproduct-123"
      apiBaseUrl="https://api.myproduct.com"
      appLoginUrl="https://app.myproduct.com/login"
      contactUrl="/contact"
      fallbackFeatures={{
        basic: ['Up to 5 dashboards', '10 data sources', 'Email support'],
        professional: ['Unlimited dashboards', 'API access', 'Priority support'],
        enterprise: ['Everything in Professional', 'Dedicated support', 'SLA guarantee'],
      }}
      seoTitle="Pricing Plans"
      seoDescription="Choose the perfect plan for your needs"
    />
  )
}

SEO Component

import { PageHead } from '@burdenoff/website-sdk/seo'

function AboutPage() {
  return (
    <>
      <PageHead
        title="About Us"
        description="Learn about our mission and team"
        productName="MyProduct"
        keywords="about, team, mission"
        image="/og-about.png"
        url="https://myproduct.com/about"
      />
      <div>{/* Page content */}</div>
    </>
  )
}

UI Components

import { Button, Input, Label, Textarea } from '@burdenoff/website-sdk/ui'

function Form() {
  return (
    <form>
      <div>
        <Label htmlFor="name">Name</Label>
        <Input id="name" type="text" placeholder="Your name" />
      </div>
      <div>
        <Label htmlFor="message">Message</Label>
        <Textarea id="message" placeholder="Your message" />
      </div>
      <Button type="submit">Send</Button>
    </form>
  )
}

Utilities

import { cn } from '@burdenoff/website-sdk/utils'

// Merge Tailwind CSS classes
const className = cn('px-4 py-2', isActive && 'bg-blue-500', 'rounded-lg')

API Integration

All components that require API integration expect the following endpoints:

Contact Form: POST /api/contact

Request:

{
  "name": "John Doe",
  "email": "[email protected]",
  "phone": "+1 234 567 8900",
  "subject": "Inquiry",
  "message": "Hello, I have a question...",
  "recaptchaToken": "token-here"
}

Response:

{
  "success": true,
  "message": "Message sent successfully"
}

Newsletter: POST /api/newsletter/subscribe

Request:

{
  "email": "[email protected]"
}

Response:

{
  "success": true,
  "message": "Successfully subscribed!"
}

Pricing: GET /api/plans

Headers:

x-product-id: your-product-id

Response:

{
  "success": true,
  "data": [
    {
      "id": "plan-1",
      "name": "Basic",
      "description": "Perfect for individuals",
      "price": 9.99,
      "currency": "USD",
      "duration": "monthly",
      "features": [...],
      "isActive": true
    }
  ]
}

TypeScript

All components are fully typed. Import types as needed:

import type { ContactPageProps } from '@burdenoff/website-sdk/components/contact'
import type { NewsletterPageProps } from '@burdenoff/website-sdk/components/newsletter'
import type { PricingProps, PlanCard } from '@burdenoff/website-sdk/components/pricing'
import type { PageHeadProps } from '@burdenoff/website-sdk/seo'
import type { ButtonProps } from '@burdenoff/website-sdk/ui'

Styling

This SDK uses Tailwind CSS for styling. Ensure your project has Tailwind configured with the following in your tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@burdenoff/website-sdk/**/*.{js,mjs}',
  ],
  // ... rest of your config
}

Required CSS Variables

Add these CSS variables to your global stylesheet for proper theming:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

Component Documentation

ContactPage

Full-featured contact form with reCAPTCHA v3 integration.

Props:

• productName (required): Product name for branding
• apiBaseUrl (required): Base URL for API calls
• recaptchaSiteKey (required): Google reCAPTCHA v3 site key
• contactEmail (required): Contact email address
• contactPhone (required): Contact phone number
• officeAddress (required): Office address object
• seoTitle, seoDescription, etc.: SEO metadata (optional)

NewsletterPage

Newsletter subscription component with rate limiting.

Props:

• productName (required): Product name
• apiBaseUrl (required): API base URL
• defaultEmail (required): Default contact email
• layout: 'centered' or 'split' (default: 'centered')
• rateLimitAttempts: Number of attempts before rate limiting (default: 3)
• rateLimitWindowMinutes: Rate limit window in minutes (default: 15)

PricingPage / PricingSection

Dynamic pricing tables with API integration and billing cycle toggle.

Props:

• productName (required): Product name
• productId (required): Product ID for API requests
• apiBaseUrl (required): API base URL
• appLoginUrl (required): App login URL for signup
• contactUrl: Contact page URL (default: '/contact')
• fallbackFeatures: Fallback features when API doesn't provide them

License

Proprietary - Copyright Burdenoff Consultancy Services Pvt. Ltd. 2025

Support

For support, email [email protected] or visit https://burdenoff.com