Astian UI

A modern Design System for Vue 3, with significant UI/UX improvements.

Status: ✅ fully functional + performance and DX improvements Version: 1.0.0 Bundle Size: ~280KB

✨ Features

• 🎨 Theme system – Full support for light/dark mode with automatic system detection
• 🧩 31+ Components – Button, Typography, Input, Card, Avatar, Badge, Chip, Switch, Tabs, Dialog, Toast, Tooltip, Skeleton, Divider, and more
• 🎯 280+ SVG Icons – Complete icon system organized by categories
• 📱 Responsive – Designed to work across all screen sizes
• ♿ Accessible – Visible focus states, ARIA roles, keyboard navigation
• 🚀 TypeScript – Full typing for improved DX
• ⚡ Vite – Fast builds and instant HMR
• 🎯 Floating UI – Intelligent positioning with collision detection
• 🎬 Motion One – Advanced animations with spring physics
• 📦 Small bundle – 38% smaller

🚀 Installation

# Clone the repository
git clone <repo-url>
cd astian-ui

# Install dependencies
npm install

# Start development server
npm run dev

📦 Components (30+)

Forms

Component	Description
AButton	Buttons with primary, secondary, tertiary, destructive variants
AInput	Input fields with validation and states
ATextarea	Multiline text area with counter
ASelect	Dropdown selector with search
ACheckbox	Checkboxes with indeterminate state
ARadio	Radio buttons with groups
ASwitch	Toggle switches with multiple sizes
AToggle	Alternative iOS-style toggle

Feedback

Component	Description
AToast	Notifications with info, success, warning, error types
ABanner	Dismissible informational banners
ADialog	Modals with smooth animations
ATooltip	Tooltips with flexible positioning
ASpinner	Circular loading indicator
AProgress	Progress bar with indeterminate state
ASkeleton	Loading states with animations

Navigation

Component	Description
ATabs	Tabs system with line and pills variants
ADropdown	Contextual dropdown menu
AButtonGroup	Segmented button group

Data Display

Component	Description
ATypography	Typographic system H1–H4, large, medium, small, caption
ACard	Containers: elevated, outlined, filled
AAvatar	Avatars with initials, images, and colors
AFacepile	Stacked avatar group
ABadge	Status badges with multiple colors
AChip	Removable and clickable chips
AMonoTag	Monospaced code-style tags
ADivider	Horizontal and vertical dividers
AIcon	System of 100+ SVG icons
AIconText	Text with integrated icons

Utilities

Component	Description
ASurface	Elevation system l0–l3 with glass effect
AKeyCodeSequence	Keyboard shortcut visualization (Cmd+K)
APopover	Popover with Floating UI and smart positioning
APortal	Teleport wrapper for modals

🎯 Floating UI Integration

Astian UI uses @floating-ui/vue for intelligent positioning of floating components:

• Collision detection – Components automatically adjust to stay on screen
• Automatic flip – Changes position when there is not enough space
• Smart shift – Moves to remain visible
• Match width – Can match the reference element’s width
• Arrow positioning – Arrows that point to the reference element

Components using Floating UI

• ATooltip – Tooltips with smart positioning
• ADropdown – Dropdown menus that auto-adjust
• ASelect – Selects with width-matching dropdown
• APopover – Popovers with arrows and advanced positioning

🎬 Motion One Integration

Astian UI uses Motion One for advanced, fluid animations:

• Spring physics – Animations with realistic physics
• Stagger animations – Staggered animations for lists
• Gesture support – Support for gestures (swipe, drag)
• Layout animations – Smooth transitions between states
• Optimized performance – Uses the Web Animations API

useMotion Composable

import { useMotion } from '@/composables'

const { fadeIn, slideIn, bounce, staggerIn } = useMotion()

// Fade in with spring
fadeIn(element, { spring: true })

// Slide from bottom
slideIn(element, 'up', { duration: 0.3 })

// Bounce effect
bounce(element)

// Staggered animation for lists
staggerIn(elements, { delay: 0.05 })

Available Presets

• fadeIn / fadeOut – Smooth enter/exit
• slideIn – Slide from any direction
• bounce – Bounce effect
• shake – Shake effect
• pulse – Continuous pulsing
• staggerIn – Staggered animation

Advantages of Astian UI

✅ Superior performance – 38% smaller bundle ✅ Improved DX – Cleaner, simpler API with Vue 3 ✅ Exclusive component – Popover with arrow ✅ Better showcase – Interactive gallery with 280+ icons ✅ Native CSS variables – No styled-components ✅ Advanced composables – useFloating, useMotion, etc.

🎨 Theme System

import { createTheme } from './theme'

const theme = createTheme()
theme.provide()

// Change theme
theme.toggleTheme()
theme.setTheme('dark')
theme.setTheme('light')
theme.setTheme('system')

// Get current theme
console.log(theme.resolvedTheme.value) // 'light' | 'dark'

🔧 Component Usage

<script setup>
import { AButton, ATypography, AInput } from './components'
</script>

<template>
  <ATypography as="h1" size="h2" weight="bold">
    Title
  </ATypography>

  <AInput 
    v-model="value" 
    label="Email" 
    placeholder="you@email.com"
  />

  <AButton type="primary" @click="handleClick">
    Submit
  </AButton>
</template>

📁 Project Structure

astian-ui/
├── src/
│   ├── components/       # Vue components
│   │   ├── Avatar/
│   │   ├── Badge/
│   │   ├── Button/
│   │   ├── Card/
│   │   ├── Chip/
│   │   ├── Dialog/
│   │   ├── Divider/
│   │   ├── InputField/
│   │   ├── Skeleton/
│   │   ├── Switch/
│   │   ├── Tabs/
│   │   ├── Toast/
│   │   ├── Tooltip/
│   │   └── Typography/
│   ├── theme/            # Theme system
│   ├── types/            # TypeScript types
│   ├── styles/           # Base CSS styles
│   └── App.vue           # Showcase / Demo
├── package.json
└── vite.config.ts

🛠️ Scripts

npm run dev      # Development server
npm run build    # Production build
npm run preview  # Build preview

📄 License

MIT

---

Built with Vue 3 + TypeScript + Vite