Getting Started

Get up and running with Focus UI in minutes via CDN, npm, or self-hosting.

Installation

Via CDN (Recommended)

The fastest way to get started is to include Focus UI from our CDN:

<!-- Focus UI CSS -->
<link rel="stylesheet" href="https://cdn.focus-ui.de/latest/focus-ui.css">

<!-- Focus UI JavaScript (optional, for interactive components) -->
<script src="https://cdn.focus-ui.de/latest/focus-ui.min.js"></script>

<link rel="stylesheet" href="https://cdn.focus-ui.de/v1.11.0/focus-ui.css">
<script src="https://cdn.focus-ui.de/v1.11.0/focus-ui.min.js"></script>

Available CDN Files

Available Versions

View all available versions at cdn.focus-ui.de/versions.json or see the GitHub Releases.

Via npm Coming Soon

npm package is not yet published. For now, use the CDN or download from GitHub Releases.

Once published, you'll be able to install via npm install focus-ui.

Self-Hosting

Want to host Focus UI on your own server? See the Self-Hosting Guide for instructions.

Basic Usage

CSS-Only Components

Most Focus UI components work perfectly without JavaScript. Simply add the appropriate CSS classes to your HTML elements:

<button class="focus-btn focus-btn-primary">Primary Button</button>
<button class="focus-btn focus-btn-secondary">Secondary Button</button>
<button class="focus-btn focus-btn-success">Success Button</button>

JavaScript-Enhanced Components

For interactive features like modals, toasts, and dropdowns, include the JavaScript file. Focus UI automatically initializes components with data-focus-* attributes.

// Show a toast notification
FocusUI.Toast.show({
  type: 'success',
  message: 'Hello from Focus UI!'
})

// Show a confirm dialog
FocusUI.Modal.confirm({
  title: 'Confirm',
  message: 'Do you like Focus UI?'
}).then(() => {
  // User confirmed
}).catch(() => {
  // User cancelled
})

JavaScript API

The JavaScript API provides programmatic control over interactive components:

// Modal dialogs
FocusUI.Modal.open('#myModal')
FocusUI.Modal.close('#myModal')
await FocusUI.Modal.confirm({ title: 'Delete?', message: 'Are you sure?' })
const name = await FocusUI.Modal.prompt({ title: 'Enter name' })

// Toast notifications
FocusUI.Toast.show({ type: 'success', title: 'Saved', message: 'Changes saved.' })

// Theme switching
FocusUI.Theme.toggle()      // Cycle: light → dark → auto
FocusUI.Theme.set('dark')   // Set specific theme

// Form validation
FocusUI.Forms.onSubmit('#form', {
  '[name="email"]': { required: true, email: true },
  '[name="password"]': { required: true, minLength: 8 }
}, (data) => console.log(data))

// Sidebar/Dropdown
FocusUI.Sidebar.toggle('#sidebar')
FocusUI.Dropdown.open('#menu')

Naming Convention

All Focus UI classes use the focus- prefix to avoid conflicts with other libraries: