Help and search

Installation & usage

npx @youj/cli add content-help-center

Also installs accordion, alert, app-page, badge, button, card, content-swap, counter, field, file-upload, icon-arrow-right, icon-banknote, icon-check-circle, icon-code-xml, icon-credit-card, icon-file-text, icon-mail, icon-messages, icon-phone-call, icon-search, icon-shield-alert, icon-shield-check, icon-x, input, input-group, morph-label, presence-list, radio-group, reveal, select, skeleton, spotlight, textarea, youj-core, youj-presets, youj-ui-core.

The CLI copies the block to blocks/content/help-center.tsx with every component it uses, so it’s yours to edit.

Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:

helpCenter-view.tsx

'use client'

import Link from 'next/link'
import { HelpCenter, type HelpCenterProps } from '@/blocks/content/help-center'

export function HelpCenterView({ categories, articles, popular, questions }: Pick<HelpCenterProps, 'categories' | 'articles' | 'popular' | 'questions'>) {
  return (
    <HelpCenter
      categories={categories}
      articles={articles}
      popular={popular}
      questions={questions}
      copy={{ brandSuffix: 'Help' }}
      linkComponent={Link}
      onSearch={async (query) => {
        // await your API here; the block shows progress until it settles
      }}
      onSubmit={async (request) => {
        // await your API here; the block shows progress until it settles
      }}
      onUpload={async (file) => {
        // await your API here; the block shows progress until it settles
      }}
    />
  )
}

Reference

Props15 props, 6 types

Props

HelpCenter props
Prop	Type	Default
`theme`	`ThemeInput` A theme to force on the block. Default: none, so it inherits the app's (YoujProvider or a ThemeScope around it).	–
`embedded`	`boolean` A page in your app's frame: the shared page header (AppPage) and the frame's gutter, with no brand bar or hero of its own (the status pill moves to the header's actions). default true	`true`
`categories`	`HelpCategory[]` The topic cards. default Harbor's six	`Harbor's six`
`articles`	`HelpArticle[]` What the search looks through by title. default Harbor's thirteen	`Harbor's thirteen`
`onSearch`	`(query: string) => HelpArticle[] \| Promise<HelpArticle[]>` Answers a search yourself (your search API, say); without it, `articles` are matched by title.	–
`popular`	`string[]` One-press searches under the field; `[]` hides the row. default four	`four`
`questions`	`HelpQuestion[]` The popular questions. default Harbor's five	`Harbor's five`
`channels`	`HelpChannel[]` The ways to reach support. default chat, email and phone	`chat, email and phone`
`topics`	`HelpTopic[]` The choices under "What's this about?". default Harbor's five	`Harbor's five`
`onSubmit`	`(request: HelpRequest) => Promise<string>` Sends a support request and resolves with the ticket's id; reject with an Error to say why not. default a short demo wait	`a short demo wait`
`onUpload`	`(file: File) => Promise<unknown>` Uploads an attachment. default a short demo wait	`a short demo wait`
`brand`	`{ name: string; logo?: ReactNode; href?: string }` The product in the header: `{ name, logo?, href? }`. Default: Harbor.	–
`statusHref`	`string \| null` The status pill's link; `null` hides it. default '#status'	`'#status'`
`linkComponent`	`ElementType` Renders article and topic links, e.g. Next.js `Link`. default 'a'	`'a'`
`copy`	`Partial<HelpCenterCopy>` Any of the page's strings, to rewrite or translate.	–

`HelpArticle`

HelpArticle props
Prop	Type	Default
`id`Required	`string`	–
`title`Required	`string`	–
`category`Required	`string` A category's id; its title shows as a badge.	–
`minutes`Required	`number` Reading time.	–
`href`	`string` The article's page. default `#<id>`	`#<id>`

`HelpCategory`

HelpCategory props
Prop	Type	Default
`id`Required	`string`	–
`title`Required	`string`	–
`description`Required	`string`	–
`count`Required	`number` How many articles it holds; counts up as it scrolls in.	–
`icon`Required	`HelpIcon`	–
`href`	`string` The topic's page. default `#<id>`	`#<id>`

`HelpChannel`

HelpChannel props
Prop	Type	Default
`id`Required	`string`	–
`title`Required	`string`	–
`description`Required	`string`	–
`icon`Required	`HelpIcon`	–
`reply`Required	`number` The typical first reply, in `unit`s.	–
`unit`Required	`string`	–

`HelpQuestion`

HelpQuestion props
Prop	Type	Default
`q`Required	`string`	–
`a`Required	`string`	–

`HelpRequest`

HelpRequest props
Prop	Type	Default
`channel`Required	`string`	–
`topic`Required	`string`	–
`reference`Required	`string`	–
`message`Required	`string`	–

`HelpTopic`

HelpTopic props
Prop	Type	Default
`value`Required	`string`	–
`label`Required	`string`	–

Strings45 keys for copy

Built from20 components

Accessibilitylandmarks, search, filters

#Installation & usage

#Description

#Code

#Reference

Props

HelpArticle

HelpCategory

HelpChannel

HelpQuestion

HelpRequest

HelpTopic

Strings

Built from

Components used

#Accessibility