CLI previewInstall commands shown on this site are not released yet.

DocsComponentsLayout

SidebarItem

React example follows below.
ts
import { SidebarItem } from "@grassroot/ui-react";
<SidebarItem />
ts
<script setup lang="ts">
import { SidebarItem } from "@grassroot/ui-vue";
</script>
<template>
<SidebarItem />
</template>
ts
import { Component } from "@angular/core";
import { GrassrootSidebarItem } from "@grassroot/ui-angular";
@Component({
selector: "app-example",
standalone: true,
imports: [GrassrootSidebarItem],
template: `
<grassroot-sidebar-item />
`,
})
export class ExampleComponent {
}
ts
<script lang="ts">
import { SidebarItem } from "@grassroot/ui-svelte";
</script>
<SidebarItem />
ts
import { SidebarItem } from "@grassroot/ui-solid";
export function Example() {
return (
<>
<SidebarItem />
</>
);
}

Installation

bash
pnpm dlx grassroot add ui/sidebar-item
bash
npx grassroot@latest add ui/sidebar-item
bash
yarn dlx grassroot add ui/sidebar-item
bash
bunx grassroot add ui/sidebar-item

API Reference

SidebarItemProps
PropTypeDefault
iconLeading icon node (15px works best).React.ReactNode
activeMarks the current route — crimson inset rule + sunken tint.boolean | undefined
countMono count shown at the trailing edge.React.ReactNode
trailingArbitrary trailing node (status dot, badge). Overrides `count`.React.ReactNode
hrefRender as an anchor.string | undefined