glass-studio-ui-pro

v1.1.15

Published

2 months ago

Premium Liquid Glass UI Library for Vue 3

0High
0Medium
0Low

bachmatri2

💎 Glass Studio UI Pro (Cg View Studio)

Premium Liquid Glass (Crystal) & 3D Claymorphic (Natural) UI Library for Vue 3

[!IMPORTANT] HỆ THỐNG ĐANG TRONG GIAI ĐOẠN BETA: Đã mở dùng thử miễn phí đến ngày 01/05/2026. Sau thời gian này, các tính năng Pro sẽ yêu cầu Giấy phép (License Key) chính thức.

Glass Studio Preview

glass-studio-ui-pro is a dual-engine Vue 3 UI library. It features the Crystal Glass (CG) system for advanced glassmorphism and the Natural (CN) system for architectural 3D claymorphism. Engineered for high-performance dashboards, real-time liquid filters, and volumetric tactile interfaces.

✨ Key Engines

🏺 Natural Engine (CN) - New

The Natural system focuses on soft surfaces, volumetric depth, and tactile interactions without the "noise" of transparency.

High-Fidelity Claymorphism: Advanced 3D lighting models.
Architectural Elevation: Multi-layered shadow system for deep hierarchy.
Static vs Fluid Interaction: Choose between rigid or animated hover states.

🧊 Crystal Engine (CG)

The legacy-plus glass system for futuristic, transparent designs.

Liquid Distortion Filters: (Mist, Grain, Frosted, Ripple, Wavy).
Material Presets: 6 specialized presets (Light to Heavy Frost).

🚀 Installation & Setup

1. Installation

npm install glass-studio-ui-pro

2. Tailwind CSS v4 Configuration

Ensure @tailwindcss/vite is in your vite.config.ts and @import "tailwindcss"; is in your main CSS file.

3. Plugin Registration

import { GlassUI } from "glass-studio-ui-pro";
app.use(GlassUI, { licenseKey: "YOUR-KEY" });

🎨 Natural Components (`Cn` prefix)

CnSidebar & CnMenu (Navigation Suite)

Tactile vertical navigation with collapsible states and soft-inset active indicators.

<template>
  <CnSidebar v-model:collapsed="isCollapsed" color="slate">
    <template #header><span>Pro Console</span></template>
    <CnMenu :items="navItems" v-model:activeId="activeId" />
  </CnSidebar>
</template>

CnCard (Volumetric Surface)

A claymorphic container with customizable light trajectory and hoverLift physics.

<template>
  <CnCard color="indigo" :intensity="1.2" hoverLift>
    <h3>Natural 3D Interface</h3>
  </CnCard>
</template>

CnTable (Architectural Data Grid)

High-fidelity data table with sticky column support and integrated pagination.

<template>
  <CnTable 
    :cols="tableCols" 
    :rows="dataRows" 
    :fixed="[2, 1]"
    :pagination="{ page: 1, pageSize: 15, total: 100 }"
    @update:page="handlePage"
  />
</template>

CnButton (Tactile Controls)

Buttons with 3D elevation and soft-inset active states across 5 variants.

<template>
  <CnButton variant="solid" color="emerald" size="lg" pill>
    Confirm Action
  </CnButton>
</template>

💎 Glass Components (`Cg` prefix)

CgCard & CgButton

Premium glassmorphism with liquid distortion and neon glow.

<template>
  <CgCard type="heavy-frost" shadow="mist">
    <CgButton variant="primary" glow>Liquid Action</CgButton>
  </CgCard>
</template>

CgToolbar (Adaptive)

Features full, floating, and fit width modes with reflex glints.

🔶 Common Components (`Cm` prefix)

CmIcon (Morphic Icon)

Single component for any icon with liquid morphing physics and 3D shadows.

<template>
  <CmIcon :icon="HomeIcon" size="lg" bg="bg-indigo-500" />
</template>

📖 API Reference

Natural (CN) System Props

CnSidebar

CnTable

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | cols | Column[] | [] | { key, label, width }. | | rows | any[] | [] | Data array. | | fixed | [number, number] | [0, 0] | Fixed cols [Start, End]. | | pagination| Pagination | — | { page, pageSize, total }. |

CnCard

🔑 PRO License registration

To purchase a PRO license, please visit https://finzo.duckdns.org/.

Register account -> Purchase -> Receive Key.
If your license expires, components enter Secure Lock state.