nerdtech-ui (1.0.2)
Installation
registry=npm install nerdtech-ui@1.0.2"nerdtech-ui": "1.0.2"About this package
nerdtech-ui
A comprehensive Vue 3.5 component library with 74+ components, design tokens, and a layered architecture.
Showcase & Documentation: ui.nerdtech.info
Installation
npm install nerdtech-ui
Vue
>=3.3.0is a peer dependency and must be installed separately.
Quick Start
import { createApp } from "vue";
import App from "./App.vue";
import NerdtechUI from "nerdtech-ui";
import "nerdtech-ui/style.css";
createApp(App).use(NerdtechUI).mount("#app");
This registers all components globally and imports the complete style system (base styles, design tokens, theme variables).
Tree-Shakeable Imports
You can also import individual components:
import { UiButton, UiInput, UiCard } from "nerdtech-ui";
import "nerdtech-ui/style.css";
Architecture
Design Tokens (tokens.css) -- Foundation: colors, spacing, radii, typography
|
Theme Tokens (themes.css) -- Semantic: background, surface, primary, danger
|
Primitives (Box, Grid, Stack ...) -- Layout structure and spacing
|
UI Components -- Feature layer: forms, navigation, feedback, ...
Components
Layout Primitives
UiBox UiGrid UiStack UiInline UiDivider UiPrimitiveDivider
Typography
UiHeading UiText UiLink UiKbd
Form
UiButton UiInput UiTextarea UiSelect UiCheckbox UiRadioGroup UiSwitch UiSlider UiStepper UiDatePicker UiFileUpload
Data Display
UiTable UiDataList UiMetric UiTimeline UiAvatar UiAvatarGroup UiBadge UiTag UiBreadcrumbs
Feedback
UiToast UiSpinner UiProgress UiSkeleton UiCallout UiBanner UiEmptyState
Overlays
UiModal UiDrawer UiPopover UiTooltip UiDropdownMenu UiContextMenu UiCommandPalette
Navigation
UiTabs UiPagination UiPageSlider UiStickyNav UiAccordion UiImageSlider
Marketing / Landing Page
UiHero UiBentoGrid UiLogoCloud UiTestimonialSlider UiFloatingCta UiCard UiGlassCard
Animation & Effects
UiTransition UiCollapse UiMarquee UiPulse UiShimmer UiScrollReveal UiTypewriter UiAnimatedCounter UiCountUp UiRotateWords UiTextReveal UiStagger UiTiltCard UiMagneticHover UiSpotlight UiGlowBorder
Theming
The library ships with light and dark themes, controlled via data-nt-theme:
<html data-nt-theme="dark"></html>
Or programmatically with the useTheme composable:
import { useTheme } from "nerdtech-ui";
const { theme, resolvedTheme, setTheme } = useTheme();
setTheme("dark"); // "light" | "dark" | "system"
Composables
| Composable | Purpose |
|---|---|
useTheme |
Theme switching (light/dark/system) |
useControllableState |
Controlled/uncontrolled state pattern |
useFloatingLayer |
Portal/overlay layer management |
useFloatingPosition |
Popover/tooltip positioning |
useClickOutside |
Detect clicks outside an element |
useId |
Unique ID generation for accessibility |
Design Tokens (TypeScript)
The library also exports design tokens as TypeScript objects:
import { colors, spacing, radius, typography } from "nerdtech-ui";
Available token modules: breakpoints, colors, motion, radius, shadow, spacing, typography, zIndex
Development
npm run dev # Start dev server
npm run build # Production build with type checking
npm run type-check # TypeScript validation
npm run test:unit:run # Run all tests
npm run format # Format with Prettier
License
See LICENSE.
Dependencies
Development dependencies
| ID | Version |
|---|---|
| @types/node | ^22.13.1 |
| @vitejs/plugin-vue | ^5.2.1 |
| @vue/test-utils | ^2.4.6 |
| jsdom | ^25.0.1 |
| marked | ^17.0.4 |
| prettier | ^3.5.3 |
| typescript | ^5.9.2 |
| vite | ^5.4.11 |
| vitest | ^2.1.8 |
| vue | ^3.5.13 |
| vue-tsc | ^2.1.10 |
Peer dependencies
| ID | Version |
|---|---|
| vue | >=3.3.0 <4 |