Focus UI

Clean, smooth, and simply awesome component library

Get Started View Components

Features

Clean & Minimal

Focus on content with a clean, distraction-free design that looks great out of the box.

Progressive Enhancement

Works perfectly with CSS-only. Add JavaScript for enhanced interactive features.

Fully Responsive

All components are mobile-first and work beautifully on any device size.

Accessible

Built with accessibility in mind, following WCAG 2.1 AA guidelines.

Customizable

CSS variables throughout make theming and customization effortless.

Offline Ready

Download all assets for complete offline usage in your applications.

All Components

Ready-to-use components for building modern web interfaces

JS = JavaScript required JS = JavaScript recommended for enhanced features

Alerts Contextual feedback messages JS Badges Small count and labeling Breadcrumbs Navigation hierarchy Buttons Interactive action triggers Callouts Highlighted information boxes Cards Flexible content containers Dividers Visual separators and section dividers Dropdowns Toggleable context menus JS Forms Input fields and controls JS Modals Dialog windows JS Navbar Navigation headers Pagination Page navigation Progress Progress indicators Sidebar Side navigation panels JS Spinners Loading indicators Tables Tabular data display Tabs Tabbed content panels JS Toasts Notification popups JS

Quick Example

New

HTML

<button class="focus-btn focus-btn-primary">Primary Button</button>
<button class="focus-btn focus-btn-success">Success Button</button>
<div class="focus-badge focus-badge-danger">New</div>

Ready to get started?

Check out the Getting Started guide to learn how to include Focus UI in your project. It's as simple as adding a CSS file!