Data display

List

Themed list surface for settings panels, sidebar navigation, and data feeds.

03

Import

#import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjListComponent } from '@kouji-ui/components';
04

Playground

#playground
ProfileNotificationsBillingSecurityConnected apps
items
active row
<kj-list
  ariaLabel="Account settings"
  [divided]="true"
  [hoverable]="true"
>
  <kj-list-item [active]="true">Profile</kj-list-item>
  <kj-list-item>Notifications</kj-list-item>
  <kj-list-item>Billing</kj-list-item>
  <kj-list-item>Security</kj-list-item>
  <kj-list-item>Connected apps</kj-list-item>
</kj-list>