v1.2.1
◈ Contract-driven · Token-first · Zero runtime

The CSS system that
scales with you

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

Get started Open Playground →
99
UI surfaces
~18 KB
gzip
0 JS
runtime
4
themes

0 — Start Here

Use this site as the curated gallery for high-value, mostly supported surfaces. Use the playground as the workflow lab for templates, interaction-heavy checks, and beta coverage.

Consumer
Build With Supported Defaults
Start from install, themes, and gallery examples when you want the stable path first.
 Contributor
Follow The Contribution Path
Go to the contributor path, support matrix, and RFC flow when you are extending the system.
 Maintainer
Release And Govern
Use the maintainer path for release flow, selector freeze policy, and support-level governance.

Site role: gallery-first onboarding and copy-paste surfaces. Playground role: starter templates, workflow demos, support-tier visibility, and deeper interaction smoke paths.

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 (stable)
npm install fikir-css
Option C — Build from source
git clone https://github.com/snrj35-dev/Fikir-Css.git && npm install && npm run build

Prerelease channels are opt-in: use npm install fikir-css@beta or npm install fikir-css@rc only when a release note explicitly asks for them.

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. The official contract is style + tone + size: use a style modifier like btn-solid or btn-ghost, then pair it with a tone such as btn-primary or btn-danger.

btn btn-solid btn-primary
btn btn-soft btn-primary
btn btn-outline btn-primary
btn btn-ghost btn-primary
btn btn-plain btn-primary
btn btn-solid btn-neutral
btn btn-outline btn-neutral
btn btn-solid btn-danger
btn btn-ghost btn-danger
btn-sm
btn-md (default)
btn-lg
disabled attr

Icon Button

Square button for icons — use icon-button.

icon-button
icon-button
icon-button

Alert

Use alert with a tone class. The default style is soft; data-style="outline" is the official alternate.

alert
alert alert-danger
alert alert-warning data-style="outline"
alert alert-success
alert alert-info

Badge

Solidbadge badge-solid badge-primary
Softbadge badge-soft badge-primary
Outlinebadge badge-outline badge-primary
Plainbadge badge-plain badge-primary
Successbadge badge-soft badge-success
Dangerbadge badge-outline badge-danger

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 data-style="outline"

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

Flat card

Default container style.

card card-flat

Subtle card

Uses the default page layer.

card card-subtle

Elevated card

With shadow.

card card-elevated

Interactive card

Hover or focus this surface.

 card card-interactive

Divider

divider

Surface

Flat
Subtle
Elevated
Interactive
surface-flat · surface-subtle · surface-elevated · surface-interactive

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