Self-serve help center and customer documentation hub with hero search, quick topic pills, category cards grid, trending articles, and community support banner.
Also available for React ->$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.jsonnpx shadcn-vue@latest add @uipkge/knowledge-base-hubInstalls to:app/components/blocks/| Name | Type / Values | Default | Required |
|---|---|---|---|
class | HTMLAttributes['class'] | — | optional |
Type aliases exported from this item's source. Use these to shape the data you pass in.
Categoryinterface Category {
id: string
title: string
description: string
articlesCount: number
icon: Component
featuredTopics: string[]
}Articleinterface Article {
id: string
title: string
description: string
category: string
readTime: string
viewCount: string
}<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 “{{ searchQuery }}”. 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't find what you'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>
<script setup lang="ts">
import { BookOpen, Search, X } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
const props = defineProps<{
searchQuery: string
}>()
const emit = defineEmits<{ 'update:searchQuery': [value: string] }>()
const quickTopics = ['Authentication', 'Billing', 'Webhooks', 'Custom Domains']
function selectTopic(topic: string) {
if (props.searchQuery === topic) {
emit('update:searchQuery', '')
} else {
emit('update:searchQuery', topic)
}
}
function onInput(value: string | number) {
emit('update:searchQuery', String(value))
}
</script>
<template>
<section class="mx-auto max-w-3xl space-y-6 text-center">
<div class="space-y-3">
<Badge variant="secondary" class="gap-1.5 px-3 py-1 font-medium">
<BookOpen class="text-primary size-3.5" aria-hidden="true" />
Help Center & Documentation
</Badge>
<h1 class="text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">How can we help you today?</h1>
<p class="text-muted-foreground mx-auto max-w-xl text-base sm:text-lg">
Search our knowledge base for guides, API references, troubleshooting tips, and common workflows.
</p>
</div>
<div class="relative mx-auto max-w-2xl">
<Search
aria-hidden="true"
class="text-muted-foreground pointer-events-none absolute top-1/2 left-4 size-5 -translate-y-1/2"
/>
<Input
:model-value="searchQuery"
type="search"
placeholder="Search for answers, guides, and error codes..."
class="bg-card h-12 rounded-xl pr-14 pl-11 text-base shadow-xs"
@update:model-value="onInput"
/>
<div class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2">
<kbd
class="bg-muted text-muted-foreground border-border hidden h-6 items-center rounded border px-2 font-mono text-xs select-none sm:inline-flex"
>
⌘K
</kbd>
</div>
</div>
<div class="flex flex-wrap items-center justify-center gap-2">
<span class="text-muted-foreground text-xs font-medium">Quick topics:</span>
<button
v-for="topic in quickTopics"
:key="topic"
type="button"
:class="
cn(
'focus-visible:ring-ring inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',
searchQuery === topic
? 'bg-primary text-primary-foreground border-primary'
: 'bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground border-transparent',
)
"
@click="selectTopic(topic)"
>
{{ topic }}
</button>
<button
aria-label="Clear search"
v-if="searchQuery"
type="button"
class="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 px-1.5 py-1 text-xs font-medium transition-colors"
@click="emit('update:searchQuery', '')"
>
<X class="size-3" aria-hidden="true" />
Clear search
</button>
</div>
</section>
</template>
Raw manifest:https://uipkge.dev/r/vue/knowledge-base-hub.json
