ARStyle
avatar

ARStyle

A standalone CSS framework. No build step. Browse the overlay, forms and data display below.

Get Started Read Docs

Neobrutalism Theme

Toggle to Neo theme using the swap button in the navbar. Hard shadows, thick borders, bold colors.

Hard Shadow Card

3px border, no blur

Accent Badge Green Tag

Buttons

Cards & Badges

image

Card title

Card body with some description text and tags below.

tag Primary sm xs

Simple

Cards work without a figure too.

Neutral surface

Set the background with the ar-bg-base-200 utility.

Feedback

Information alert
Success alert
Warning alert
Error alert

Progress

65%

Forms

Data Display

Table

ProjectStackYear
News PortalLaravel2021
PWA CalculatorJavaScript2023
School WebsiteWordPress2024

Timeline

  • 2010 — Started building blogs
  • 2015 — First news portal
  • 2026 — Shipped ARStyle

Stepper

Plan
Build
Ship

Avatar & Divider

AR
 Andika Rekatias
or

Divided content.

Overlay

Modal

Modal title

Content inside the modal box. Close via the button, backdrop, or Esc.

Drawer (checkbox / JS toggle)

Drawer pushes from the left. Works with the checkbox input, or the data-ar-drawer-toggle button.

Carousel

Slide 1
Slide 2
Slide 3

Tabs & Accordion

Panel one content.
What is ARStyle?
A dependency-free CSS framework extracted from a real design system.
Does it need a build step?
No. Link arekui.css and go.
How do I theme it?
Set data-theme="light" or "dark" on <html>.

Typography

Text sizes

xs sm base lg xl 2xl 3xl 4xl 5xl

Prose

Article heading

This is a paragraph inside ar-prose. It styles headings, paragraphs, lists, quotes, code and tables automatically.

“Typography is the craft of endowing human language with a durable visual form.”
  • First list item
  • Second list item
const framework = "ARStyle";
framework.standalone === true;

Utilities

bg + pad neutral primary gray border shadow opacity hover:scale

flex justify-between

badge

Text utilities: thin · medium · bold · tight leading · wide tracking · pretty wrap.

Toast / Snackbar

Click the buttons to trigger toast notifications.

Skeleton Loader

Pagination

Rating

Interactive (click stars)

Selected: 0

Read-only (3 stars)

Chat Bubble

A
Alice · 10:30 AM
Hey! How's the new framework going?
B
Bob · 10:32 AM
Going great! Just added toast notifications and rating components.
Delivered
A
Nice! Can't wait to see it in action.

Tag / Chip

Default Primary Secondary Accent Neutral Info Success Warning Error
Outline Primary Success Error Large Small Closable

Popover

Click the buttons to toggle popovers.

Popover Title

This popover appears below the trigger button.

Info

This popover appears above the trigger.

Right-side popover with rich content.

File Upload