PeaceUI - Vue 3 Web Components Library

A modern, lightweight Vue 3 UI component library for building web applications. PeaceUI provides customizable web components that can be used in any web application, regardless of the framework.

Features

• 🎨 Modern Design - Clean and professional components
• 🔌 Framework Agnostic - Works with any framework or vanilla JavaScript
• 📱 Responsive - Mobile-first design principles
• 🎯 TypeScript Support - Built with TypeScript for better developer experience
• 🚀 Tree-shakeable - Only import what you need
• 🎪 Tailwind CSS - Styled with Tailwind CSS for easy customization

Components

PeaceUI includes the following components:

Cards

A flexible card component that supports:

• Image slot for visual content
• Title slot for headings
• Description slot for main content
• Categories slot for metadata
• Responsive layout (stack on mobile, side-by-side on desktop)
• Tailwind CSS styling with rounded corners and proper spacing
• Background color control
• Custom HTML support via data-advancedhtml prop

Content

A simple container component with:

• Centered content using mx-auto
• Full-width container class
• Custom HTML support via data-advancedhtml prop
• Scoped styling with imported style.css

Footer

A customizable footer component featuring:

• Gradient background (from #e6a91c50 to #9089fc50)
• Flexible layout with responsive breakpoints
• Multiple named slots for content organization
• Disclaimer title and description slots
• Responsive design (column on mobile, row on desktop)
• Maximum width control with screen-xl
• Consistent text styling and spacing

HeroBannerSearch

A hero banner component with:

• Image background with overlay support
• Search functionality with dedicated slots
• Centered content layout
• 300px fixed height
• Container queries for responsive behavior
• Flexible slot system for search bar and button
• TypeScript support
• Custom styling with BEM methodology
• Z-index management for proper layering

Technical Details

Dependencies

• Vue 3.3.4+
• TypeScript 5.5.4
• Tailwind CSS 3.4.10
• HeadlessUI/Vue 1.7.23
• HeroIcons/Vue 2.1.5
• Shoelace 2.17.1

Development Tools

• Vite 4.4.5
• Vue TSC 2.1.6
• PostCSS 8.4.45
• Autoprefixer 10.4.20