Getting Started

Get started with Focus UI, the clean and minimal CSS component library. Learn how to include it in your project and start building beautiful interfaces.

Installation

Via CDN (Quick Start)

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

HTML 
<!-- Focus UI CSS -->
<link rel="stylesheet" href="path/to/focus-ui.css">

<!-- Focus UI JavaScript (optional) -->
<script src="path/to/focus-ui.js"></script>

Via npm

Install Focus UI via npm for use in your build process:

Bash 
npm install focus-ui

ES6 Module Import

If you're using a bundler like Webpack or Vite, you can import the ES6 module version:

JavaScript 
// Import the entire library
import FocusUI from 'focus-ui'

// Or import specific modules (tree-shaking friendly!)
import { Modal, Toast } from 'focus-ui'

// Use the API
Modal.open('#myModal')
Toast.show({ type: 'success', message: 'Saved!' })
Modular Architecture

Focus UI uses a modular build system with Rollup. All JavaScript components are split into separate files in src/js/ and bundled into:

  • dist/focus-ui.js - UMD bundle for browsers (23KB)
  • dist/focus-ui.esm.js - ESM bundle for bundlers (21KB)
  • dist/focus-ui.min.js - Minified UMD (11KB)

Your bundler can tree-shake unused components when importing specific modules, reducing final bundle size.

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

JavaScript Required

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

HTML 
<!-- Trigger button -->
<button class="focus-btn focus-btn-primary" data-focus-modal="#exampleModal">
  Open Modal
</button>

<!-- Modal -->
<div class="focus-modal-overlay" id="exampleModal" style="display:none;">
  <div class="focus-modal">
    <div class="focus-modal-header">
      <h2>Basic Modal</h2>
      <button class="focus-modal-close" data-focus-modal-close>×</button>
    </div>
    <div class="focus-modal-body">
      <p>This is a basic modal. You can put any content here.</p>
      <p>Click outside the modal, press ESC, or click the close button to dismiss it.</p>
    </div>
    <div class="focus-modal-footer">
      <button class="focus-btn focus-btn-secondary" data-focus-modal-close>Close</button>
      <button class="focus-btn focus-btn-primary">Save changes</button>
    </div>
  </div>
</div>

JavaScript API

You can also use the JavaScript API programmatically for more control:

JavaScript 
// Open a modal
FocusUI.Modal.open('#myModal')

// Show a toast notification
FocusUI.Toast.show({
  type: 'success',
  title: 'Success!',
  message: 'Your changes have been saved.',
  duration: 5000
})

// Show a confirm dialog
FocusUI.Modal.confirm({
  title: 'Delete Item',
  message: 'Are you sure you want to delete this item?',
  variant: 'danger',
  confirmText: 'Delete',
  cancelText: 'Cancel'
}).then(() => {
  // User confirmed
  console.log('Deleted!')
}).catch(() => {
  // User cancelled
  console.log('Cancelled')
})

Component Architecture

Focus UI uses a modular component architecture for better maintainability and flexibility. Components are organized into nested folders with separate files for base styles, color variants, size modifiers, and special features.

File Structure

Components with multiple variants (colors, sizes, styles) are split into modular files:

Structure 
src/components/
  button/
    base.css      # Core structure and default styles
    colors.css    # Color variant classes (primary, secondary, etc.)
    outline.css   # Outline button variants
    sizes.css     # Size variants (sm, lg, xl)
    icons.css     # Icon-related styles

  tabs/
    base.css      # Core tabs structure
    styles.css    # Pills, boxed, vertical variants
    colors.css    # Color variants for active states

  progress/
    base.css      # Progress bar structure
    sizes.css     # Size variants
    colors.css    # Color variants
    effects.css   # Striped and animated effects
    circular.css  # Circular progress variant
Split Components

The following 13 components use the modular folder structure:

  • badge (base, colors, modifiers)
  • callout (base, colors)
  • alert (base, colors, icons)
  • button (base, colors, outline, sizes, icons)
  • spinner (base, colors, sizes, dots)
  • pagination (base, colors, sizes, styles)
  • toast (base, animations, colors, progress)
  • tabs (base, styles, colors)
  • progress (base, colors, sizes, effects, circular)
  • navbar (base, searchbar, colors, positioning)
  • divider (base, colors, text, icon, styles)
  • sidebar (base, dark, mobile)
  • modal (base, sizes, types)

Components like card, table, dropdown, breadcrumb, and form remain as single files due to their simpler structure.

Using the Complete Bundle (Recommended)

The easiest way to use Focus UI is to import the complete bundle, which includes all components:

CSS 
@import url('focus-ui.css');

This approach ensures all components load correctly with proper import order.

Cherry-Picking Modules (Advanced)

For smaller bundle sizes, you can import only the components you need. However, you must follow the correct import order:

Import Order Required

Always import base.css before variant files (colors, sizes, styles) to ensure correct CSS cascade. The order matters!

CSS 
/* Core Styles */
@import url('./reset.css');
@import url('./tokens.css');
@import url('./base.css');

/* Button Component */
@import url('./components/button/base.css');      /* Base must come first */
@import url('./components/button/sizes.css');
@import url('./components/button/colors.css');
@import url('./components/button/outline.css');
@import url('./components/button/icons.css');

/* Alert Component */
@import url('./components/alert/base.css');       /* Base must come first */
@import url('./components/alert/colors.css');
@import url('./components/alert/icons.css');

Offline Usage

Focus UI documentation uses external CDN resources (Font Awesome, Prism.js) by default, but you can download all assets for completely offline usage.

Download All Assets

Visit the Download Assets page to download all external dependencies and configure Focus UI for offline use.

Next Steps

Now that you have Focus UI installed, explore the components: