@mks2508/mks-ui

UI component library built on Shadcn UI + Animate UI primitives with custom components, animated icons, and React hooks.

Install

bun add @mks2508/mks-ui

Peer dependencies: react >= 19.2.0, react-dom >= 19.2.0

Architecture

v0.2.0 uses a framework-agnostic core + React namespace architecture:

src/
├── core/           # Framework-agnostic types (StyleSlots, IBaseConfig)
├── react/          # All React code
│   ├── ui/         # 23 UI components (3-file structure)
│   ├── primitives/ # Slot, Highlight, AutoHeight, CountingNumber
│   ├── components/ # MorphingPopover (CSS modules)
│   ├── hooks/      # 4 hooks (Animation/, State/, DOM/)
│   ├── icons/      # 33 lucide-animated icons + HugeIcons
│   └── lib/        # cn(), getStrictContext()
├── index.ts        # Core entry point
└── index.css       # Global styles

Each UI component follows a 3-file structure:

• index.tsx — Component implementation + exports
• {Name}.types.ts — TypeScript interfaces (IPrefix convention)
• {Name}.styles.ts — StyleSlots + CVA variants

Usage

// React components, hooks, icons, utilities
import { Button, Card, Dialog, CornerBracket } from '@mks2508/mks-ui/react';
import { useAutoHeight, useControlledState } from '@mks2508/mks-ui/react';
import { cn } from '@mks2508/mks-ui/react';

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

Components

Animate UI (animated)

| Component | Description | |-----------|-------------| | Accordion | Animated expand/collapse panels | | AlertDialog | Animated alert dialog with backdrop | | Checkbox | Animated checkbox with indicator | | Dialog | Modal dialog with motion transitions | | Menu | Context/trigger menu with highlight | | Popover | Animated popover with arrow | | Progress | Animated progress bar | | Switch | Animated toggle switch | | Tabs | Animated tabs with highlight | | Tooltip | Animated tooltip with arrow |

Primitives

| Component | Description | |-----------|-------------| | AutoHeight | Smooth height auto-resize animation | | CountingNumber | Animated number interpolation | | Highlight | Animated highlight effect | | Slot | Motion-enhanced asChild composition |

Shadcn base

| Component | Description | |-----------|-------------| | Badge | Status/label badges | | Button | Button with variants and sizes | | Card | Container card | | Combobox | Searchable select | | DropdownMenu | Dropdown menu (Shadcn API) | | Field | Form field wrapper | | Input | Text input | | InputGroup | Grouped input with addons | | Label | Form label | | Select | Select dropdown | | Separator | Visual divider | | Textarea | Multi-line text input |

Custom

| Component | Description | |-----------|-------------| | CornerBracket | Corner bracket decoration (tl/tr/bl/br) | | MorphingPopover | Morphing transition popover |

Icons

33 animated Lucide icons + HugeIcons namespace.

import { Check, Search, Terminal } from '@mks2508/mks-ui/react';
import { HugeIcons } from '@mks2508/mks-ui/react';

Hooks

| Hook | Description | |------|-------------| | useAutoHeight | Auto-resizing height | | useControlledState | Controlled/uncontrolled state | | useDataState | Data loading state | | useIsInView | Intersection Observer |

Sub-path imports

import { Button } from '@mks2508/mks-ui/react/ui/Button';
import { Check } from '@mks2508/mks-ui/react/icons/lucide-animated/check';
import { cn } from '@mks2508/mks-ui/react/lib/utils';

Development

bun run dev        # Vite dev server
bun run build      # Production build (Rolldown + tsc + tsc-alias)
bun run typecheck  # Type check
bun run lint       # ESLint
bun run format     # Prettier

License

MIT