Tabbed Feature Matrix

blockmarketing

Interactive enterprise product feature workbench with live module simulations, dynamic directory filters, real-time payroll calculations, continuous SOC 2 compliance verification, and TypeScript API code viewer.

Also available for Vue ->

Installation

$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/features-01.json

$npx shadcn@latest add https://uipkge.dev/r/react/features-01.json

$yarn dlx shadcn@latest add https://uipkge.dev/r/react/features-01.json

$bunx shadcn@latest add https://uipkge.dev/r/react/features-01.json

Named registry:npx shadcn@latest add @uipkge-react/features-01Installs to:components/blocks/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

FeatureModule

interface FeatureModule {
  id: string
  title: string
  category: 'core' | 'dx' | 'security' | 'ai'
  badge: string
  description: string
  icon: React.ElementType
  metrics: { label: string; value: string; trend: string }[]
  previewType: 'directory' | 'payroll' | 'performance' | 'compliance' | 'api' | 'copilot'
}

npm dependencies

lucide-react

Includes

badge button card input separator

Files installed (6)

components/blocks/Features01.tsx13.5 kB

'use client'

import * as React from 'react'
import {
  ArrowRight,
  BarChart3,
  Bot,
  Check,
  ChevronRight,
  Code2,
  Copy,
  Layers,
  ShieldCheck,
  Users,
  Wallet,
} from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import { cn } from '@/lib/utils'
import { DirectorySimulation } from './DirectorySimulation'
import { PayrollSimulation } from './PayrollSimulation'
import { ComplianceSimulation } from './ComplianceSimulation'
import { ApiSimulation } from './ApiSimulation'
import { CopilotSimulation } from './CopilotSimulation'

interface FeatureModule {
  id: string
  title: string
  category: 'core' | 'dx' | 'security' | 'ai'
  badge: string
  description: string
  icon: React.ElementType
  metrics: { label: string; value: string; trend: string }[]
  previewType: 'directory' | 'payroll' | 'performance' | 'compliance' | 'api' | 'copilot'
}

const features: FeatureModule[] = [
  {
    id: 'directory',
    title: 'Global Employee Directory',
    category: 'core',
    badge: 'Real-time Sync',
    description:
      'Single source of truth for global teams, reporting hierarchies, custom attributes, and automated SCIM provisioning.',
    icon: Users,
    metrics: [
      { label: 'Sync Latency', value: '<12ms', trend: 'P99 Edge' },
      { label: 'SCIM Connectors', value: '24+', trend: 'Okta/Google' },
      { label: 'Export Formats', value: 'JSON/CSV', trend: 'Bi-directional' },
    ],
    previewType: 'directory',
  },
  {
    id: 'payroll',
    title: 'Multi-Currency Global Payroll',
    category: 'core',
    badge: 'Automated Tax',
    description:
      'Instant payroll calculation across 140+ countries with automated localized tax withholding, statutory benefits, and direct FX routing.',
    icon: Wallet,
    metrics: [
      { label: 'Supported Currencies', value: '140+', trend: 'Live FX' },
      { label: 'Settlement Time', value: 'Instant', trend: 'SEPA/FedNow' },
      { label: 'Tax Accuracy', value: '100%', trend: 'Statutory Verified' },
    ],
    previewType: 'payroll',
  },
  {
    id: 'performance',
    title: 'OKR & Continuous Reviews',
    category: 'dx',
    badge: '360 Calibration',
    description:
      'Transparent objective tracking, real-time 1:1 syncs, and peer review cycles tied directly to engineering and business milestones.',
    icon: BarChart3,
    metrics: [
      { label: 'Cycle Completion', value: '98.4%', trend: '+14% vs avg' },
      { label: 'Review Latency', value: '2.1 days', trend: '-40% faster' },
      { label: 'Goal Alignment', value: '94%', trend: 'Company-wide' },
    ],
    previewType: 'performance',
  },
  {
    id: 'compliance',
    title: 'SOC 2 & Continuous Compliance',
    category: 'security',
    badge: 'Zero Trust',
    description:
      'Continuous automated evidence collection across AWS, GCP, Cloudflare, and GitHub with automated auditor-ready export bundles.',
    icon: ShieldCheck,
    metrics: [
      { label: 'Continuous Tests', value: '142 / 142', trend: '100% Pass' },
      { label: 'Evidence Collection', value: 'Automated', trend: 'Every 5m' },
      { label: 'Standards', value: 'SOC2 / HIPAA', trend: 'ISO 27001' },
    ],
    previewType: 'compliance',
  },
  {
    id: 'api',
    title: 'REST & GraphQL Developer APIs',
    category: 'dx',
    badge: 'Type-Safe SDKs',
    description:
      'Fully typed OpenAPI 3.1 & TypeScript SDKs with sub-millisecond edge response times, webhooks, and granular scoped API keys.',
    icon: Code2,
    metrics: [
      { label: 'API Median Latency', value: '18ms', trend: 'Global Edge' },
      { label: 'Webhook Delivery', value: '99.98%', trend: 'Automatic Retry' },
      { label: 'Rate Limit', value: '10k req/s', trend: 'Configurable' },
    ],
    previewType: 'api',
  },
  {
    id: 'copilot',
    title: 'Autonomous People Ops Copilot',
    category: 'ai',
    badge: 'Agentic AI',
    description:
      'Natural language queries over workforce data, intelligent anomaly detection in compensation bands, and automated policy drafts.',
    icon: Bot,
    metrics: [
      { label: 'Inference Speed', value: '94 tps', trend: 'Claude 3.5' },
      { label: 'Accuracy Score', value: '99.6%', trend: 'RAG Grounded' },
      { label: 'Task Automation', value: '78%', trend: 'Self-serve' },
    ],
    previewType: 'copilot',
  },
]

export function Features01() {
  const [activeCategory, setActiveCategory] = React.useState<'all' | 'core' | 'dx' | 'security' | 'ai'>('all')
  const [selectedFeatureId, setSelectedFeatureId] = React.useState('directory')
  const [copied, setCopied] = React.useState(false)

  const filteredFeatures = React.useMemo(() => {
    if (activeCategory === 'all') return features
    return features.filter((f) => f.category === activeCategory)
  }, [activeCategory])

  const activeFeature = features.find((f) => f.id === selectedFeatureId) ?? features[0]

  const copySnippet = (text: string) => {
    navigator.clipboard.writeText(text)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <section data-slot="features-01" className="bg-background border-border relative w-full border-y py-16 lg:py-24">
      <div className="mx-auto max-w-7xl space-y-12 px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
          <div className="max-w-2xl space-y-3">
            <div className="inline-flex items-center gap-2">
              <Badge
                variant="outline"
                className="border-primary/30 text-primary bg-primary/5 gap-1.5 px-2.5 py-1 font-mono text-xs tracking-wide uppercase"
              >
                <Layers className="size-3.5" />
                Unified Architecture
              </Badge>
              <span className="text-muted-foreground font-mono text-xs">v4.2 Enterprise Release</span>
            </div>
            <h2 className="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
              Engineered for High-Velocity Teams.
            </h2>
            <p className="text-muted-foreground text-base leading-relaxed sm:text-lg">
              Six modular, composable building blocks that directly interconnect without third-party glue code.
            </p>
          </div>

          {/* Category Filters */}
          <div className="bg-muted/60 border-border flex flex-wrap items-center gap-1.5 rounded-lg border p-1">
            {[
              { id: 'all', label: 'All Modules' },
              { id: 'core', label: 'Core Platform' },
              { id: 'dx', label: 'Developer DX' },
              { id: 'security', label: 'Security' },
              { id: 'ai', label: 'Agentic AI' },
            ].map((cat) => (
              <button
                key={cat.id}
                type="button"
                className={cn(
                  'rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
                  activeCategory === cat.id
                    ? 'bg-background text-foreground font-semibold shadow-xs'
                    : 'text-muted-foreground hover:text-foreground',
                )}
                onClick={() => setActiveCategory(cat.id as any)}
              >
                {cat.label}
              </button>
            ))}
          </div>
        </div>

        {/* Main Interactive Workbench Layout */}
        <div className="grid grid-cols-1 items-start gap-8 lg:grid-cols-12">
          {/* Feature Cards Navigation (5 Cols) */}
          <div className="space-y-3 lg:col-span-5">
            {filteredFeatures.map((item) => {
              const Icon = item.icon
              const isSelected = selectedFeatureId === item.id
              return (
                <div
                  key={item.id}
                  className={cn(
                    'group cursor-pointer rounded-xl border p-4 transition-colors duration-150',
                    isSelected
                      ? 'bg-card border-primary/40 ring-primary/20 shadow-xs ring-1'
                      : 'bg-card/40 border-border hover:bg-card/80 hover:border-border/80',
                  )}
                  onClick={() => setSelectedFeatureId(item.id)}
                >
                  <div className="flex items-start justify-between gap-3">
                    <div className="flex items-center gap-3">
                      <div
                        className={cn(
                          'flex size-9 items-center justify-center rounded-lg border transition-colors',
                          isSelected
                            ? 'bg-primary text-primary-foreground border-primary'
                            : 'bg-muted text-muted-foreground border-border group-hover:text-foreground',
                        )}
                      >
                        <Icon className="size-4.5" />
                      </div>
                      <div>
                        <div className="flex items-center gap-2">
                          <h3 className="text-foreground text-sm font-semibold tracking-tight">{item.title}</h3>
                          <Badge variant="secondary" className="px-1.5 py-0 text-xs font-normal">
                            {item.badge}
                          </Badge>
                        </div>
                        <p className="text-muted-foreground mt-0.5 line-clamp-1 text-xs">{item.description}</p>
                      </div>
                    </div>
                    <ChevronRight
                      className={cn(
                        'text-muted-foreground size-4 shrink-0 transition-transform',
                        isSelected ? 'text-primary translate-x-0.5' : 'group-hover:translate-x-0.5',
                      )}
                    />
                  </div>

                  {/* Key metrics row in card */}
                  {isSelected && (
                    <div className="border-border/60 mt-4 grid grid-cols-3 gap-2 border-t pt-3">
                      {item.metrics.map((m) => (
                        <div key={m.label} className="space-y-0.5">
                          <p className="text-muted-foreground font-mono text-xs tracking-wider uppercase">{m.label}</p>
                          <div className="flex items-baseline gap-1">
                            <span className="text-foreground text-xs font-semibold">{m.value}</span>
                            <span className="text-success font-mono text-xs">{m.trend}</span>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )
            })}
          </div>

          {/* Live Interactive Simulation Canvas (7 Cols) */}
          <div className="lg:col-span-7">
            <Card className="bg-card border-border sticky top-6 overflow-hidden shadow-sm">
              {/* Workbench Header Bar */}
              <CardHeader className="border-border bg-muted/20 flex-row items-center justify-between space-y-0 border-b px-5 py-3.5">
                <div className="flex items-center gap-2.5">
                  <div className="bg-success flex size-2 animate-pulse rounded-full" />
                  <span className="text-muted-foreground font-mono text-xs tracking-wider uppercase">
                    Interactive Simulation
                  </span>
                  <Separator orientation="vertical" className="h-3.5" />
                  <span className="text-foreground text-xs font-semibold">{activeFeature.title}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Button
                    variant="outline"
                    size="sm"
                    className="h-7 gap-1.5 px-2.5 font-mono text-xs"
                    onClick={() => copySnippet(JSON.stringify(activeFeature, null, 2))}
                  >
                    {copied ? <Check className="text-success size-3" /> : <Copy className="size-3" />}
                    <span>{copied ? 'Copied' : 'Schema JSON'}</span>
                  </Button>
                </div>
              </CardHeader>

              <CardContent className="space-y-6 p-6">
                {/* Simulation 1: Global Employee Directory */}
                {activeFeature.previewType === 'directory' && <DirectorySimulation />}

                {/* Simulation 2: Multi-Currency Global Payroll */}
                {activeFeature.previewType === 'payroll' && <PayrollSimulation />}

                {/* Simulation 3: SOC 2 & Compliance */}
                {activeFeature.previewType === 'compliance' && <ComplianceSimulation />}

                {/* Simulation 4: Developer APIs & SDKs */}
                {activeFeature.previewType === 'api' && <ApiSimulation />}

                {/* Simulation 5: AI Copilot & Agentic Ops */}
                {activeFeature.previewType === 'copilot' && <CopilotSimulation />}
              </CardContent>

              <CardFooter className="border-border bg-muted/10 flex items-center justify-between border-t px-5 py-3 text-xs">
                <span className="text-muted-foreground font-mono">
                  Architecture SLA: 99.99% Multi-region Active-Active
                </span>
                <Button variant="link" size="sm" className="text-primary h-auto gap-1 p-0 text-xs">
                  Explore Full Documentation
                  <ArrowRight className="size-3.5" />
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </div>
    </section>
  )
}
export default Features01