overview Component

Welcome to UI.BlueStack.io

A semantic CSS/JS library built on top of Tailwind CSS, following AlignUI design patterns. Create beautiful, consistent interfaces with easy-to-remember component classes.

Explore Components View on GitHub

Quick Start

Quick Start Example

Preview Code
Copy

Card Title

Card content goes here

Key Features

🎯 Tailwind-First

Uses Tailwind's default utilities and color palette. Only adds semantic classes where needed.

🔄 Auto-Building

File watcher automatically rebuilds CSS when you modify components or add new files.

🌙 Dark Mode Ready

Full dark mode support with semantic tokens that automatically adapt to theme changes.

📦 CFML Compatible

Designed to work seamlessly with ColdFusion applications and Lucee server.

Development Principles

  1. 1. Tailwind-First: Always use Tailwind's default colors and utilities before creating custom ones
  2. 2. Automatic Builds: Watcher handles all builds automatically - no manual triggering needed
  3. 3. Semantic Classes: Only create custom CSS for reusable component patterns
  4. 4. Component Structure: Each component has a .cfm file (examples) and .css file (semantic styles)

Project Structure

Directory Structure

Preview Code
Copy 
/var/www/sites/ui.bluestack.io/
├── webroot/
│   ├── assets/
│   │   ├── ui.css         # Compiled CSS output
│   │   ├── style.css      # Base styles
│   │   └── docs.css       # Combined component CSS
│   └── docs/              # Component examples
│       ├── button.cfm     # Button examples
│       ├── button.css     # Button styles
│       └── ...
├── package.json           # Node dependencies
├── tailwind.config.js     # Tailwind configuration
└── watcher.js             # Auto-build watcher