DEV Community

Richard Fu
Richard Fu

Posted on • Originally published at richardfu.net on

Introducing Cosmic UI Lite: A Zero-Dependency Space-Themed UI Library

#typescript #webdev #spacetheme #scifi

Ever needed a futuristic, sci-fi UI for your web project but found existing solutions too heavyweight or framework-dependent? That’s exactly the problem I faced when building my game project. Today, I’m excited to introduce Cosmic UI Lite – a lightweight, zero-dependency TypeScript UI component library designed for space-themed interfaces.

🌟 Try the Live Demo | 📦 NPM Package | 📚 GitHub Repository

Cosmic UI Lite modal screenshot

💡 The Motivation

While working on my game project, I discovered rizkimuhammada/cosmic-ui – a beautiful cosmic-themed UI library. However, it had some limitations for my use case:

  • React Dependency : My game was built with vanilla TypeScript
  • Feature Bloat : I only needed a handful of essential components
  • Bundle Size : Needed something lightweight for game performance
  • Build Complexity : Wanted a simple, drop-in solution

So I decided to create a focused alternative that prioritizes simplicity, performance, and universal compatibility.

🛠️ The Technology Behind Cosmic UI Lite

SVG-Based Dynamic Rendering

The heart of Cosmic UI Lite lies in its dynamic SVG generation system. Instead of using static images or complex CSS tricks, every component creates its cosmic borders and backgrounds programmatically:


// SVG elements are created on-the-fly
const backgroundSvg = createSvgElement('cosmic-bg', '0 0 474 332');
const gradient = createGradient('cosmicGradient', [
  { offset: '0%', color: '#1a1a2e' },
  { offset: '50%', color: '#2a2a4e' },
  { offset: '100%', color: '#1a1a2e' }
]);
Enter fullscreen mode Exit fullscreen mode

This approach provides several advantages:

  • Scalability : Vector graphics look crisp at any size
  • Customization : Colors and gradients can be modified programmatically
  • Performance : No external image dependencies to load
  • Consistency : Unified shape language across all components

Four-Layer Architecture

Each component follows a consistent 4-layer structure:

  1. Wrapper Element : Container with positioning and hover effects
  2. SVG Background : Animated gradient fill with cosmic patterns
  3. SVG Border : Glowing outline that responds to interactions
  4. Content Layer : Text, buttons, and interactive elements

Zero Dependencies Philosophy

Cosmic UI Lite is built with pure TypeScript and vanilla JavaScript – no runtime dependencies whatsoever. This means:

  • ✅ Universal Compatibility : Works with any framework or vanilla JS
  • ✅ Tiny Bundle Size : No dependency tree bloat
  • ✅ Security : No supply chain vulnerabilities
  • ✅ Reliability : Won’t break due to dependency updates

🎨 Component Showcase

Cosmic Button

Animated buttons with hover effects and multiple variants:


import { CosmicUI } from 'cosmic-ui-lite';

const launchButton = CosmicUI.createButton({
  text: '🚀 Launch Mission',
  variant: 'primary',
  onClick: () => console.log('Mission started!')
});

document.body.appendChild(launchButton);
Enter fullscreen mode Exit fullscreen mode

Cosmic Modal

Full-featured modals with backdrop blur and cosmic styling:


const confirmModal = CosmicUI.createModal({
  title: 'Mission Control',
  content: `
    <p>Are you ready to launch the mission?</p>
    <p>This action cannot be undone.</p>
  `,
  buttons: [
    {
      text: 'Cancel',
      variant: 'secondary',
      onClick: () => console.log('Cancelled')
    },
    {
      text: 'Launch',
      variant: 'danger',
      onClick: () => console.log('Launching!')
    }
  ]
});

CosmicUI.showModal(confirmModal);
Enter fullscreen mode Exit fullscreen mode

Utility Methods

Built-in utilities for common patterns:


// Quick confirmation dialog
CosmicUI.showConfirmation(
  'Delete Save File',
  'This will permanently delete your progress.',
  () => console.log('Deleted'),
  () => console.log('Cancelled')
);

// Error notifications
CosmicUI.showError(
  'Connection Lost',
  'Unable to connect to mission control.',
  () => console.log('Acknowledged')
);
Enter fullscreen mode Exit fullscreen mode

🎯 Perfect for Game Development

Cosmic UI Lite was specifically designed with game development in mind:

  • Performance Optimized : Lightweight components that don’t impact game performance
  • Thematic Consistency : Space/sci-fi aesthetic perfect for space games, RPGs, and strategy games
  • Framework Agnostic : Works with any game engine that supports web technologies
  • Responsive Design : Adapts to different screen sizes and device types

🚀 Getting Started

Installation 


# NPM
npm install cosmic-ui-lite

# Yarn
yarn add cosmic-ui-lite

# CDN
<script src="https://unpkg.com/cosmic-ui-lite@latest/dist/index.umd.js"></script>
Enter fullscreen mode Exit fullscreen mode

Basic Usage 


import { CosmicUI } from 'cosmic-ui-lite';
// CSS is automatically imported

// Create a space dashboard
const statusCard = CosmicUI.createCard({
  title: 'Ship Status',
  content: `
    <p><strong>Hull Integrity:</strong> <span style="color: #00ff88;">100%</span></p>
    <p><strong>Power Level:</strong> <span style="color: #00d4ff;">Optimal</span></p>
    <p><strong>Shields:</strong> <span style="color: #ffaa00;">Charging</span></p>
  `
});

document.body.appendChild(statusCard);
Enter fullscreen mode Exit fullscreen mode

🎨 Visual Design Philosophy

The visual design draws inspiration from classic sci-fi interfaces with modern web standards:

  • Angled Corners : Distinctive beveled edges that evoke spaceship control panels
  • Animated Gradients : Subtle particle-like animations that bring interfaces to life
  • Cosmic Color Palette : Deep space blues, electric cyans, and warning oranges
  • Glowing Effects : Subtle borders that pulse and respond to user interaction

📊 Technical Specifications

  • 📦 Bundle Size : ~15KB minified + gzipped
  • 🎯 TypeScript : Full type safety with comprehensive interfaces
  • 🌐 Browser Support : All modern browsers (ES2020+)
  • 📱 Responsive : Mobile-first design with adaptive layouts
  • ♿ Accessible : WCAG-compliant with keyboard navigation
  • ⚡ Performance : Zero-dependency, optimized for games

🔮 Future Roadmap

While Cosmic UI Lite is designed to stay lightweight, there are some exciting possibilities on the horizon:

  • Theme System : Multiple cosmic color schemes
  • Animation Presets : Configurable animation intensity levels
  • Component Extensions : Additional specialized components based on community feedback
  • Framework Integrations : Optional wrappers for React, Vue, and Angular

🌟 Try It Today!

Ready to add some cosmic flair to your next project? Check out these resources:

Whether you’re building a space exploration game, a sci-fi web application, or just want to add some futuristic flair to your project, Cosmic UI Lite provides the perfect balance of visual impact and technical simplicity.

What kind of cosmic interfaces will you build? I’d love to see your creations – share them in the comments below or tag me on social media!

Cosmic UI Lite is open source and available under the MIT License. Contributions, feedback, and cosmic creativity are always welcome! 🚀

The post Introducing Cosmic UI Lite: A Zero-Dependency Space-Themed UI Library appeared first on Richard Fu.

Top comments (0)