List

import { List, ListItem } from "@grassroot/ui-react";
 
export default function ListDemo() {
  return (
    <List ordered>
      <ListItem>Parse the source.</ListItem>
      <ListItem>Build the render plan.</ListItem>
      <ListItem>Mount the adapter.</ListItem>
    </List>
  );
}

<script setup lang="ts">
import { List, ListItem } from "@grassroot/ui-vue";
</script>
 
<template>
  <List :ordered="true">
    <ListItem>Parse the source.</ListItem>
    <ListItem>Build the render plan.</ListItem>
    <ListItem>Mount the adapter.</ListItem>
  </List>
</template>

import { Component } from "@angular/core";
import { GrassrootList, GrassrootListItem } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-list-demo",
  standalone: true,
  imports: [GrassrootList, GrassrootListItem],
  host: { style: "display: contents" },
  template: `
    <grassroot-markdown-list [ordered]="true">
      <grassroot-list-item>Parse the source.</grassroot-list-item>
      <grassroot-list-item>Build the render plan.</grassroot-list-item>
      <grassroot-list-item>Mount the adapter.</grassroot-list-item>
    </grassroot-markdown-list>
  `,
})
export class ListDemoComponent {}
 
export default ListDemoComponent;

<script lang="ts">
  import { List, ListItem } from "@grassroot/ui-svelte";
</script>
 
<List ordered>
  <ListItem>Parse the source.</ListItem>
  <ListItem>Build the render plan.</ListItem>
  <ListItem>Mount the adapter.</ListItem>
</List>

/** @jsxImportSource solid-js */
import { List, ListItem } from "@grassroot/ui-solid";
 
export default function ListDemo() {
  return (
    <List ordered>
      <ListItem>Parse the source.</ListItem>
      <ListItem>Build the render plan.</ListItem>
      <ListItem>Mount the adapter.</ListItem>
    </List>
  );
}