Knowledge Base Hub

blockmedia

Self-serve help center and customer documentation hub with hero search, quick topic pills, category cards grid, trending articles, and community support banner.

Installation

$pnpm dlx shadcn-vue@latest add https://uipkge.dev/r/vue/knowledge-base-hub.json

$npx shadcn-vue@latest add https://uipkge.dev/r/vue/knowledge-base-hub.json

$yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/knowledge-base-hub.json

$bunx shadcn-vue@latest add https://uipkge.dev/r/vue/knowledge-base-hub.json

Named registry:npx shadcn-vue@latest add @uipkge/knowledge-base-hubInstalls to:app/components/blocks/

Variants

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`class`	`HTMLAttributes['class']`	—	optional

Schema

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

Category

interface Category {
  id: string
  title: string
  description: string
  articlesCount: number
  icon: Component
  featuredTopics: string[]
}

Article

interface Article {
  id: string
  title: string
  description: string
  category: string
  readTime: string
  viewCount: string
}

npm dependencies

lucide-vue-next

Includes

badge button card input

Files installed (2)

app/components/blocks/KnowledgeBaseHub.vue12.2 kB

<script setup lang="ts">
import type { Component, HTMLAttributes } from 'vue'
import { computed, ref } from 'vue'
import {
  ArrowRight,
  ArrowUpRight,
  Blocks,
  Clock,
  Code,
  CreditCard,
  Eye,
  HelpCircle,
  MessageSquare,
  Rocket,
  Search,
  Shield,
  Users,
} from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import KnowledgeHeroSearch from './KnowledgeHeroSearch.vue'

interface Category {
  id: string
  title: string
  description: string
  articlesCount: number
  icon: Component
  featuredTopics: string[]
}

interface Article {
  id: string
  title: string
  description: string
  category: string
  readTime: string
  viewCount: string
}

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()

const searchQuery = ref('')

const categories: Category[] = [
  {
    id: 'getting-started',
    title: 'Getting Started',
    icon: Rocket,
    articlesCount: 14,
    description: 'Quick start guides, installation walkthroughs, and core architecture concepts.',
    featuredTopics: ['Quickstart Guide', 'Project Setup', 'First Deployment'],
  },
  {
    id: 'account-billing',
    title: 'Account & Billing',
    icon: CreditCard,
    articlesCount: 22,
    description: 'Subscription plans, payment methods, invoice management, and seat licensing.',
    featuredTopics: ['Upgrade Plan', 'Payment Methods', 'Invoices'],
  },
  {
    id: 'api-sdks',
    title: 'API & Developer SDKs',
    icon: Code,
    articlesCount: 35,
    description: 'REST & GraphQL endpoints, SDK reference libraries, auth tokens, and rate limits.',
    featuredTopics: ['Authentication', 'Rate Limits', 'SDK Libraries'],
  },
  {
    id: 'security-compliance',
    title: 'Security & Compliance',
    icon: Shield,
    articlesCount: 18,
    description: 'SOC 2 certification, SSO/SAML configuration, audit logs, and data encryption.',
    featuredTopics: ['SAML SSO', 'Audit Logs', 'Data Encryption'],
  },
  {
    id: 'integrations-webhooks',
    title: 'Integrations & Webhooks',
    icon: Blocks,
    articlesCount: 28,
    description: 'Connecting third-party apps, custom webhooks, payload schemas, and event retries.',
    featuredTopics: ['Webhooks Setup', 'Slack App', 'Retry Policies'],
  },
  {
    id: 'troubleshooting-faq',
    title: 'Troubleshooting & FAQ',
    icon: HelpCircle,
    articlesCount: 40,
    description: 'Common error codes, debugging workflows, known limits, and frequent questions.',
    featuredTopics: ['Error Codes', 'Performance', 'Account Recovery'],
  },
]

const trendingArticles: Article[] = [
  {
    id: 'art-1',
    title: 'Setting up SAML 2.0 Single Sign-On (SSO)',
    description: 'Step-by-step instructions for configuring Okta, Azure AD, and Google Workspace SSO.',
    category: 'Security',
    readTime: '6 min read',
    viewCount: '14.2k views',
  },
  {
    id: 'art-2',
    title: 'Migrating from v1 REST API to v2 GraphQL',
    description: 'Breaking changes, schema transformations, and backward-compatibility guidelines.',
    category: 'API & SDKs',
    readTime: '8 min read',
    viewCount: '11.8k views',
  },
  {
    id: 'art-3',
    title: 'Configuring Custom Domains & SSL Certificates',
    description: 'DNS record configuration, automatic TLS provisioning, and apex domain routing.',
    category: 'Getting Started',
    readTime: '4 min read',
    viewCount: '9.5k views',
  },
  {
    id: 'art-4',
    title: 'Webhook Signatures & Replay Attack Prevention',
    description: 'Verify HMAC-SHA256 signatures and implement idempotency keys for event handling.',
    category: 'Integrations',
    readTime: '5 min read',
    viewCount: '8.9k views',
  },
  {
    id: 'art-5',
    title: 'Managing Team Roles & Granular Permissions',
    description: 'Assigning RBAC policies, custom permission sets, and project-level scopes.',
    category: 'Account',
    readTime: '5 min read',
    viewCount: '7.4k views',
  },
  {
    id: 'art-6',
    title: 'Debugging 429 Rate Limit Errors & Backoff Strategies',
    description: 'Understanding quota tiers, exponential backoff algorithms, and jitter implementations.',
    category: 'Troubleshooting',
    readTime: '7 min read',
    viewCount: '12.1k views',
  },
]

const filteredCategories = computed(() => {
  const q = searchQuery.value.trim().toLowerCase()
  if (!q) return categories
  return categories.filter(
    (c) =>
      c.title.toLowerCase().includes(q) ||
      c.description.toLowerCase().includes(q) ||
      c.featuredTopics.some((t) => t.toLowerCase().includes(q)),
  )
})

const filteredArticles = computed(() => {
  const q = searchQuery.value.trim().toLowerCase()
  if (!q) return trendingArticles
  return trendingArticles.filter(
    (a) =>
      a.title.toLowerCase().includes(q) ||
      a.description.toLowerCase().includes(q) ||
      a.category.toLowerCase().includes(q),
  )
})
</script>

<template>
  <div data-slot="knowledge-base-hub" :class="cn('w-full space-y-12 py-6', props.class)">
    <!-- Hero Header -->
    <KnowledgeHeroSearch :search-query="searchQuery" @update:search-query="searchQuery = $event" />

    <!-- Empty Search State -->
    <div
      v-if="filteredCategories.length === 0 && filteredArticles.length === 0"
      class="border-border bg-card/40 rounded-xl border border-dashed p-10 text-center"
    >
      <div class="bg-muted text-muted-foreground mx-auto flex size-12 items-center justify-center rounded-full">
        <Search class="size-6" aria-hidden="true" />
      </div>
      <h3 class="mt-4 text-base font-semibold">No matching articles found</h3>
      <p class="text-muted-foreground mt-1 text-sm">
        No guides or categories matched &ldquo;{{ searchQuery }}&rdquo;. Try searching for another topic.
      </p>
      <Button aria-label="Clear search" variant="outline" size="sm" class="mt-4" @click="searchQuery = ''">
        Reset search
      </Button>
    </div>

    <!-- Category Cards Grid -->
    <section v-if="filteredCategories.length > 0" class="space-y-4">
      <div class="flex items-center justify-between">
        <h2 class="text-xl font-semibold tracking-tight sm:text-2xl">Browse by Category</h2>
        <span class="text-muted-foreground text-xs tabular-nums"> {{ filteredCategories.length }} categories </span>
      </div>

      <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
        <Card
          v-for="category in filteredCategories"
          :key="category.id"
          class="group/card hover:border-ring/50 relative flex flex-col justify-between overflow-hidden transition-colors duration-200 hover:shadow-sm"
        >
          <CardHeader class="pb-3">
            <div class="flex items-start justify-between gap-3">
              <div class="bg-primary/10 text-primary flex size-11 items-center justify-center rounded-lg">
                <component :is="category.icon" class="size-5" aria-hidden="true" />
              </div>
              <Badge variant="secondary" class="text-xs font-normal"> {{ category.articlesCount }} articles </Badge>
            </div>
            <CardTitle class="mt-3 text-lg font-semibold tracking-tight">
              {{ category.title }}
            </CardTitle>
            <CardDescription class="text-muted-foreground text-sm leading-relaxed">
              {{ category.description }}
            </CardDescription>
          </CardHeader>
          <CardContent class="pt-0">
            <div class="border-border flex flex-wrap gap-1.5 border-t pt-3">
              <span
                v-for="topic in category.featuredTopics"
                :key="topic"
                class="bg-muted/60 text-muted-foreground rounded-md px-2 py-0.5 text-xs font-medium"
              >
                {{ topic }}
              </span>
            </div>
          </CardContent>
          <CardFooter class="border-border bg-muted/20 flex items-center justify-between border-t py-3">
            <a
              href="#"
              class="text-primary group-hover/card:text-primary/80 focus-visible:ring-ring flex min-h-6 items-center gap-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none"
            >
              <span>Explore category</span>
              <ArrowRight class="size-3.5 transition-transform duration-200 group-hover/card:translate-x-1" />
            </a>
          </CardFooter>
        </Card>
      </div>
    </section>

    <!-- Popular & Trending Articles Section -->
    <section v-if="filteredArticles.length > 0" class="space-y-4">
      <div class="flex flex-col justify-between gap-2 sm:flex-row sm:items-end">
        <div>
          <h2 class="text-xl font-semibold tracking-tight sm:text-2xl">Popular & Trending Articles</h2>
          <p class="text-muted-foreground mt-1 text-sm">
            Frequently read guides and developer documentation this week.
          </p>
        </div>
        <a
          href="#"
          class="text-primary hover:text-primary/80 inline-flex min-h-6 items-center gap-1 text-xs font-medium transition-colors"
        >
          <span>View all documentation</span>
          <ArrowRight class="size-3.5" aria-hidden="true" />
        </a>
      </div>

      <div class="grid gap-4 md:grid-cols-2">
        <Card
          v-for="article in filteredArticles"
          :key="article.id"
          class="group/article hover:border-ring/50 relative flex flex-col justify-between p-5 transition-colors duration-200 hover:shadow-sm"
        >
          <div class="space-y-2.5">
            <div class="flex items-center justify-between gap-2">
              <Badge variant="outline" class="text-xs font-medium">
                {{ article.category }}
              </Badge>
              <div class="text-muted-foreground flex items-center gap-3 text-xs">
                <span class="inline-flex items-center gap-1">
                  <Clock class="size-3.5" aria-hidden="true" />
                  {{ article.readTime }}
                </span>
                <span class="inline-flex items-center gap-1">
                  <Eye class="size-3.5" aria-hidden="true" />
                  {{ article.viewCount }}
                </span>
              </div>
            </div>

            <div>
              <a
                href="#"
                class="text-foreground group-hover/article:text-primary focus-visible:ring-ring flex items-start justify-between gap-2 text-base font-semibold tracking-tight transition-colors focus-visible:ring-2 focus-visible:outline-none"
              >
                <span>{{ article.title }}</span>
                <ArrowUpRight
                  class="text-muted-foreground group-hover/article:text-primary size-4 shrink-0 transition-transform duration-200 group-hover/article:translate-x-0.5 group-hover/article:-translate-y-0.5"
                  aria-hidden="true"
                />
              </a>
              <p class="text-muted-foreground mt-1 line-clamp-2 text-sm leading-relaxed">
                {{ article.description }}
              </p>
            </div>
          </div>
        </Card>
      </div>
    </section>

    <!-- Community & Live Support Footer Banner -->
    <Card class="border-border bg-card/60 overflow-hidden shadow-xs">
      <CardContent
        class="flex flex-col items-center justify-between gap-6 p-8 text-center sm:p-10 md:flex-row md:text-left"
      >
        <div class="max-w-xl space-y-2">
          <h3 class="text-xl font-semibold tracking-tight sm:text-2xl">
            Can&apos;t find what you&apos;re looking for?
          </h3>
          <p class="text-muted-foreground text-sm leading-relaxed">
            Our support engineers are available 24/7 to help resolve technical issues, or join our Discord community to
            connect with other developers.
          </p>
        </div>
        <div class="flex shrink-0 flex-wrap items-center justify-center gap-3">
          <Button class="gap-2">
            <MessageSquare class="size-4" aria-hidden="true" />
            <span>Contact Support</span>
          </Button>
          <Button variant="outline" class="gap-2">
            <Users class="size-4" aria-hidden="true" />
            <span>Join Discord Community</span>
          </Button>
        </div>
      </CardContent>
    </Card>
  </div>
</template>

app/components/blocks/KnowledgeHeroSearch.vue3.2 kB

Raw manifest:https://uipkge.dev/r/vue/knowledge-base-hub.json

Change language