Skip to main content
@node-core/ui-components is the shared component library for the Node.js website. It is published to npm and designed to be framework-agnostic — no Next.js imports, no routing dependencies. Current version: 1.6.3

​
Installing

npm install @node-core/ui-components
Within the monorepo, the site app references it as a workspace package: 
{
  "dependencies": {
    "@node-core/ui-components": "workspace:*"
  }
}

​
Importing components

Import directly from the component’s path within the package: 
import Button from '@node-core/ui-components/Common/BaseButton';
import NavBar from '@node-core/ui-components/Containers/NavBar';
import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
The package exports field supports both the compiled dist/ output and the raw src/ TypeScript sources: 
{
  "exports": {
    "./*": {
      "rolldown": [
        "./dist/*",
        "./dist/*.js",
        "./dist/*/index.js"
      ],
      "default": [
        "./src/*",
        "./src/*.tsx",
        "./src/*/index.tsx",
        "./src/*.ts",
        "./src/*/index.ts"
      ]
    }
  }
}

​
Package structure

The src/ directory is organized into five top-level namespaces:

​
Common

General-purpose UI components used throughout the site:
ComponentDescription
AlertBoxInline alert messages
AvatarGroupGroup of user avatars
BadgeSmall label indicator
BadgeGroupBadge with surrounding text
BannerSite-wide announcement strip
BaseActiveLinkAnchor with active-state styling
BaseButtonFoundation button element
BaseCodeBoxCode display container
BaseCrossLinkCross-link navigation element
BaseLinkTabsTab navigation using links
BasePaginationPagination controls
BlockquoteStyled blockquote element
BreadcrumbsBreadcrumb trail
ChangeHistoryChangelog / history display
CodeTabsTabbed code block viewer
DataTagMetadata tag label
GlowingBackdropDecorative glow effect
LanguageDropDownLocale switcher dropdown
ModalDialog / modal overlay
NodejsLogoNode.js wordmark
PreviewContent preview wrapper
SearchSearch input component
SelectDropdown select input
SeparatorHorizontal rule / divider
SignatureCode signature display
SkeletonLoading skeleton placeholder
SkipToContentButtonAccessibility skip link
SwitchToggle switch
TableOfContentsPage TOC navigation
TabsContent tab switcher
ThemeToggleLight / dark / system toggle
TooltipHover tooltip

​
Containers

Higher-level layout components that compose multiple Common components:
ComponentDescription
ArticleArticle content wrapper
FooterSite footer with navigation and badges
FunctionSignatureAPI function signature display
MetaBarPage metadata bar
NavBarPrimary navigation bar
SidebarSidebar navigation

​
Icons

SVG icon sets, organized by category:
  • Icons/InstallationMethod/ — package manager installation icons
  • Icons/Logos/ — third-party brand logos
  • Icons/OperatingSystem/ — OS icons (Windows, macOS, Linux)
  • Icons/PackageManager/ — npm, pnpm, yarn, etc.
  • Icons/PartnerLogos/ — partner and sponsor logos
  • Icons/Social/ — social platform icons (GitHub, Twitter, etc.)

​
MDX

Utility components for use inside MDX content:
ComponentDescription
MDX/CodeTabsTabbed code blocks in MDX
MDX/TooltipInline tooltips in MDX

​
hooks

Shared React hooks:
HookDescription
hooks/useCopyCopy-to-clipboard with state management

​
Key dependencies

The package uses these runtime dependencies:
  • @radix-ui/* — accessible primitives (dialog, dropdown, select, tabs, tooltip, etc.)
  • @heroicons/react — SVG icon set
  • @orama/core and @orama/ui — search engine
  • tailwindcss — utility-first CSS (via PostCSS)
  • classnames — conditional class name utility

​
Storybook

All components in this package have Storybook stories. Run the development server: 
pnpm storybook
This starts Storybook at http://localhost:6006. See Storybook for full details.

Build docs developers (and LLMs) love

Get started for freeTalk to us