Introduction

MeldUI is a Vue 3 component library built on shadcn-vue with Tailwind CSS v4, providing consistent and beautiful UI components.

What is MeldUI?

MeldUI is a design system built on shadcn-vue that provides a comprehensive set of Vue 3 components for building modern web applications. It consists of three packages:

@meldui/vue — 63+ UI components (buttons, dialogs, forms, data tables, and more)
@meldui/charts-vue — 9 chart types built on Apache ECharts
@meldui/tabler-vue — 5000+ Tabler icons with custom defaults

Key Features

Tailwind CSS v4 — CSS-first configuration with OKLch color space
Dark mode — Built-in dark mode support across all components
Accessible — Built on Reka UI primitives with proper ARIA attributes
Type-safe — Full TypeScript support with strict prop typing
Tree-shakeable — Only import what you use
Customizable — Theme via CSS variables, extend via class merging

Packages

Package	Description
`@meldui/vue`	Core UI component library
`@meldui/charts-vue`	Data visualization charts
`@meldui/tabler-vue`	Icon library (5000+ icons)

Quick Start

# Install the packages
pnpm add @meldui/vue @meldui/tabler-vue vue

# For charts
pnpm add @meldui/charts-vue

See the Installation guide for detailed setup instructions.