@digidelv/blocks

Pre-built block components for the digidelv design system.

Overview

@digidelv/blocks provides 50 pre-built, reusable block components composed exclusively from @digidelv/core components. Each block category has multiple variants optimized for different use cases.

Installation

pnpm add @digidelv/blocks
# or
npm install @digidelv/blocks

Usage

import { HeroCentered } from "@digidelv/blocks/hero";

function App() {
  return (
    <HeroCentered
      heading="Build amazing products faster"
      description="The all-in-one design system for modern web applications"
      primaryAction={{ label: "Get Started", href: "/get-started" }}
      secondaryAction={{ label: "View Demo", href: "/demo" }}
    />
  );
}

Block Categories

• Hero (5 variants) - First impression sections with headings and CTAs
• Header (5 variants) - Navigation bars with logo, menu, and actions
• Footer (5 variants) - Site footers with links and information
• Features (5 variants) - Showcase product features
• Pricing (5 variants) - Display pricing tiers and plans
• Testimonials (5 variants) - Customer reviews and social proof
• CTA (5 variants) - Call-to-action sections
• Marketing (5 variants) - Marketing-specific sections
• Sales (5 variants) - Sales-focused conversion sections
• Content (5 variants) - Content display and organization

Total: 50 block components

Import Patterns

Granular Import (Recommended)

import { HeroCentered } from "@digidelv/blocks/hero";
import { FooterNewsletter } from "@digidelv/blocks/footer";

Main Barrel Import

import { HeroCentered, FooterNewsletter } from "@digidelv/blocks";

Customization

Blocks support progressive customization with three levels:

Level 1 - Content Only

<HeroCentered
  heading="Welcome"
  description="Get started today"
  primaryAction={{ label: "Sign Up", href: "/signup" }}
/>

Level 2 - Style Props Override

<HeroCentered
  heading="Welcome"
  primaryAction={{ label: "Sign Up", href: "/signup" }}
  paddingY="80"
  background="brand-weak"
  radius="l"
/>

Level 3 - Full Customization

<HeroCentered
  heading="Welcome"
  primaryAction={{ label: "Sign Up", href: "/signup" }}
  className="custom-hero"
  style={{ backgroundImage: "url(...)" }}
/>

Documentation

Visit https://docs.digidelv.com/blocks for comprehensive documentation with live previews and examples.

License

MIT