ListItem

import { ListItem } from "@grassroot/ui-react";
 
export default function ListItemDemo() {
  return (
    <ul>
      <ListItem>List items retain native list semantics.</ListItem>
    </ul>
  );
}

<script setup lang="ts">
import { ListItem } from "@grassroot/ui-vue";
</script>
 
<template>
  <ul>
    <ListItem>List items retain native list semantics.</ListItem>
  </ul>
</template>

import { Component } from "@angular/core";
import { GrassrootListItem } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-list-item-demo",
  standalone: true,
  imports: [GrassrootListItem],
  host: { style: "display: contents" },
  template: `
    <ul>
      <grassroot-list-item>List items retain native list semantics.</grassroot-list-item>
    </ul>
  `,
})
export class ListItemDemoComponent {}
 
export default ListItemDemoComponent;

<script lang="ts">
  import { ListItem } from "@grassroot/ui-svelte";
</script>
 
<ul>
  <ListItem>List items retain native list semantics.</ListItem>
</ul>

/** @jsxImportSource solid-js */
import { ListItem } from "@grassroot/ui-solid";
 
export default function ListItemDemo() {
  return (
    <ul>
      <ListItem>List items retain native list semantics.</ListItem>
    </ul>
  );
}