ArekUI · A standalone CSS framework

Four themes, one attribute

Set data-theme on <html> and everything re-skins. Flip one below — the whole page follows, not just the demo.

Theme switcher →

Live · Light

Flip a theme and watch every component change

Draft

Neo adds hard shadows. Pixel drops the radius.

Build 65%

Your pick is saved to localStorage. With JavaScript off it falls back to the system preference.

Light & Dark

The defaults. Light until you ask for dark, with prefers-color-scheme as the fallback.

Neobrutalism

3px borders, hard offset shadows, saturated cyan, lime and yellow.

Pixel art

Square corners, a muted retro palette and pixel-only utilities.

Try it right here

Nothing on this page is an image. Every tile is the markup you would paste into your own project.

All 33 components →

Buttons · join

Tabs

Panel one content.

Alerts

Saved successfully.

Check your config.

Build failed.

Chat bubble

A

Alice · 10:30 AM

How does the theming work?

B

Bob · 10:32 AM

One attribute on <html>.

Pagination

Rating

Selected: 4

Why ArekUI

Four things worth knowing before you pick a framework.

Quick Start →

Zero

No runtime dependencies

One CSS file and one JS file. Link them and ship — there is no build step to install.

Components

33 components

Buttons through toasts, accordions, carousels, popovers and file upload — all attribute-driven.

Themes

4 themes

Light, dark, neobrutalism and pixel-art. Set data-theme once; the choice is remembered.

Builder

Only what you use

npx arekui-build scans your markup and emits a stylesheet containing just the classes you reference.

Get started in one line

Already on unpkg above? Use the package manager if you would rather pin a version.

All commands →

npm install arekui

Read the Quick Start View source on GitHub