FoundryKit

Getting Started

Quick start guide for using FoundryKit blocks

Getting Started

Installation

Install the blocks package using your preferred package manager:

# Using pnpm (recommended)
pnpm add @foundrykit/blocks

# Using npm
npm install @foundrykit/blocks

# Using yarn
yarn add @foundrykit/blocks

Prerequisites

Before using FoundryKit blocks, ensure you have:

  • @foundrykit/primitives - Required for underlying UI primitives
  • @foundrykit/components - Required for high-level components
  • React 19+ - For React components and hooks
  • Tailwind CSS - For styling (v4 recommended)
  • TypeScript - For type safety (recommended)

Basic Usage

Import and use blocks in your application:

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

function MyApp() {
  return (
    <div className="space-y-16">
      <HeroMinimal
        title="Welcome to Our Platform"
        description="Build amazing applications with FoundryKit blocks"
        ctaText="Get Started"
        onCtaClick={() => console.log('CTA clicked')}
      />
      
      <Pricing
        plans={[
          {
            name: 'Basic',
            price: '$9',
            features: ['Feature 1', 'Feature 2', 'Feature 3']
          },
          {
            name: 'Pro',
            price: '$29',
            features: ['All Basic features', 'Feature 4', 'Feature 5']
          }
        ]}
        onPlanSelect={(plan) => console.log('Selected plan:', plan)}
      />
      
      <Testimonials
        testimonials={[
          {
            name: 'John Doe',
            role: 'Developer',
            content: 'FoundryKit blocks are amazing!',
            avatar: '/avatars/john.jpg'
          }
        ]}
      />
    </div>
  )
}

Package Structure

The blocks package is organized as follows:

package.json
tsconfig.json
README.md

Block Categories

Hero Sections

  • HeroMinimal - Clean, minimal hero section for landing pages

Pricing

  • Pricing - Pricing table with multiple plan options

Social Proof

  • Testimonials - Customer testimonials and reviews

Quick Examples

Hero Section

import { HeroMinimal } from '@foundrykit/blocks'

function LandingPage() {
  return (
    <HeroMinimal
      title="Transform Your Workflow"
      description="Streamline your development process with our comprehensive toolkit designed for modern applications."
      ctaText="Start Building"
      secondaryCtaText="Learn More"
      onCtaClick={() => window.location.href = '/signup'}
      onSecondaryCtaClick={() => window.location.href = '/docs'}
      className="min-h-screen"
    />
  )
}

Pricing Table

import { Pricing } from '@foundrykit/blocks'

function PricingPage() {
  const plans = [
    {
      name: 'Starter',
      price: '$9',
      period: 'per month',
      description: 'Perfect for small projects',
      features: [
        'Up to 5 projects',
        'Basic analytics',
        'Email support',
        '1GB storage'
      ],
      popular: false
    },
    {
      name: 'Professional',
      price: '$29',
      period: 'per month',
      description: 'Ideal for growing teams',
      features: [
        'Up to 25 projects',
        'Advanced analytics',
        'Priority support',
        '10GB storage',
        'Team collaboration'
      ],
      popular: true
    },
    {
      name: 'Enterprise',
      price: '$99',
      period: 'per month',
      description: 'For large organizations',
      features: [
        'Unlimited projects',
        'Custom analytics',
        '24/7 support',
        'Unlimited storage',
        'Advanced security',
        'Custom integrations'
      ],
      popular: false
    }
  ]

  return (
    <Pricing
      plans={plans}
      onPlanSelect={(plan) => {
        console.log('Selected plan:', plan.name)
        // Handle plan selection
      }}
      title="Choose Your Plan"
      description="Select the perfect plan for your needs"
    />
  )
}

Testimonials Section

import { Testimonials } from '@foundrykit/blocks'

function TestimonialsSection() {
  const testimonials = [
    {
      name: 'Sarah Johnson',
      role: 'Product Manager',
      company: 'TechCorp',
      content: 'FoundryKit blocks have significantly accelerated our development process. The components are well-designed and easy to customize.',
      avatar: '/avatars/sarah.jpg',
      rating: 5
    },
    {
      name: 'Michael Chen',
      role: 'Frontend Developer',
      company: 'StartupXYZ',
      content: 'The quality and consistency of these blocks is outstanding. They integrate seamlessly with our existing design system.',
      avatar: '/avatars/michael.jpg',
      rating: 5
    },
    {
      name: 'Emily Rodriguez',
      role: 'UX Designer',
      company: 'DesignStudio',
      content: 'These blocks provide the perfect foundation for building beautiful, accessible user interfaces quickly.',
      avatar: '/avatars/emily.jpg',
      rating: 5
    }
  ]

  return (
    <Testimonials
      testimonials={testimonials}
      title="What Our Customers Say"
      description="Join thousands of developers who trust FoundryKit"
    />
  )
}

Integration with Other Packages

Using Blocks with Primitives

Blocks can be customized using primitives:

import { HeroMinimal } from '@foundrykit/blocks'
import { Button, Card } from '@foundrykit/primitives'

function CustomHero() {
  return (
    <div className="relative">
      <HeroMinimal
        title="Custom Hero Section"
        description="This hero section uses custom primitives"
        ctaText="Get Started"
        onCtaClick={() => console.log('Custom CTA')}
      />
      
      {/* Custom overlay with primitives */}
      <div className="absolute inset-0 bg-black/20">
        <Card className="absolute top-4 right-4 p-4">
          <p className="text-white">Custom overlay content</p>
          <Button variant="outline" className="mt-2">
            Learn More
          </Button>
        </Card>
      </div>
    </div>
  )
}

Using Blocks with Components

Combine blocks with high-level components:

import { HeroMinimal, Pricing } from '@foundrykit/blocks'
import { SearchBar, Calendar } from '@foundrykit/components'

function LandingPageWithComponents() {
  return (
    <div className="space-y-16">
      <HeroMinimal
        title="Find Your Perfect Solution"
        description="Search through our comprehensive collection of tools and resources"
        ctaText="Start Searching"
        onCtaClick={() => console.log('Search CTA')}
      />
      
      {/* Custom search section */}
      <div className="container mx-auto px-4">
        <SearchBar
          placeholder="Search for tools, components, or resources..."
          onSearch={(query) => console.log('Searching:', query)}
        />
      </div>
      
      <Pricing
        plans={pricingPlans}
        onPlanSelect={handlePlanSelect}
      />
    </div>
  )
}

Customization

Styling Blocks

Customize block appearance using Tailwind CSS:

import { HeroMinimal } from '@foundrykit/blocks'

function CustomStyledHero() {
  return (
    <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-4xl font-bold mb-4"
      descriptionClassName="text-xl opacity-90 mb-8"
      ctaClassName="bg-white text-blue-600 hover:bg-gray-100"
    />
  )
}

Custom Block Composition

Create custom blocks by composing existing ones:

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

function CustomLandingPage() {
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="relative">
        <HeroMinimal
          title="Welcome to Our Platform"
          description="Build amazing applications with our comprehensive toolkit"
          ctaText="Get Started"
          onCtaClick={handleGetStarted}
        />
      </section>
      
      {/* Features Section */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">
            Why Choose Us
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center">
              <h3 className="text-xl font-semibold mb-4">Fast Development</h3>
              <p>Build applications quickly with our pre-built components</p>
            </div>
            <div className="text-center">
              <h3 className="text-xl font-semibold mb-4">Customizable</h3>
              <p>Easily customize components to match your design system</p>
            </div>
            <div className="text-center">
              <h3 className="text-xl font-semibold mb-4">Production Ready</h3>
              <p>Built with best practices and accessibility in mind</p>
            </div>
          </div>
        </div>
      </section>
      
      {/* Pricing Section */}
      <section className="py-16">
        <Pricing
          plans={pricingPlans}
          onPlanSelect={handlePlanSelect}
        />
      </section>
      
      {/* Testimonials Section */}
      <section className="py-16 bg-gray-50">
        <Testimonials
          testimonials={testimonials}
        />
      </section>
    </div>
  )
}

TypeScript Support

All blocks include full TypeScript support:

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

interface CustomHeroProps {
  title: string
  description: string
  ctaText: string
  onCtaClick: () => void
  customClass?: string
}

function CustomHero({ title, description, ctaText, onCtaClick, customClass }: CustomHeroProps) {
  return (
    <HeroMinimal
      title={title}
      description={description}
      ctaText={ctaText}
      onCtaClick={onCtaClick}
      className={customClass}
    />
  )
}

// Usage with proper typing
<CustomHero
  title="Welcome"
  description="Get started today"
  ctaText="Sign Up"
  onCtaClick={() => console.log('Clicked')}
  customClass="bg-blue-500"
/>

Next Steps