"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { Accordion, AccordionItem } from "./accordion"; import { Button } from "./button"; import { BookIcon, ChatIcon, CardIcon, SearchIcon, ShieldIcon, UserIcon, BoltIcon } from "@kineticui/icons"; const cats = [ { icon: BoltIcon, title: "Getting started", count: 12 }, { icon: UserIcon, title: "Account & team", count: 9 }, { icon: CardIcon, title: "Billing", count: 14 }, { icon: ShieldIcon, title: "Security", count: 7 }, { icon: BookIcon, title: "Guides", count: 23 }, { icon: ChatIcon, title: "Integrations", count: 11 }, ]; const articles = ["How do I install the CLI?", "Change the accent colour", "Invite teammates to a workspace", "Update my billing details", "Enable two-factor authentication", "Use Kinetic UI with Remix", "Cancel my subscription", "Export invoices as PDF"]; const faqs = [ ["Can I use Kinetic UI in commercial projects?", "Yes. The components are MIT licensed. Pro blocks are licensed per team and can ship in unlimited projects."], ["Do I need Tailwind?", "Yes, Tailwind CSS v4. The tokens are plain CSS variables, so you can still theme without touching Tailwind config."], ["How do updates work with copied components?", "Run `kinetic diff` to see upstream changes and pick what to merge. Packages update like any npm dependency."], ]; /** Help center: hero search with live suggestions, category grid, popular articles, FAQ and contact CTA. */ export function HelpCenter() { const [q, setQ] = React.useState(""); const [focus, setFocus] = React.useState(false); const hits = q ? articles.filter((a) => a.toLowerCase().includes(q.toLowerCase())) : []; return (

How can we help?

setQ(e.target.value)} onFocus={() => setFocus(true)} onBlur={() => setTimeout(() => setFocus(false), 150)} placeholder="Search articles, e.g. billing" aria-label="Search help articles" className="flex-1 bg-transparent outline-none placeholder:text-subtle" />

{focus && q ? ( {hits.length ? hits.map((h) => (

{h}

)) :

No articles for “{q}”. Try contacting support.

} ) : null}

Popular: {["install", "billing", "two-factor"].map((t) => )}

{cats.map((c, i) => ( {c.title} {c.count} articles ))}

FAQ

{faqs.map(([qq, a]) =>

{a}

)}

Still stuck? Our team usually replies within 2 hours.

); }

How can we help?

Popular articles

FAQ

Help Center

Installation