UnoCSS Augmented UI

A UnoCSS preset that reimplements augmented-ui.com for creating futuristic, cyberpunk-inspired UI components with ease.

Features

• 🎨 Clip-path corners - Create angled, scooped, rounded, and notched corners
• ✨ Glowing effects - Built-in inset shadows for cyberpunk aesthetics
• 🎯 Simple utilities - Clean, UnoCSS-style class names
• 🚀 Preset shortcuts - Pre-built panel, button, and card styles
• 🔧 Customizable - Configure prefix, border width, and inset effects
• 🛡️ Defensive programming - Input validation, sanitization, and security hardening

Installation

npm install unocss-augmented-ui

Usage

Basic Setup

// uno.config.ts
import { defineConfig, presetUno } from 'unocss'
import { presetAugmentedUI } from 'unocss-augmented-ui'

export default defineConfig({
  presets: [
    presetUno(),
    presetAugmentedUI({
      prefix: 'aug',              // Default: 'aug'
      defaultBorderWidth: '2px',  // Default: '2px'
      defaultInsetWidth: '2px',   // Default: '2px'
      maxClipSize: 9999,          // Default: 9999 (max px value for corners)
      maxBorderWidth: 999,        // Default: 999 (max px value for borders)
      maxInsetWidth: 999          // Default: 999 (max px value for insets)
    })
  ]
})

Examples

Corner Clips

<!-- Single corner -->
<div class="aug-tl-clip-15">Top-left clipped corner</div>
<div class="aug-tr-clip-15">Top-right clipped corner</div>
<div class="aug-br-clip-15">Bottom-right clipped corner</div>
<div class="aug-bl-clip-15">Bottom-left clipped corner</div>

<!-- Multiple corners -->
<div class="aug-clip-tl-15-br-15">Diagonal clips</div>
<div class="aug-clip-tl-10-tr-10-br-10-bl-10">All corners clipped</div>

Borders and Effects

<!-- Basic border -->
<div class="aug-border">Default 2px border</div>
<div class="aug-border-3">3px border</div>

<!-- Inset glow -->
<div class="aug-inset">Glowing inset effect</div>
<div class="aug-inset-8">Stronger glow (8px)</div>

<!-- Combined -->
<div class="aug-tl-clip-15 aug-br-clip-15 aug-border aug-inset">
  Cyberpunk panel
</div>

Preset Shortcuts

<!-- Pre-built component styles -->
<div class="aug-panel">Panel with default styling</div>
<button class="aug-button">Futuristic button</button>
<div class="aug-card">Card component</div>

Utilities Reference

Corner Utilities

| Class Pattern | Description | Example | |--------------|-------------|---------| | aug-{corner}-clip-{size} | Clip corner at angle | aug-tl-clip-15 | | aug-clip-{corners} | Multiple corners | aug-clip-tl-15-br-20 |

Corners: tl (top-left), tr (top-right), br (bottom-right), bl (bottom-left)

Border Utilities

| Class | Description | |-------|-------------| | aug-border | Default border (2px) | | aug-border-{width} | Custom border width | | aug-border-{color} | Colored border |

Effect Utilities

| Class | Description | |-------|-------------| | aug-inset | Inset glow effect (default) | | aug-inset-{width} | Custom inset glow | | aug-container | Base container styling |

Shortcuts

| Shortcut | Equivalent | |----------|-----------| | aug-panel | aug-container aug-tl-clip-10 aug-br-clip-10 aug-border aug-inset | | aug-button | aug-container aug-tl-clip-8 aug-br-clip-8 aug-border-2 aug-inset-4 | | aug-card | aug-container aug-tl-clip-15 aug-tr-clip-5 aug-br-clip-15 aug-bl-clip-5 aug-border aug-inset |

Examples

See the example/index.html file for a comprehensive demo showcasing:

• Basic corner clips
• Combined corner effects
• Preset shortcuts
• Gradient backgrounds
• Interactive elements
• Complex layouts

API

presetAugmentedUI(options)

Options

interface AugmentedUIOptions {
  /** Utility prefix (default: 'aug') */
  prefix?: string

  /** Default border width (default: '2px') */
  defaultBorderWidth?: string

  /** Default inset shadow width (default: '2px') */
  defaultInsetWidth?: string

  /** Maximum allowed clip size in pixels (default: 9999) */
  maxClipSize?: number

  /** Maximum allowed border width in pixels (default: 999) */
  maxBorderWidth?: number

  /** Maximum allowed inset width in pixels (default: 999) */
  maxInsetWidth?: number
}

Security & Safety

This preset implements extensive defensive programming practices:

Input Validation

• ✅ All numeric inputs are sanitized and bounds-checked
• ✅ Color names are validated against safe character patterns
• ✅ CSS dimensions are validated for format and safety
• ✅ Prefix is escaped to prevent regex injection

Bounds Checking

• ✅ Maximum clip size: 9999px (configurable)
• ✅ Maximum border width: 999px (configurable)
• ✅ Maximum inset width: 999px (configurable)
• ✅ Maximum 4 corners in combined utilities
• ✅ String length limits on all inputs

Sanitization

• ✅ Color names: alphanumeric, hyphens, underscores only
• ✅ Numeric values: stripped of non-digit characters
• ✅ Gradient directions: whitelisted values only
• ✅ No special characters that could break CSS

Protection Against

• 🛡️ CSS injection attacks
• 🛡️ Prototype pollution
• 🛡️ ReDoS (Regular Expression Denial of Service)
• 🛡️ Type coercion attacks
• 🛡️ Integer overflow
• 🛡️ Malformed input strings

Error Handling

• Graceful fallbacks for invalid configurations
• Console warnings for configuration issues
• Silent rejection of malicious inputs
• Try-catch blocks around critical operations

Customization

You can customize colors using inline styles or UnoCSS color utilities:

<div class="aug-panel" style="border-color: #00d4ff;">
  Custom colored panel
</div>

<div class="aug-button hover:brightness-110">
  Interactive button with hover effect
</div>

Development

Testing

Run the test suite:

npm test

Run tests in watch mode:

npm run test:watch

Generate coverage report:

npm run test:coverage

The test suite includes:

• Corner clip utilities (all positions and types)
• Combined corner utilities
• Border utilities (with and without colors)
• Inset utilities (with and without colors)
• Background gradient utilities
• Preset shortcuts (panel, button, card)
• Custom prefix configuration
• Default width configuration
• Hover variants
• Edge cases and integration tests
• Defensive programming tests (malicious inputs, injection attempts, boundary values)

License

MIT

Credits

Inspired by augmented-ui by James0x57