Introduction

VitNode UI is the component library behind every VitNode screen, from the AdminCP to your plugin pages. It gives you buttons, dialogs, forms, tables and around seventy other pieces that share one set of colors, type, spacing and motion, so a plugin looks like it belongs without extra effort.

Use a componentCopy Anchor Link

Every component lives in @vitnode/core, which your app already depends on. Import it from @vitnode/core/components/ui/<name>:

import { Button } from '@vitnode/core/components/ui/button'

export const PublishButton = () => <Button>Publish post</Button>

There's nothing to install and no copy-paste step. Components are styled with design tokens, so they follow your theme and switch to dark mode automatically.

What it's built onCopy Anchor Link

• Base UI (@base-ui/react) for the behavior: focus management, keyboard support, ARIA and positioning.
• shadcn/ui in its base-vega style for the starting point of each component's look.
• Tailwind CSS v4 for styling, driven by CSS variables.
• Motion for the few animations that need springs, like rolling numbers, the switch thumb and image zoom.

Design principlesCopy Anchor Link

Inspired by Apple's Human Interface Guidelines (we're not affiliated, we just like how their stuff feels):

• Respond on press. Everything reacts the moment your pointer goes down. Motion
• Move with purpose. Short, interruptible, no bounce for fun. Motion
• Respect people's settings. Reduced motion, reduced transparency and touch-sized targets. Accessibility
• Sweat the details. Steady numbers and nested corners. Typography · Radius & Elevation

FoundationsCopy Anchor Link

Components never hardcode a color, size or curve. They read shared tokens from your app's src/styles.css, and each foundation has its own page full of live examples.

Popular componentsCopy Anchor Link