FoundryKit

Customization

How to customize FoundryKit blocks to match your design system

Customization

Learn how to customize FoundryKit blocks to match your design system and brand requirements.

Styling with Tailwind CSS

Basic Styling

Apply custom styles using Tailwind CSS classes:

import { HeroMinimal, Pricing, Testimonials } from '@foundrykit/blocks'

function CustomStyledBlocks() {
  return (
    <div className="min-h-screen">
      <HeroMinimal
        title="Custom Styled Hero"
        description="This hero has custom styling applied"
        ctaText="Get Started"
        onCtaClick={() => console.log('CTA clicked')}
        className="bg-gradient-to-r from-blue-600 to-purple-600 text-white"
        titleClassName="text-5xl font-bold mb-6 text-center"
        descriptionClassName="text-xl opacity-90 mb-8 text-center max-w-3xl mx-auto"
        ctaClassName="bg-white text-blue-600 hover:bg-gray-100 px-8 py-4 text-lg font-semibold rounded-lg"
      />
      
      <Pricing
        plans={pricingPlans}
        title="Custom Pricing"
        description="Styled to match your brand"
        onPlanSelect={handlePlanSelect}
        className="bg-gray-50 py-20"
      />
      
      <Testimonials
        testimonials={testimonials}
        title="Custom Testimonials"
        description="Beautiful customer reviews"
        className="bg-white py-20"
      />
    </div>
  )
}

Theme-Based Customization

Use CSS variables for consistent theming:

:root {
  /* Custom theme colors */
  --color-primary: oklch(0.55 0.15 250);
  --color-primary-foreground: oklch(0.98 0.005 250);
  --color-secondary: oklch(0.95 0.01 250);
  --color-accent: oklch(0.65 0.2 280);
  
  /* Custom spacing */
  --spacing-hero: 6rem;
  --spacing-section: 5rem;
  
  /* Custom typography */
  --font-size-hero-title: 3.5rem;
  --font-size-hero-description: 1.25rem;
}
import { HeroMinimal } from '@foundrykit/blocks'

function ThemeCustomizedHero() {
  return (
    <HeroMinimal
      title="Theme-Based Hero"
      description="Using custom CSS variables for consistent theming"
      ctaText="Get Started"
      onCtaClick={() => console.log('CTA clicked')}
      className="bg-[--color-primary] text-[--color-primary-foreground] py-[--spacing-hero]"
      titleClassName="text-[--font-size-hero-title] font-bold mb-6"
      descriptionClassName="text-[--font-size-hero-description] opacity-90 mb-8"
      ctaClassName="bg-[--color-accent] hover:bg-[--color-accent]/90 text-white px-8 py-3 rounded-lg"
    />
  )
}

Advanced Customization

Custom Component Wrappers

Create wrapper components for consistent customization:

import { HeroMinimal, Pricing, Testimonials } from '@foundrykit/blocks'

// Custom hero wrapper
function CustomHero({ title, description, ctaText, onCtaClick, variant = 'default' }) {
  const variants = {
    default: {
      className: "bg-gradient-to-r from-blue-600 to-purple-600 text-white",
      titleClassName: "text-4xl font-bold mb-6",
      descriptionClassName: "text-xl opacity-90 mb-8",
      ctaClassName: "bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg"
    },
    minimal: {
      className: "bg-white text-gray-900",
      titleClassName: "text-3xl font-semibold mb-4",
      descriptionClassName: "text-lg text-gray-600 mb-6",
      ctaClassName: "bg-blue-600 text-white hover:bg-blue-700 px-6 py-3 rounded-lg"
    },
    dark: {
      className: "bg-gray-900 text-white",
      titleClassName: "text-5xl font-bold mb-8",
      descriptionClassName: "text-2xl opacity-80 mb-10",
      ctaClassName: "bg-white text-gray-900 hover:bg-gray-100 px-8 py-4 text-lg font-semibold rounded-lg"
    }
  }

  const styles = variants[variant]

  return (
    <HeroMinimal
      title={title}
      description={description}
      ctaText={ctaText}
      onCtaClick={onCtaClick}
      className={styles.className}
      titleClassName={styles.titleClassName}
      descriptionClassName={styles.descriptionClassName}
      ctaClassName={styles.ctaClassName}
    />
  )
}

// Custom pricing wrapper
function CustomPricing({ plans, title, description, onPlanSelect, layout = 'grid' }) {
  return (
    <div className="bg-gray-50 py-20">
      <Pricing
        plans={plans}
        title={title}
        description={description}
        onPlanSelect={onPlanSelect}
        layout={layout}
        className="max-w-6xl mx-auto"
      />
    </div>
  )
}

// Custom testimonials wrapper
function CustomTestimonials({ testimonials, title, description, layout = 'grid' }) {
  return (
    <div className="bg-white py-20">
      <Testimonials
        testimonials={testimonials}
        title={title}
        description={description}
        layout={layout}
        className="max-w-4xl mx-auto"
      />
    </div>
  )
}

// Usage
function CustomizedLandingPage() {
  return (
    <div className="min-h-screen">
      <CustomHero
        title="Welcome to Our Platform"
        description="Build amazing applications with our toolkit"
        ctaText="Get Started"
        onCtaClick={() => console.log('CTA clicked')}
        variant="dark"
      />
      
      <CustomPricing
        plans={pricingPlans}
        title="Choose Your Plan"
        description="Select the perfect plan for your needs"
        onPlanSelect={handlePlanSelect}
      />
      
      <CustomTestimonials
        testimonials={testimonials}
        title="What Our Customers Say"
        description="Join thousands of developers who trust us"
      />
    </div>
  )
}

Responsive Customization

Customize blocks for different screen sizes:

import { HeroMinimal } from '@foundrykit/blocks'
import { useMediaQuery } from '@foundrykit/hooks'

function ResponsiveCustomHero({ title, description, ctaText, onCtaClick }) {
  const isMobile = useMediaQuery('(max-width: 768px)')
  const isTablet = useMediaQuery('(min-width: 769px) and (max-width: 1024px)')

  const getResponsiveStyles = () => {
    if (isMobile) {
      return {
        className: "bg-blue-600 text-white px-4 py-16",
        titleClassName: "text-2xl font-bold mb-4 text-center",
        descriptionClassName: "text-base opacity-90 mb-6 text-center",
        ctaClassName: "bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg w-full"
      }
    } else if (isTablet) {
      return {
        className: "bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-20",
        titleClassName: "text-3xl font-bold mb-6 text-center",
        descriptionClassName: "text-lg opacity-90 mb-8 text-center max-w-2xl mx-auto",
        ctaClassName: "bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 rounded-lg"
      }
    } else {
      return {
        className: "bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 text-white px-16 py-32",
        titleClassName: "text-5xl font-bold mb-8 text-center",
        descriptionClassName: "text-2xl opacity-90 mb-10 text-center max-w-3xl mx-auto",
        ctaClassName: "bg-white text-blue-600 hover:bg-gray-100 px-10 py-4 text-lg font-semibold rounded-lg"
      }
    }
  }

  const styles = getResponsiveStyles()

  return (
    <HeroMinimal
      title={title}
      description={description}
      ctaText={ctaText}
      onCtaClick={onCtaClick}
      className={styles.className}
      titleClassName={styles.titleClassName}
      descriptionClassName={styles.descriptionClassName}
      ctaClassName={styles.ctaClassName}
    />
  )
}

Brand Integration

Logo and Brand Elements

Integrate your brand elements into blocks:

import { HeroMinimal } from '@foundrykit/blocks'

function BrandedHero({ title, description, ctaText, onCtaClick, logo, brandColors }) {
  return (
    <div className="relative min-h-screen">
      {/* Brand background */}
      <div 
        className="absolute inset-0"
        style={{ 
          background: `linear-gradient(135deg, ${brandColors.primary} 0%, ${brandColors.secondary} 100%)`
        }}
      />
      
      {/* Logo overlay */}
      {logo && (
        <div className="absolute top-8 left-8 z-10">
          <img src={logo} alt="Company Logo" className="h-12 w-auto" />
        </div>
      )}
      
      {/* Hero content */}
      <div className="relative z-10">
        <HeroMinimal
          title={title}
          description={description}
          ctaText={ctaText}
          onCtaClick={onCtaClick}
          className="min-h-screen flex items-center justify-center text-white"
          titleClassName="text-5xl font-bold mb-8 text-center"
          descriptionClassName="text-xl opacity-90 mb-10 text-center max-w-3xl mx-auto"
          ctaClassName="bg-white text-gray-900 hover:bg-gray-100 px-8 py-4 text-lg font-semibold rounded-lg"
        />
      </div>
    </div>
  )
}

// Usage
<BrandedHero
  title="Welcome to Our Platform"
  description="Build amazing applications with our comprehensive toolkit"
  ctaText="Get Started"
  onCtaClick={() => console.log('CTA clicked')}
  logo="/logo.svg"
  brandColors={{
    primary: '#3B82F6',
    secondary: '#8B5CF6'
  }}
/>

Custom Color Schemes

Apply custom color schemes to blocks:

import { Pricing } from '@foundrykit/blocks'

function CustomColoredPricing({ plans, title, description, onPlanSelect, colorScheme }) {
  const colorVariants = {
    blue: {
      primary: 'bg-blue-600',
      secondary: 'bg-blue-100',
      text: 'text-blue-600',
      border: 'border-blue-200'
    },
    green: {
      primary: 'bg-green-600',
      secondary: 'bg-green-100',
      text: 'text-green-600',
      border: 'border-green-200'
    },
    purple: {
      primary: 'bg-purple-600',
      secondary: 'bg-purple-100',
      text: 'text-purple-600',
      border: 'border-purple-200'
    }
  }

  const colors = colorVariants[colorScheme] || colorVariants.blue

  return (
    <div className={`py-20 ${colors.secondary}`}>
      <Pricing
        plans={plans}
        title={title}
        description={description}
        onPlanSelect={onPlanSelect}
        className={`max-w-6xl mx-auto ${colors.border}`}
      />
    </div>
  )
}

Animation and Interactions

Animated Blocks

Add animations to blocks using Framer Motion or CSS:

import { HeroMinimal } from '@foundrykit/blocks'
import { motion } from 'framer-motion'

function AnimatedHero({ title, description, ctaText, onCtaClick }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.8 }}
    >
      <HeroMinimal
        title={title}
        description={description}
        ctaText={ctaText}
        onCtaClick={onCtaClick}
        className="bg-gradient-to-r from-blue-600 to-purple-600 text-white"
        titleClassName="text-5xl font-bold mb-6"
        descriptionClassName="text-xl opacity-90 mb-8"
        ctaClassName="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 rounded-lg transform hover:scale-105 transition-transform"
      />
    </motion.div>
  )
}

Interactive Elements

Add interactive elements to blocks:

import { Pricing } from '@foundrykit/blocks'
import { useState } from 'react'

function InteractivePricing({ plans, title, description, onPlanSelect }) {
  const [hoveredPlan, setHoveredPlan] = useState(null)

  return (
    <div className="py-20 bg-gray-50">
      <Pricing
        plans={plans}
        title={title}
        description={description}
        onPlanSelect={onPlanSelect}
        className="max-w-6xl mx-auto"
        planClassName={(plan, index) => `
          transition-all duration-300 transform
          ${hoveredPlan === index ? 'scale-105 shadow-2xl' : 'hover:scale-102 shadow-lg'}
          ${plan.popular ? 'ring-2 ring-blue-500' : ''}
        `}
        onPlanHover={(index) => setHoveredPlan(index)}
        onPlanLeave={() => setHoveredPlan(null)}
      />
    </div>
  )
}

Accessibility Customization

High Contrast Mode

Customize blocks for high contrast mode:

import { HeroMinimal } from '@foundrykit/blocks'

function AccessibleHero({ title, description, ctaText, onCtaClick }) {
  return (
    <HeroMinimal
      title={title}
      description={description}
      ctaText={ctaText}
      onCtaClick={onCtaClick}
      className="bg-white text-black border-2 border-black"
      titleClassName="text-4xl font-bold mb-6 text-black"
      descriptionClassName="text-lg mb-8 text-black"
      ctaClassName="bg-black text-white hover:bg-gray-800 px-8 py-3 rounded-lg border-2 border-black"
    />
  )
}

Reduced Motion

Respect user's motion preferences:

import { HeroMinimal } from '@foundrykit/blocks'
import { useMediaQuery } from '@foundrykit/hooks'

function MotionAwareHero({ title, description, ctaText, onCtaClick }) {
  const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')

  return (
    <HeroMinimal
      title={title}
      description={description}
      ctaText={ctaText}
      onCtaClick={onCtaClick}
      className="bg-gradient-to-r from-blue-600 to-purple-600 text-white"
      titleClassName="text-4xl font-bold mb-6"
      descriptionClassName="text-xl opacity-90 mb-8"
      ctaClassName={`
        bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 rounded-lg
        ${prefersReducedMotion ? '' : 'transform hover:scale-105 transition-transform'}
      `}
    />
  )
}

Next Steps