Getting Started

Installation

Via CDN (Recommended)

The fastest way to get started is to include a pinned Focus UI release from the CDN:

HTML

<!-- Focus UI CSS -->
<link rel="stylesheet" href="https://cdn.focus-ui.de/v2.1.1/focus-ui.css"
  integrity="sha384-L89gOIZylesOkfz2j2Bcfub2w47fR77Zdf+3ru/lp8xRNors7iJuxfdo/eODC34X" crossorigin="anonymous">

<!-- Focus UI JavaScript (optional, for interactive components) -->
<script src="https://cdn.focus-ui.de/v2.1.1/focus-ui.min.js"
  integrity="sha384-iUMwqkYI3CKz5rdvu93jxzOMhmhuW154RquKbJtSVGIyEhNvAzCQRQkzZgiQvx4Y" crossorigin="anonymous"></script>

Version Pinning & SRI

For production, pin to a specific version to avoid unexpected changes and use Subresource Integrity (SRI) hashes for security:

HTML

<link
  rel="stylesheet"
  href="https://cdn.focus-ui.de/v2.1.1/focus-ui.css"
  integrity="sha384-L89gOIZylesOkfz2j2Bcfub2w47fR77Zdf+3ru/lp8xRNors7iJuxfdo/eODC34X"
  crossorigin="anonymous">
<script
  src="https://cdn.focus-ui.de/v2.1.1/focus-ui.min.js"
  integrity="sha384-iUMwqkYI3CKz5rdvu93jxzOMhmhuW154RquKbJtSVGIyEhNvAzCQRQkzZgiQvx4Y"
  crossorigin="anonymous"></script>

Why use SRI? SRI blocks files whose bytes differ from the reviewed hash; it does not prove that the original release is safe. See the SRI documentation for more information.

Available CDN Files

File	Description
`focus-ui.css`	Complete CSS bundle (all components)
`focus-ui.js`	UMD bundle for browsers
`focus-ui.min.js`	Minified UMD bundle
`focus-ui.esm.js`	ES Module bundle for bundlers

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:

HTML

<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.

JavaScript

// 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:

JavaScript

// 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 → light
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:

Dashboard

Sidebar nav, top bar, cards and tables.

Login Page

Centered form with social login options.

Admin Panel

Dark sidebar, stats, and data tables.

Landing Page

Hero section, features grid, and CTA.

View all templates →

Naming Convention

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

Pattern	Example	Description
`focus-{component}`	`focus-btn`	Base component class
`focus-{component}-{variant}`	`focus-btn-primary`	Component variant (color, style)
`focus-{component}-{size}`	`focus-btn-lg`	Size modifier
`focus-{utility}`	`focus-mt-4`	Utility class (margin-top: 1rem)