v0.6.0
◈ Contract-driven · Token-first · Zero runtime

The CSS system that
scales with you

82 UI surfaces, one stylesheet. Theme switching with a single attribute. No JavaScript required.

Get started Open Playground →
82
UI surfaces
~10.5 KB
gzip
0 JS
runtime
4
themes

1 — Install

Pick one of three options. No build step required for consumers.

Option A — GitHub Pages CDN (zero install)
<link rel="stylesheet" href="https://snrj35-dev.github.io/Fikir-Css/dist/fikir.css" />
Option B — npm (beta)
npm install fikir-css@beta
Option C — Build from source
git clone https://github.com/snrj35-dev/Fikir-Css.git && npm install && npm run build

2 — Theme & Density

All themes are activated via data-* attributes — no rebuild required. Toggle and see the effect live:

btn-primary
btn-danger
Success
badge-success
Warning
badge-warning
alert-info
input

Activate in HTML: data-theme="dark" or data-density="compact" on <html>.

3 — Real App Examples

Full starter templates — open and copy-paste. No build step.

Starter
App Shell
Sidebar nav + topbar + content area. Full layout scaffold.
 Starter
Settings Panel
Form, switch, select, card layout. Ready to customise.
 Starter
Data Workflow
Table, stat, badge, pagination. Data-heavy UI template.
 React
React + Vite
Typed resolvers, overlay helpers, dark mode toggle.

Button

btn is the base class — it provides sizing, focus ring, and cursor. A tone modifier (btn-primary, btn-neutral, etc.) is required for color. btn alone is intentionally invisible so it composes cleanly.

btn (no tone — transparent)
btn btn-primary
btn btn-neutral
btn btn-danger
btn btn-outline btn-neutral
btn btn-outline btn-primary
btn-sm
btn-md (default)
btn-lg
disabled attr
btn-neutral disabled

Icon Button

Square button for icons — use icon-button.

icon-button
icon-button
icon-button

Alert

Use alert + tone modifier.

alert
alert alert-danger
alert alert-warning
alert alert-success
alert alert-info

Badge

Neutralbadge-neutral
Primarybadge-primary
Dangerbadge-danger
Warningbadge-warning
Successbadge-success
Infobadge-info

Toast

Normally positioned fixed; shown inline here for preview. Toggle data-open="true".

Saved successfully

toast toast--success

Upload failed

toast toast--error

Session expiring soon

toast toast--warn

New version available

toast toast--info

Spinner

spinner

Skeleton

skeleton

Input / Field

Visual states: default, focus (click the input), invalid (aria-invalid="true"), disabled.

Click to see focus ring.

Please enter a valid email address.

This field is read-only.

field · label · input · aria-invalid · disabled

Select

select

Checkbox · Radio · Switch

checkbox
radio
switch

Textarea

textarea

Card

Plain card

Default variant.

card

Elevated card

With shadow.

card card-elevated

Divider

divider

Surface

Background surface layer
surface

Tabs

Overview content goes here.
tabs · tabs-list · tabs-trigger · tabs-panel

Pagination

pagination · pagination-item · pagination-item--active

Tooltip

tooltip-wrapper · tooltip

Table

Name Status Role
Alice Kim Active Admin
Bob Chen Invited Editor
Carol Davis Suspended Viewer
table

Empty State

No results found

Try adjusting your search or filters.

empty-state · empty-state-title · empty-state-description

Stat

Total users

12,480

+8.2%

Revenue

$42,900

+3.1%

Churn rate

2.4%

+0.4%

stat · stat-label · stat-value · stat-change--up/down

Stepper

Multi-step progress indicator. Use data-state (complete / active / upcoming) on each stepper-item.

  1. Account details
  2. Billing info
  3. Review & confirm
stepper · stepper-item[data-state] · stepper-marker · stepper-label

Timeline

Ordered event list. Last item hides the connector line.

  1. Account created

    Jan 12, 2025

  2. First deploy

    Feb 3, 2025

  3. v1.0 released

    Apr 1, 2025

timeline · timeline-item · timeline-marker · timeline-content · timeline-title · timeline-meta

Tree View

Hierarchical list. Toggle data-tree-expanded (true/false) on tree-view-item to expand/collapse children.

    • App.vue
  • package.json
tree-view · tree-view-group · tree-view-item[data-tree-expanded] · tree-view-toggle · tree-view-label

Progress

Linear progress bar. Set value and max on the native <progress> or use the CSS surface manually.

65%
30%
100%
progress · progress-track · progress-indicator · progress-label

Rating

Star rating. Add rating-item-active to filled stars. Use aria-label for screen readers.

rating · rating-item · rating-item-active
2/5

Range Slider

Native <input type="range"> styled with the range-slider class.

range-slider

Calendar

Monthly grid. Mark selected day with aria-current="date", today with aria-pressed="true".

April 2025

Mo
Tu
We
Th
Fr
Sa
Su
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
calendar · calendar-header · calendar-title · calendar-nav · calendar-grid · calendar-weekday · calendar-day

Typography

Heading 1

heading-1

Heading 2

heading-2

Heading 3

heading-3

Muted text — helper descriptions

text-muted
visually-hidden