Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Home/Components
Your building blocks

Small pieces.
Endless possibilities.

Explore the essentials, see them in action, and take the HTML with you. Styled with StyloftCSS, ready for your next idea.

40 categories168 live examplesZero runtime JS

Framework primitives use sl- classes. Branded illustrations and hover effects use a separate demo extension stylesheet ↓, keeping the core small.

Essentials

14 patterns

Buttons

Clear actions, comfortable targets, and visible keyboard focus.

15 live examples

Cards

Composable surfaces for ideas, projects, plans, and everyday content.

7 live examples

Forms

Real labels, native controls, helpful descriptions, and clear error states.

6 live examples

Accordions

Native disclosures with familiar keyboard interaction. No state library required.

8 live examples

Links

Clear destinations with underline, icon, and hover treatments.

5 live examples

Sliders & carousels

Swipeable scroll-snap galleries, card rails, vertical slides, and native range controls. CSS only.

6 live examples

WYSIWYG editor

Rich-text editor styling with a wrapping toolbar, native editable canvas, and clear focus and validation states.

4 live examples

Tabs & accordions

CSS-only tab layouts, including desktop tabs that become native accordions in narrow containers.

4 live examples

Breadcrumbs

Breadcrumbs patterns built with StyloftCSS and native HTML.

1 live examples

Pagination

Pagination patterns built with StyloftCSS and native HTML.

1 live examples

Text & input patterns

Text & input patterns patterns built with StyloftCSS and native HTML.

6 live examples

Labels, help & forms

Labels, help & forms patterns built with StyloftCSS and native HTML.

6 live examples

Keyboard hints

Keyboard hints patterns built with StyloftCSS and native HTML.

1 live examples

72-component index

Every component named on the referenced HeroUI React catalog, mapped to an original StyloftCSS example or a documented native alternative.

1 live examples

Page sections

04 patterns

Headers

Navigation that wraps gracefully and lets native HTML do the work.

11 live examples

Hero sections

Give an idea a strong introduction with responsive type and clear next steps.

4 live examples

Footers

Close the page with a clear path to the next useful place.

6 live examples

Testimonials

Quote cards, responsive grids, and swipeable testimonial sliders. Ready to compose with CSS only.

4 live examples

Layout

03 patterns

Grid & columns

Equal columns, responsive breakpoints, and auto-fit arrangements.

4 live examples

Flex & rows

Wrapping rows, aligned actions, and responsive sidebar arrangements.

4 live examples

Surfaces & utilities

Surfaces & utilities patterns built with StyloftCSS and native HTML.

4 live examples

Data & feedback

03 patterns

Tables

Readable rows and columns, with captions, header relationships, and scrollable boundaries.

4 live examples

Alerts & badges

Context and status that remain understandable without color alone.

4 live examples

Progress & loading

Progress & loading patterns built with StyloftCSS and native HTML.

5 live examples

Expression

03 patterns

Hover & motion

Small CSS enhancements that respect the user’s motion preferences.

9 live examples

Typography

Fluid headings and comfortable text, grounded in the reader’s font settings.

4 live examples

Cursor effects

A branded mouse cursor across the site, section-specific shapes, a pulsing ring, and animated hover glows. CSS only.

4 live examples

Collections

03 patterns

Chips & tag groups

Chips & tag groups patterns built with StyloftCSS and native HTML.

2 live examples

Dropdown & listbox

Dropdown & listbox patterns built with StyloftCSS and native HTML.

2 live examples

Autocomplete & combobox

Autocomplete & combobox patterns built with StyloftCSS and native HTML.

2 live examples

Controls

01 patterns

Selection controls

Selection controls patterns built with StyloftCSS and native HTML.

4 live examples

Colors

01 patterns

Color controls

Color controls patterns built with StyloftCSS and native HTML.

6 live examples

Date & time

01 patterns

Dates & calendars

Dates & calendars patterns built with StyloftCSS and native HTML.

6 live examples

Overlays

06 patterns

Modal dialogs

Modal dialogs patterns built with StyloftCSS and native HTML.

1 live examples

Alert dialogs

Alert dialogs patterns built with StyloftCSS and native HTML.

1 live examples

Drawers

Drawers patterns built with StyloftCSS and native HTML.

1 live examples

Popovers

Popovers patterns built with StyloftCSS and native HTML.

1 live examples

Tooltips

Tooltips patterns built with StyloftCSS and native HTML.

1 live examples

Toast notifications

Toast notifications patterns built with StyloftCSS and native HTML.

1 live examples

Media

01 patterns

Avatars & groups

Avatars & groups patterns built with StyloftCSS and native HTML.

2 live examples