@vura-ai/assets

A sophisticated "Liquid Glass" design system for the Vura ecosystem. Built with React 19, Tailwind CSS v4, and Lucide React.

Installation

npm install @vura-ai/assets

Features

• Liquid Glass Aesthetic: Sophisticated backdrop blurs and translucent borders.
• Monochrome Design: A clean, elegant interface focused on high-contrast black and white themes.
• Atomic Components: A wide range of primitives from Buttons and Cards to specialized visualization nodes.
• Type-Safe: Fully written in TypeScript with comprehensive type exports.

Usage

import { Button, Card, ThemeProvider } from "@vura-ai/assets";

function App() {
  return (
    <ThemeProvider>
      <Card variant="glass">
        <h1>Vura Assets</h1>
        <Button onClick={() => console.log("Clicked!")}>Primary Action</Button>
      </Card>
    </ThemeProvider>
  );
}

Component Library

This package includes:

• Layout: PageWrapper, PageLayout, StageWrapper, LiquidScrollContainer
• Navigation: Sidebar, TopNav, NavItem
• Primitives: Button, Card, Input, TextArea, Dropdown, Popover, Search
• Visuals: ConnectedNodes (NodeCanvas, Node), MountainGraphic, Logo, Brand
• Feedback: ToastProvider, useToast, ThinkingIndicator
• Environment: BackgroundGlow, AmbientBacklight, ThemeProvider, useTheme

Design Principles

• Composition over Inheritance: Containers like Sidebar use slots (header, footer) for maximum flexibility.
• Interactive Layers: Use of framer-motion for smooth glass transitions.
• Contrast: High-legibility typography using system font stacks.

License

MIT