Fikir CSS — 5-Minute Quickstart

Step 1 of 7

Install Fikir CSS

Add the package to your project with your package manager.

        
# npm
npm install fikir-css

# or pnpm
pnpm add fikir-css

# or yarn
yarn add fikir-css
      

No build step required

Fikir CSS ships a pre-built dist/fikir.css. You don't need to configure PostCSS, Sass, or any preprocessor.

Step 2 of 7

Import the stylesheet

One import. That's it.

In a bundler (Vite / webpack / Parcel):

        
// src/main.js (or main.ts, main.jsx, etc.)
import "fikir-css/css";

In plain HTML:

        
<link rel="stylesheet" href="node_modules/fikir-css/dist/fikir.css" />
      

Via CDN (no install):

        
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/fikir-css@0.5.0/dist/fikir.css" />

Step 3 of 7

Set the theme attribute

Fikir CSS uses data-theme on the root element to activate the color palette.

        
<html lang="en" data-theme="light">
      

Without data-theme, the CSS custom properties won't resolve and you'll see unstyled output. Try toggling it:

Notice what happens to the background and text when data-theme is removed.

Step 4 of 7

Your first component

Use semantic class names — no configuration needed.

        
<button class="btn btn-primary">Get started</button>
<button class="btn btn-neutral">Cancel</button>
<button class="btn btn-outline btn-danger">Delete</button>
      

Add a card with form:

        
<div class="card card-elevated" style="padding:1.5rem">
  <div class="field">
    <label class="label" for="email">Email</label>
    <input class="input" type="email" />
  </div>
  <button class="btn btn-primary">Subscribe</button>
</div>
      

We'll never share your email.

Step 5 of 7

Dark mode in one line

Toggle data-theme on <html> — every component updates automatically.

        
// Toggle dark / light mode
const current = document.documentElement.getAttribute('data-theme');
document.documentElement.setAttribute(
  'data-theme',
  current === 'dark' ? 'light' : 'dark'
);
      

Click to toggle the whole page:

No JS framework needed

Because state is driven by HTML attributes, dark mode works the same in React, Vue, Svelte, or plain HTML.

Step 6 of 7

Typed recipe resolvers

Generate class strings from typed options — great for React/Vue/Svelte component props.

        
import { resolveBtn, resolveAlert, resolveBadge } from "fikir-css/tooling";

// Returns: "btn btn-solid btn-primary btn-md"
resolveBtn({ variant: "solid", tone: "primary", size: "md" });

// Returns: "alert alert-warning"
resolveAlert({ tone: "warning" });

// Returns: "badge badge-success"
resolveBadge({ tone: "success" });

In a React component:

        
function Button({ tone = 'primary', size = 'md', children }) {
  return <button className={resolveBtn({ tone, size })}>{children}</button>;
}

// <Button tone="danger" size="sm">Delete</Button>
// → className="btn btn-solid btn-danger btn-sm"
      

badge-primary badge-success badge-warning badge-danger

Success

resolveAlert({ tone: "success" }) → "alert alert-success"

Step 7 of 7

You're set up! 🎉

Here's a summary of what you learned and where to go next.

What you've done

✓ Installed fikir-css

✓ Imported the stylesheet with one line

✓ Set data-theme for theming

✓ Used semantic class names for components

✓ Wired dark mode in one line of JS

✓ Used typed resolvers from fikir-css/tooling

Where to go next

Component playground →

Interactive demos of all 82 surfaces

Token explorer →

Visual reference for all design tokens

Adding to an existing project →

@layer strategy, Bootstrap/Tailwind side-by-side

Overlay JS helpers →

Focus trap, keyboard dismiss, roving tabindex