@explainer/ui

The @explainer/ui package provides shared React UI components used across the docs, blog, and website apps. It is built on Radix UI, CVA (Class Variance Authority), and Tailwind CSS.

Components

Component	Description
`Button`	Styled button with variants (default, outline, ghost, link) and sizes
`Card`	Content container with `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter` subcomponents
`DropdownMenu`	Accessible dropdown built on Radix UI with trigger, content, items, separators
`ThemeToggle`	Dark/light/system theme switcher persisted in localStorage
`Navbar`	Top navigation bar with app links, project/version switchers, and mobile menu
`MobileMenu`	Responsive sidebar menu for mobile viewports
`LocaleSwitcher`	Locale dropdown for switching between available languages
`MobileNavLinks`	Navigation links adapted for mobile layout

Installation

The package is already included in the monorepo workspace. Import components directly:

import { Button, Card, ThemeToggle, Navbar } from '@explainer/ui'

Utilities

Export	Description
`cn(...classes)`	Merges class names using `clsx` + `tailwind-merge`
`buttonVariants`	CVA variants config for the Button component
`getAppLinks(env)`	Resolves app navigation links from environment variables
`defaultAppLinks`	Default app links (Home, Docs, Blog)

App links

The navbar uses getAppLinks() to resolve cross-app navigation URLs from environment variables:

import { getAppLinks } from '@explainer/ui'

const links = getAppLinks({
  PUBLIC_WEBSITE_URL: 'https://explainer.dev',
  PUBLIC_DOCS_URL: 'https://docs.explainer.dev',
  PUBLIC_BLOG_URL: 'https://blog.explainer.dev',
})