Reading · Youj

Installation & usage

npx @youj/cli add content-docs

Also installs alert, anchor-nav, async-button, badge, breadcrumb, button, collapsible, command, command-palette, icon-arrow-left, icon-arrow-right, icon-bookmark, icon-check, icon-code, icon-copy, icon-menu, icon-pencil, icon-search, icon-sparkle, icon-thumbs-down, icon-thumbs-up, kbd, morph-label, reveal, sheet, sliding-indicator, table, tabs, use-controllable-state, youj-core, youj-presets, youj-ui-core.

The CLI copies the block to blocks/content/docs.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:

docs-view.tsx

'use client'

import Link from 'next/link'
import { Docs, type DocsProps } from '@/blocks/content/docs'

export function DocsView({ pages, brand }: Pick<DocsProps, 'pages' | 'brand'>) {
  return (
    <Docs
      pages={pages}
      brand={brand}
      copy={{ openNavigation: 'Open navigation' }}
      linkComponent={Link}
      onPageChange={(page) => {
        // your code
      }}
      onFeedback={(page, vote) => {
        // your code
      }}
    />
  )
}

Reference

Props12 props, 2 types

Props

Docs 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).	–
`pages`	`Page[]` The pages, in nav order; their `group`s become the nav's folds. default Northstar's SDK docs	`Northstar's SDK docs`
`page`	`string` The open page's id, controlled: pair it with `onPageChange`.	–
`defaultPage`	`string` The page open first, when the docs own it. default 'installation'	`'installation'`
`onPageChange`	`(page: string) => void`	–
`getHref`	`(page: Page) => string` Each page's route; links then navigate instead of switching in place.	–
`linkComponent`	`ElementType` Renders page links, e.g. Next.js `Link`. default 'a'	`'a'`
`brand`	`DocsBrand` The product in the header: `{ name, logo?, href? }`. default Northstar	`Northstar`
`version`	`string \| null` The version badge; `null` hides it. default 'v2.4'	`'v2.4'`
`getEditHref`	`((page: Page) => string) \| null` Where "Edit this page" goes; `null` (or no function) hides it. default '#edit'	`'#edit'`
`onFeedback`	`(page: string, vote: 'yes' \| 'no') => void` Hears "Was this page helpful?".	–
`copy`	`Partial<DocsCopy>` Any of the docs' strings, to rewrite or translate.	–

`DocsBrand`

DocsBrand props
Prop	Type	Default
`name`Required	`string`	–
`logo`	`ReactNode` Your mark before the name. Default: the demo's sparkle tile.	–
`href`	`string` Where the name links. default '#northstar'	`'#northstar'`

`DocsEntry`

DocsEntry props
Prop	Type	Default
`id`Required	`string`	–
`group`Required	`string` The nav group it sits in; groups show in the order their first page appears.	–
`title`Required	`string`	–
`lead`Required	`string` The line under the title.	–
`updated`	`string` As it should read: "Sep 12, 2026".	–
`sections`Required	`Section[]`	–

Strings18 keys for copy

Built from15 components

Accessibilitylandmarks, headings, navigation

#Installation & usage

#Description

#Code

#Reference

Props

DocsBrand

DocsEntry

Strings

Built from

Components used

#Accessibility

Installation & usage

Description

Code

Reference

`DocsBrand`

`DocsEntry`

Accessibility