image
Akan.js
English
DocsConventionsReferencesCheatsheet
image
Akan.js
Akan.js v2 docs are now available.View the v1 docs
DocsConventionsReferencesCheatsheet
Released under the MIT License
Official Akan.js Consulting onAkansoft
Copyright © 2026 Akan.js All rights reserved.
System managed bybassman
Introduction
• Quick Start
• Fundamentals
• Practice
Tutorials
• Show Details
• Modifying Status
• Interact in Service
• Displaying with Slice
• UX with Pages
• Using Scalar
• Using Insight
• Relate Data
Core Concepts
• Akan Runtime
• File Based Routing
• Multi Client
• App Config
• Folder Rule
• File Rule
• Data Layer
System Architecture
• Architecture Overview
• Runtime And Infra
• UI Architecture
• Business Service
• Mobile App Architecture
• CSS And Styling
Introduction
• Quick Start
• Fundamentals
• Practice
Tutorials
• Show Details
• Modifying Status
• Interact in Service
• Displaying with Slice
• UX with Pages
• Using Scalar
• Using Insight
• Relate Data
Core Concepts
• Akan Runtime
• File Based Routing
• Multi Client
• App Config
• Folder Rule
• File Rule
• Data Layer
System Architecture
• Architecture Overview
• Runtime And Infra
• UI Architecture
• Business Service
• Mobile App Architecture
• CSS And Styling
Next
Quick Start

Styling Foundation

Akan uses Tailwind CSS and DaisyUI as the default styling foundation. Tailwind gives screens a fast utility language for layout, spacing, responsive behavior, and one-off composition. DaisyUI adds semantic component names and theme tokens, so app screens can say primary, base, warning, or error instead of hard-coding every color.
Use Tailwind for structure and layout. Use DaisyUI for theme-aware component vocabulary and semantic colors. Tailwind CSS / DaisyUI
How the layers work together
styles.css: Imports Tailwind, Akan UI styles, DaisyUI, and app theme tokens.
Theme tokens: Turns brand decisions into reusable names such as primary, base, warning, and error.
Components: Use those names through btn, input, card, alert, and Tailwind utility classes.
Screens: Assemble consistent business screens without repeating raw color and spacing rules.

Design System First

Do not design every page from scratch. Define the app's basic component style first, then let pages assemble those components. Buttons, inputs, cards, forms, alerts, tabs, modals, and navigation should share the same spacing, radius, text color, border, and state behavior.
Buttons, inputs, cards, forms, alerts, tabs, modals, and navigation should use shared classes.
Business pages should assemble the design system instead of redefining colors and spacing.
Imported modules feel consistent when they use the same Tailwind and DaisyUI tokens.

Theme System Declaration

Theme and color are declared from the app style entry. The app imports Tailwind, Akan UI styles, enables DaisyUI, then declares one or more DaisyUI themes. Each theme maps semantic names to real colors.
apps/myapp/page/akanjs/styles.css
DaisyUI supports multiple theme blocks, so one app can define light, dark, brand, admin, or demo themes with the same component classes. DaisyUI Theme Docs

Font Declaration

Fonts are declared from the root layout. Export a fonts array with a font name, file paths, weights, and an optional default flag. Akan then exposes those fonts as Tailwind-like classes, so components can use className values such as font-pretendard or font-lemonmilk.
apps/myapp/page/akanjs/_layout.tsx
Using font classes
Styling Foundation
Design System First
Theme System Declaration
Font Declaration