Widgets
Widgets are small Blackwork pieces for a content site. They are not shadcn primitives.
Put LanguageToggle and SocialLinks in LayoutHeader. ScrollToTop is already mounted on this docs site.
When to use
- Locale switching in the header
- A search field or command-palette entry
- Brand marks for GitHub, X, RSS, and similar
- Headings and body copy that match the type scale
Generic icons still come from lucide-react. See Icons. Brand marks stay inside SocialLink.
Language toggle
One option renders a button. An array renders a dropdown. Routing is your job: pass onClick on each option.
Language toggle
LanguageToggle
| Prop | Type | Default | Description |
|---|---|---|---|
optionsrequired | LanguageToggleOption | LanguageToggleOption[] | — | One option renders a button. An array renders a dropdown. |
defaultValue | string | — | Current locale. Used to pick the trigger icon. |
title | string | — | Tooltip on the trigger. |
ariaLabel | string | — | Accessible name. Falls back to title. |
Search input
A search-styled input with a leading icon. It does not run a query.
Search input
SearchInput
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | "Search..." | Native input placeholder. |
inputRef | RefObject<HTMLInputElement> | — | Ref for the inner input. |
inputClassName | string | — | Classes for the inner input. |
searchIconClassName | string | — | Classes for the search icon. |
Social links
Social links
SocialLink
| Prop | Type | Default | Description |
|---|---|---|---|
typerequired | "github" | "x" | "twitter" | "instagram" | "zhihu" | "rss" | — | Built-in brand mark. Other types render nothing. |
linkrequired | string | — | Destination URL. Opens in a new tab. |
label | string | — | Tooltip. Defaults to the brand name. |
ariaLabel | string | — | Accessible name. Defaults to Visit {label} in a new tab. |
Scroll to top
Fixed to the bottom-right of the viewport. Give the icon-only button a name.
Scroll to top
ScrollToTop
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Tooltip on the button. |
ariaLabel | string | — | Accessible name for the icon-only button. |
variant | Button variant | "ghost" | Passed through to Button. |
Typography
Heading maps level to h1–h4. Paragraph is the matching body style.
Typography
Section title
Body copy for a content page.
Heading
| Prop | Type | Default | Description |
|---|---|---|---|
level | 1 | 2 | 3 | 4 | 1 | Renders h1 through h4 with the matching type scale. |
External link
Opens in a new tab with rel="nofollow noopener noreferrer".
External link
Quick search
Building blocks for a command-palette dialog. useQuickSearchState toggles on ⌘K / Ctrl+K. The preview below uses local state so it does not steal this site's shortcut.
Quick search
Notes
SocialLinkonly knowsgithub,x,twitter,instagram,zhihu, andrss.ScrollToTopisposition: fixed. OverrideclassNameif you need it in a boxed preview.SearchInputis presentation. Pair it with your own submit or filter logic.- This site's header search is a consumer of
QuickSearchDialog, not a different component family.