UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Tabbed Feature Matrix

blockmarketing
Boilerplate repo

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.

Installation

$npx shadcn-vue@latest add https://uipkge.dev/r/vue/features-01.json
Named registry:npx shadcn-vue@latest add @uipkge/features-01Installs to:app/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: any
  metrics: { label: string; value: string; trend: string }[]
  previewType: 'directory' | 'payroll' | 'performance' | 'compliance' | 'api' | 'copilot'
}

npm dependencies

lucide-vue-next

Files installed (6)

  • app/components/blocks/Features01.vue12.5 kB
    <script setup lang="ts">
import { computed, ref } from 'vue'
import {
  ArrowRight,
  BarChart3,
  Bot,
  Check,
  ChevronRight,
  Code2,
  Copy,
  Layers,
  ShieldCheck,
  Users,
  Wallet,
} from 'lucide-vue-next'
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 DirectorySimulation from './DirectorySimulation.vue'
import PayrollSimulation from './PayrollSimulation.vue'
import ComplianceSimulation from './ComplianceSimulation.vue'
import ApiSimulation from './ApiSimulation.vue'
import CopilotSimulation from './CopilotSimulation.vue'

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

const activeCategory = ref<'all' | 'core' | 'dx' | 'security' | 'ai'>('all')
const selectedFeatureId = ref('directory')
const copied = ref(false)

function copySnippet(text: string) {
  navigator.clipboard.writeText(text)
  copied.value = true
  setTimeout(() => (copied.value = false), 2000)
}

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',
  },
]

const filteredFeatures = computed(() => {
  if (activeCategory.value === 'all') return features
  return features.filter((f) => f.category === activeCategory.value)
})

const activeFeature = computed(() => {
  return features.find((f) => f.id === selectedFeatureId.value) ?? features[0]
})
</script>

<template>
  <section data-slot="features-01" class="bg-background border-border relative w-full border-y py-16 lg:py-24">
    <div class="mx-auto max-w-7xl space-y-12 px-4 sm:px-6 lg:px-8">
      <!-- Section Header -->
      <div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
        <div class="max-w-2xl space-y-3">
          <div class="inline-flex items-center gap-2">
            <Badge
              variant="outline"
              class="border-primary/30 text-primary bg-primary/5 gap-1.5 px-2.5 py-1 font-mono text-xs tracking-wide uppercase"
            >
              <Layers class="size-3.5" />
              Unified Architecture
            </Badge>
            <span class="text-muted-foreground font-mono text-xs">v4.2 Enterprise Release</span>
          </div>
          <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
            Engineered for High-Velocity Teams.
          </h2>
          <p class="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 class="bg-muted/60 border-border flex flex-wrap items-center gap-1.5 rounded-lg border p-1">
          <button
            v-for="cat in [
              { id: 'all', label: 'All Modules' },
              { id: 'core', label: 'Core Platform' },
              { id: 'dx', label: 'Developer DX' },
              { id: 'security', label: 'Security' },
              { id: 'ai', label: 'Agentic AI' },
            ]"
            :key="cat.id"
            type="button"
            class="rounded-md px-3 py-1.5 text-xs font-medium transition-colors"
            :class="
              activeCategory === cat.id
                ? 'bg-background text-foreground font-semibold shadow-xs'
                : 'text-muted-foreground hover:text-foreground'
            "
            @click="activeCategory = cat.id as any"
          >
            {{ cat.label }}
          </button>
        </div>
      </div>

      <!-- Main Interactive Workbench Layout -->
      <div class="grid grid-cols-1 items-start gap-8 lg:grid-cols-12">
        <!-- Feature Cards Navigation (5 Cols) -->
        <div class="space-y-3 lg:col-span-5">
          <div
            v-for="item in filteredFeatures"
            :key="item.id"
            class="group cursor-pointer rounded-xl border p-4 transition-colors duration-150"
            :class="
              selectedFeatureId === item.id
                ? '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'
            "
            @click="selectedFeatureId = item.id"
          >
            <div class="flex items-start justify-between gap-3">
              <div class="flex items-center gap-3">
                <div
                  class="flex size-9 items-center justify-center rounded-lg border transition-colors"
                  :class="
                    selectedFeatureId === item.id
                      ? 'bg-primary text-primary-foreground border-primary'
                      : 'bg-muted text-muted-foreground border-border group-hover:text-foreground'
                  "
                >
                  <component :is="item.icon" class="size-4.5" />
                </div>
                <div>
                  <div class="flex items-center gap-2">
                    <h3 class="text-foreground text-sm font-semibold tracking-tight">{{ item.title }}</h3>
                    <Badge variant="secondary" class="px-1.5 py-0 text-xs font-normal">
                      {{ item.badge }}
                    </Badge>
                  </div>
                  <p class="text-muted-foreground mt-0.5 line-clamp-1 text-xs">
                    {{ item.description }}
                  </p>
                </div>
              </div>
              <ChevronRight
                class="text-muted-foreground size-4 shrink-0 transition-transform"
                :class="selectedFeatureId === item.id ? 'text-primary translate-x-0.5' : 'group-hover:translate-x-0.5'"
              />
            </div>

            <!-- Key metrics row in card -->
            <div
              v-if="selectedFeatureId === item.id"
              class="border-border/60 mt-4 grid grid-cols-3 gap-2 border-t pt-3"
            >
              <div v-for="m in item.metrics" :key="m.label" class="space-y-0.5">
                <p class="text-muted-foreground font-mono text-xs tracking-wider uppercase">{{ m.label }}</p>
                <div class="flex items-baseline gap-1">
                  <span class="text-foreground text-xs font-semibold">{{ m.value }}</span>
                  <span class="text-success font-mono text-xs">{{ m.trend }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

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

            <CardContent class="space-y-6 p-6">
              <!-- Simulation 1: Global Employee Directory -->
              <DirectorySimulation v-if="activeFeature.previewType === 'directory'" />

              <!-- Simulation 2: Multi-Currency Global Payroll -->
              <PayrollSimulation v-else-if="activeFeature.previewType === 'payroll'" />

              <!-- Simulation 3: SOC 2 & Compliance -->
              <ComplianceSimulation v-else-if="activeFeature.previewType === 'compliance'" />

              <!-- Simulation 4: Developer APIs & SDKs -->
              <ApiSimulation v-else-if="activeFeature.previewType === 'api'" />

              <!-- Simulation 5: AI Copilot & Agentic Ops -->
              <CopilotSimulation v-else />
            </CardContent>

            <CardFooter class="border-border bg-muted/10 flex items-center justify-between border-t px-5 py-3 text-xs">
              <span class="text-muted-foreground font-mono">Architecture SLA: 99.99% Multi-region Active-Active</span>
              <Button variant="link" size="sm" class="text-primary h-auto gap-1 p-0 text-xs">
                Explore Full Documentation
                <ArrowRight class="size-3.5" />
              </Button>
            </CardFooter>
          </Card>
        </div>
      </div>
    </div>
  </section>
</template>
  • app/components/blocks/DirectorySimulation.vue3.6 kB
  • app/components/blocks/PayrollSimulation.vue2.2 kB
  • app/components/blocks/ComplianceSimulation.vue1.6 kB
  • app/components/blocks/ApiSimulation.vue1.5 kB
  • app/components/blocks/CopilotSimulation.vue2.1 kB

Raw manifest:https://uipkge.dev/r/vue/features-01.json