Blocks

The @foundrykit/blocks package provides pre-built UI blocks and page sections that can be quickly assembled to create complete pages and layouts.

Features

• Ready-to-use blocks: Complete UI sections that can be dropped into your pages
• Composable design: Blocks are built from primitives and components
• Customizable: Easy to customize and extend to match your design
• Responsive: All blocks are responsive and mobile-friendly
• Accessible: Built with accessibility in mind

Installation

pnpm add @foundrykit/blocks

Usage

import { HeroBlock, FeatureBlock, CTABlock } from '@foundrykit/blocks'

function HomePage() {
  return (
    <div>
      <HeroBlock
        title="Welcome to Our Platform"
        subtitle="Build amazing things with FoundryKit"
        ctaText="Get Started"
        onCtaClick={() => console.log('CTA clicked')}
      />
      
      <FeatureBlock
        features={[
          {
            title: "Feature 1",
            description: "Description of feature 1",
            icon: "star"
          },
          // ... more features
        ]}
      />
      
      <CTABlock
        title="Ready to get started?"
        subtitle="Join thousands of developers"
        primaryCta="Sign Up"
        secondaryCta="Learn More"
      />
    </div>
  )
}

Available Blocks

Hero Blocks

• HeroBlock - Main hero section with title, subtitle, and CTA
• HeroWithImage - Hero section with background image
• HeroWithVideo - Hero section with video background
• SplitHero - Two-column hero layout

Feature Blocks

• FeatureBlock - Feature showcase with icons and descriptions
• FeatureGrid - Grid layout for multiple features
• FeatureComparison - Feature comparison table
• FeatureTestimonial - Feature with customer testimonial

Content Blocks

• ContentBlock - Rich content section with text and media
• ContentWithSidebar - Content with sidebar navigation
• ContentGrid - Grid layout for content items
• ContentTimeline - Timeline layout for content

Navigation Blocks

• HeaderBlock - Site header with navigation
• FooterBlock - Site footer with links and info
• SidebarBlock - Sidebar navigation
• BreadcrumbBlock - Breadcrumb navigation

Form Blocks

• ContactFormBlock - Contact form with validation
• NewsletterBlock - Newsletter signup form
• LoginFormBlock - User login form
• SignupFormBlock - User registration form

Media Blocks

• GalleryBlock - Image gallery with lightbox
• VideoBlock - Video player with controls
• CarouselBlock - Image carousel/slider
• MediaGrid - Grid layout for media items

Block Categories

Layout Blocks

Blocks for page structure and layout organization.

Content Blocks

Blocks for displaying various types of content.

Interactive Blocks

Blocks with user interaction and forms.

Media Blocks

Blocks for displaying images, videos, and other media.

Customization

Props Customization

Most blocks accept props for customization:

<HeroBlock
  title="Custom Title"
  subtitle="Custom subtitle"
  backgroundColor="bg-blue-500"
  textColor="text-white"
  ctaVariant="outline"
/>

Theme Integration

Blocks automatically integrate with your theme:

// Blocks will use your theme colors, fonts, and spacing
<FeatureBlock
  features={features}
  // Automatically uses theme colors and spacing
/>

Composition

Blocks can be composed together to create complex layouts:

function LandingPage() {
  return (
    <div>
      <HeaderBlock />
      <HeroBlock />
      <FeatureBlock />
      <ContentBlock />
      <CTABlock />
      <FooterBlock />
    </div>
  )
}

Best Practices

• Consistent theming: Use consistent colors and spacing across blocks
• Responsive design: Test blocks on different screen sizes
• Performance: Lazy load blocks that are not immediately visible
• Accessibility: Ensure all interactive elements are accessible

Dependencies

• @foundrykit/primitives - For UI primitives
• @foundrykit/components - For high-level components
• @foundrykit/animation - For animations
• @foundrykit/types - For TypeScript types
• @foundrykit/utils - For utility functions
• React 19+