Basecoat Ultra

Basecoat Ultra is a Tailwind-first UI component library designed for high performance, minimalism, and deep customization. Built upon the excellent foundation of Basecoat by hunvreus, it brings the magic of shadcn/ui to any traditional web stack without requiring React.

🎡 Live Demo & Documentation

✨ Features

🛠️ Core Improvements Over Upstream

Enhanced from the original Basecoat with numerous optimizations and bug fixes:

• CSS Modularization: Refactored monolithic CSS into modular structure supporting on-demand loading
• Tailwind v4 Compatibility: Fixed escaping issues with complex selectors and modern CSS nesting
• Component Optimizations:
  • Button: Fixed Ghost/Link variant background issues
  • Dialog: Enhanced animations with natural scaling and bounce effects
  • Dropdown Menu: Resolved initialization flickering
  • Sidebar: Intelligent current page highlighting logic
  • Form Elements: Improved contrast and accessibility

🧩 New Components

Comprehensive component library inspired by shadcn/ui, completely framework-independent:

• Standard Components: Accordion, Sheet, Carousel, Input OTP, Toggle Group, Toggle
• External Integrations: Date Picker (Flatpickr), Resizable Panels (Split.js)
• Advanced Features: Command palette, enhanced dialogs, improved navigation

🎨 Visual Enhancements

• Catppuccin Themes: Full suite support (Latte, Frappé, Macchiato, Mocha) with theme switcher
• Neumorphism Effects: Global lighting system with mouse-following effects and 3D transforms
• Enhanced Animations: Smooth transitions and micro-interactions throughout

🏗️ Multi-Package Architecture

• Ultra Package: Framework-agnostic CSS/JS components for any stack
• Svelte Package: Native Svelte 5 components with Runes support
• CLI Tool: Copy-paste workflow for Svelte components
• Documentation: Comprehensive guides and interactive examples

📦 Installation

Choose the package that fits your stack:

For Vanilla HTML/JS, React, Vue, or Other Frameworks

bun add @lanrenbang/basecoat-ultra
# or npm install @lanrenbang/basecoat-ultra

For Svelte 5 Projects

# CLI approach (recommended)
npx basecoat-ultra-svelte@latest init
npx basecoat-ultra-svelte@latest add button

# Package approach
bun add @lanrenbang/basecoat-ultra-svelte

🚀 Quick Setup

Bundler Setup (Vite, Webpack, etc.)

/* In your CSS file */
@import "tailwindcss";
@import "@lanrenbang/basecoat-ultra";
@import "@lanrenbang/basecoat-ultra/theme/catppuccin"; /* Optional */

// In your JS file
import '@lanrenbang/basecoat-ultra/all';

CDN Setup (No Build Tool)

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/@lanrenbang/basecoat-ultra@latest/dist/css/basecoat.cdn.min.css" rel="stylesheet">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/@lanrenbang/basecoat-ultra@latest/dist/js/all.min.js" defer></script>

For detailed setup instructions, configuration options, and usage examples, visit our comprehensive documentation.

🛠️ Development

This project uses a Bun workspace monorepo structure:

packages/
├── ultra/          # Core CSS/JS library (framework-agnostic)
├── svelte/         # Svelte 5 components with Runes
├── cli/            # CLI tool for Svelte components  
└── docs/           # Documentation site (SvelteKit)

Development Commands

# Install dependencies
bun install

# Development servers
bun dev:ultra      # Core Ultra package
bun dev:svelte     # Svelte components
bun dev:docs       # Documentation site

# Build packages
bun run build:ultra
bun run build:svelte  
bun run build:docs

# CLI tool
bun cli            # Run CLI locally

Build Order

Due to package dependencies: Ultra → Svelte → Docs

❤️ Credits

This project stands on the shoulders of giants:

• Basecoat: Original creator hunvreus. Most foundational code belongs to the original author.
• Catppuccin: Beautiful color palettes for theming
• Flatpickr & Split.js: Excellent third-party integrations
• puikinsh/login-forms: Inspiration for neumorphism effects

☕ Support

📄 License

This project is licensed under the MIT License. Original Basecoat content copyright belongs to hunvreus.