@mks2508/mks-ui

Getting Started

Modern React UI component library with Synthwave Dark aesthetics, glassmorphism, and spring animations.

@mks2508/mks-ui

A React component library built on Shadcn UI and Animate UI primitives with a distinctive Synthwave Dark design system featuring glassmorphism effects, OKLch color space, and spring-based animations.

What's Inside

  • 25 UI Components — From Button and Card to complex Combobox and DataCard
  • 4 Custom Hooks — useAutoHeight, useControlledState, useDataState, useIsInView
  • 4 Primitives — Slot, Highlight, AutoHeight, CountingNumber
  • 32 Animated Icons — Lucide icons with entrance/exit animations
  • Core Type System — StyleSlots, SlotOverrides, CVA variants

Quick Install

pnpm i @mks2508/mks-ui

Quick Import

// Barrel import — all React components, hooks, icons, utils
import { Button, Card, Dialog, CornerBracket } from '@mks2508/mks-ui/react';

// Core types only (framework-agnostic)
import type { StyleSlots, IBaseConfig } from '@mks2508/mks-ui';

// Sub-path imports (tree-shaking)
import { Button } from '@mks2508/mks-ui/react/ui/Button';
import { cn } from '@mks2508/mks-ui/react/lib/utils';

Explore