Core UI components are the most common `akanjs/ui` imports in apps and libs. They compose routing, images, layout containers, fetch loading, and model store workflows.
Link
Route-aware navigation component. It renders CSR or SSR navigation depending on the Akan render mode, and falls back to a non-clickable div when disabled or href is empty.
Props / API
Name
Type
Description
href
string | null
Destination route. Empty values render children without navigation.
disabled
boolean
Prevents navigation while keeping the same visual layout.
activeClassName
string
Class applied when the current route matches the link.
scrollToTop
boolean
Scrolls to the top after client-side navigation.
Namespace helpers: `Link.Back`, `Link.Close`, and `Link.Lang` cover common navigation actions.
Usage
Image
Akan image component for `ProtoFile` objects and direct URLs. It can derive width, height, and blur data from file metadata and uses the Akan image optimizer in SSR mode.
Props / API
Name
Type
Description
src
string
Direct image URL. Takes precedence over file metadata.
file
ProtoFile | file-like
File object with `url`, `imageSize`, and optional `abstractData`.
abstractData
string
Blur/placeholder preview data.
priority / preload
boolean
Marks the image as high-priority and eager-loaded.
unoptimized
boolean
Skips Akan image optimization.
Usage
Layout
Namespace of lightweight layout primitives used throughout module templates, units, views, headers, sidebars, bottom tabs, and zones.
Props / API
Name
Type
Description
Layout.Template
{ className?, children? }
Vertical form/template container with default spacing.
Layout.Unit
{ className?, children, href? }
List/card item container that becomes clickable when href is provided.
Layout.View
{ className?, children }
Constrained detail page container.
Layout.Zone
component
Section container for feature zones and page blocks.
Usage
Load
Namespace for data loading bridges between Akan fetch results and React rendering. It is commonly used for model detail pages, edit pages, pagination, and server/client page loading.
Props / API
Name
Type
Description
Load.View
{ view, renderView, loading?, noDiv? }
Hydrates a full model view and renders it through `renderView`.
Load.Edit
component
Loads edit payloads for model edit/new workflows.
Load.Page
{ loader, render, loading?, noCache? }
Shared SSR/CSR page loader wrapper.
Load.Units
component
Renders list/unit data from pagination-style results.
Usage
Model
Namespace of model workflow shells for generated Akan stores: view wrappers, edit/new modals, removal flows, and admin panels.
Props / API
Name
Type
Description
Model.EditModal
{ slice, edit?, renderTitle?, onSubmit? }
Modal editing shell wired to generated model store actions.
Model.NewWrapper
component
Wrapper for opening and initializing a new-model form.
Model.ViewWrapper
component
Wrapper for rendering full model view state.
Model.Remove
component
Removal action connected to generated delete flows.
Use `Model` components inside module `Util`, `View`, or `Zone` files where generated store actions are already available.
