8848 UI

Minimal · Precise · Quiet · Technical · Himalayan · Elevated.

Mountain-inspired design system for modern React / Next.js and agentic interfaces. Accessible Radix primitives, Tailwind CSS v4 theme tokens in OKLCH, and expedition-grade engineering — thin borders, compact sizing, restrained blue.

                     /\
                    /  \
                   /    \
                  /      \
         ________/        \_______
                 8848 UI

---

Install

pnpm add @aayurt/8848-ui-react @aayurt/8848-ui-core

MCP Server (for AI assistants):

npm i kritikka-mcp

Repository: https://github.com/aayurt/kritikka-mcp
Homepage: https://github.com/aayurt/kritikka-mcp#readme

Import the theme once (Tailwind v4):

@import "@aayurt/8848-ui-core/theme.css";

import { Button, Card, CardHeader, CardTitle, CardContent } from "@aayurt/8848-ui-react";
import { Input } from "@aayurt/8848-ui-react/input";

export function FlightDeck() {
  return (
    <Card variant="ridge">
      <CardHeader>
        <CardTitle>Expedition Stage</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <Input label="Task Goal" placeholder="e.g. Synthesize agent run" />
        <Button variant="default">Begin Ascent</Button>
      </CardContent>
    </Card>
  );
}

Tree-shakeable subpaths: @aayurt/8848-ui-react/button, /dialog, /table, /form, /accordion, … (see packages/components/package.json exports).

Prefer copy-paste ownership? Use the shadcn registry instead:

pnpm dlx shadcn@latest add https://8848.aayurtshrestha.com.np/r/button.json

Or register the @aayurt namespace once in your components.json:

{ "registries": { "@aayurt": "https://8848.aayurtshrestha.com.np/r/{name}.json" } }

pnpm dlx shadcn add @aayurt/button

Available items: theme, utils, spinner, button, badge, card, alert, input, accordion, avatar, checkbox, command, dialog, dropdown-menu, form, hover-card, kbd, label, navigation-menu, popover, progress, radio-group, select, separator, sheet, skeleton, switch, table, tabs, toast, toggle, tooltip, typography, plus agentic telemetry-chip, approval-prompt, execution-card, executor-node, tool-call-inspector, mountain-contour (full index at /r/registry.json). Install theme first — it provides the mountain tokens. Registry JSON is generated by scripts/registry-build.mjs on every docs build.

AI assistants: @aayurt/8848-ui-mcp is an MCP server over this registry (list_components, search_components, get_component, get_component_file). Add to .mcp.json with npx -y @aayurt/8848-ui-mcp. See packages/mcp/README.md.

---

Packages

Package	Version	Contents
@aayurt/8848-ui-react	0.2.1	React 19 components — primitives, overlays, agentic patterns, Form (RHF + Zod)
@aayurt/8848-ui-core	0.1.2	OKLCH palette, Tailwind v4 theme, CSS variables, radii, elevation shadows
@aayurt/8848-ui-motion	0.1.0	Framer Motion primitives (Fade, Slide, Scale) & Agentic motion (Typing, Ripple)
@aayurt/8848-ui-themes	0.1.0	Altitude-based theming (Basecamp, Trail, Ridge, Summit, Death Zone) and Switcher
@aayurt/8848-ui-hooks	0.1.1	useMediaQuery, useControllableState, useId, useEventListener, …
@aayurt/8848-ui-utils	0.1.1	cn (clsx + tailwind-merge), cva, focus-ring, visually-hidden
@aayurt/8848-ui-mcp	0.2.1	MCP server over the registry — list/search/get components for AI assistants

Live registry with interactive previews: run pnpm dev → http://localhost:3001/components

---

Components (40+)

Primitives — Accordion, Alert, Avatar, Badge, Button, Card, Checkbox, Input, Textarea, Kbd, Label, RadioGroup, Select, Separator, Skeleton, Spinner, Switch, Typography Overlays — Dialog, DropdownMenu, HoverCard, Popover, Sheet, Tooltip, Toast, Command, NavigationMenu Data — Table (sortable), Progress, Tabs Form — RHF + Zod controller (Form, FormField, FormItem, …), Toggle Agentic — ExecutionCard, ToolCallInspector, ApprovalPrompt, ExecutorNode, TelemetryChip, MountainContour

Button system: compact spec (28–44px heights, 6–9px radii), 1px borders, hover lift (translateY(-1px)), 2px focus ring. Mountain names (hiker, climber, summit…) plus shadcn aliases (default, outline, ghost, destructive, link) and daisyUI colors/sizes.

---

Design tokens

• Brand (Alpine Blue): oklch(0.55 0.18 250) · Accent (Sunrise Orange): oklch(0.65 0.18 35)
• Neutrals: perceptual slate scale 50–950, plus Forest & Earth extensions
• Semantic: background, foreground, primary, muted, accent, border (oklch(0.9 0 0)), input, ring, destructive — light + dark
• Type: Inter (sans), JetBrains Mono (mono)
• Elevation: basecamp, trail, ridge, summit, expedition shadows; meter-based spacing

---

Develop

pnpm install          # dependencies
pnpm dev              # docs site + playground (:3001)
pnpm typecheck        # all packages
pnpm --filter @aayurt/8848-ui-react lint
pnpm deploy:docs      # static-export build + rsync to VPS + verify (local)

GitHub Actions (auto-deploy on push to main):

# .github/workflows/deploy-docs.yml
# Requires VPS_HOST, VPS_USER, VPS_SSH_PRIVATE_KEY secrets in GitHub

pnpm changeset        # new changeset, then pnpm changeset version
pnpm changeset publish # publish to npm (needs auth + 2FA bypass token)

Do not run pnpm build while the docs dev server is running — both share apps/docs/.next and the build clobbers dev state.

---

License

MIT © Aayurt Shrestha