Neko

Roadmap

The Roadmap component renders a kanban-style board with multiple lanes (e.g. Under Consideration, Planned, In Progress, Public Beta). Each lane contains one or more items, with an optional tag, date, and vote count — ideal for surfacing a public product roadmap directly from your documentation.

The roadmap uses three levels of nesting (roadmap → lane → item). As with any nested custom container, the outermost wrapper must have more colons than the next level. The examples below use five (:::::) for roadmap, four (::::) for lane, and three (:::) for roadmap-item.

Basic example

2Under Consideration
User permission settings
Feature
12
Add more filter and sorting options
Feature
5
3Planned
Private Categories
Feature
3
Trash on dashboard
Issues
3
Option to change text color on the top area
User Interface
1
6In Progress
[WordPress Plugin] Option to hide the widget from logged-in users
IntegrationsSep, 21
17
Integromat as alternative to Zapier
IntegrationsSep, 21
11
Add screenshot when the user sends feedback
Feature
9
Add an option to remove the email form and force anonymous
Feature
8
[WordPress Plugin] Option to hide the widget for non-logged users
IntegrationsSep, 21
3
Safe-Area Padding in fullscreen (PWA) mode
Feature
2
4Public Beta
Zapier Integration
IntegrationsSep, 21
141
Customisable email domain
Feature
34
Add a contact us form option
Feature
6
Sign-on with company email
FeatureAug, 21
1
::::: roadmap
:::: lane {title="Under Consideration" count="2" accent="gray"}
::: roadmap-item {title="User permission settings" tag="Feature" tag-color="emerald" votes="12"}
:::
::: roadmap-item {title="Add more filter and sorting options" tag="Feature" tag-color="emerald" votes="5"}
:::
::::
:::: lane {title="Planned" count="3" accent="teal"}
::: roadmap-item {title="Private Categories" tag="Feature" tag-color="emerald" votes="3"}
:::
::::
:::::

Each roadmap item can carry a short description as block content, plus a link attribute to make the entire card clickable.

2Planned
Dark theme support

A polished dark mode that follows the system preference and remembers the user choice.

Feature
42
API rate limiting

Per-key quotas with friendly error messages and a status header surfacing the remaining budget.

Improvement
18
1In Progress
Bulk export

Stream large exports as multipart zip archives so the UI no longer has to load the whole dataset.

FeatureMay, 26
27
::: roadmap-item {title="Dark theme support" tag="Feature" tag-color="emerald" votes="42" link="#"}
A polished dark mode that follows the system preference and remembers the user choice.
:::

Lane accents

The accent attribute on a lane sets the colour of the top border and the count badge. Available values: gray, teal, amber, sky, blue, violet, emerald, rose, orange, fuchsia.

1gray
Example
Feature
1
1teal
Example
Feature
1
1amber
Example
Feature
1
1sky
Example
Feature
1

Item tag colours

The tag-color attribute on roadmap-item picks the colour of the tag pill. The pill follows the same soft-tinted style as the Badge component (bg-{color}-100 text-{color}-800 light / bg-{color}-900 text-{color}-300 dark). Available values: emerald, green, teal, amber, yellow, rose, red, sky, blue (alias primary), violet (alias purple), orange, gray.

Properties

Roadmap (::::: roadmap)

The outer container. Lays the lanes out in a responsive grid: 1 column on phones, 2 on tablets, 4 on desktop.

Lane (:::: lane)

Property Description
title The lane heading (e.g. Planned, In Progress).
count Number shown in the badge next to the lane title.
accent Accent colour. One of gray, teal, amber, sky, blue, violet, emerald, rose, orange, fuchsia. Defaults to gray.

Roadmap item (::: roadmap-item)

Property Description
title The item title.
tag Optional tag label (e.g. Feature, Issues, Integrations).
tag-color Tag pill colour. Defaults to emerald.
date Optional date shown next to the tag (e.g. Sep, 21).
votes Optional vote count shown on the right of the item footer.
link Optional URL that turns the whole item into a clickable card.

Referenced by