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.

Dark Mode Ready

Built-in theme switching with automatic system preference detection and localStorage persistence.

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

required

Doesn't work without JS

recommended

Works but limited without JS

optional

Nice-to-have features

Navigation

Navbar Navigation headers optional Sidebar Side navigation panels optional Breadcrumbs Navigation hierarchy Pagination Page navigation Table of Contents Auto-generated navigation from page headings optional Tabs Tabbed content panels recommended Searchbar Search input with results dropdown recommended Dropdowns Toggleable context menus recommended

Forms & Inputs

Forms Input fields and controls optional Buttons Interactive action triggers Toggle Switch iOS-style on/off toggle switches

Feedback

Alerts Contextual feedback messages optional Toasts Notification popups required Modals Dialog windows required Progress Progress indicators Spinners Loading indicators Tooltip Contextual hints on hover or focus Skeleton Loading placeholders for content

Content

Avatar User profile images and initials Badges Small count and labeling Callouts Highlighted information boxes Cards Flexible content containers Code Code snippets with copy optional Dividers Visual separators and section dividers Hero Landing page hero sections Preview Component demos and full page previews Tables Tabular data display optional

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!