Getting Started

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/v2.0.0/focus-ui.css"
  integrity="sha384-6Hu/ziK6k/v37QJ71CE74k5b3yiCB7bzjoSEBzEgiACNXOGuOl2mqprjy0tgjDiN"
  crossorigin="anonymous">
<script
  src="https://cdn.focus-ui.de/v2.0.0/focus-ui.min.js"
  integrity="sha384-GDpJYcUtWAkXeEY/ue8/sOuXYpDByN+yjFe52qcCpTwGYyVze1NxcY1qeImkQNHH"
  crossorigin="anonymous"></script>

Available CDN Files

Available Versions

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

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')

Ready-Made Templates

Jump-start your project with production-ready page templates built entirely with Focus UI:

View all templates →

Naming Convention

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