Kanban

import { Kanban } from "@grassroot/ui-react/advanced";
 
const columns = [
  { id: "backlog", name: "Backlog", rail: "var(--text-muted)" },
  { id: "progress", name: "In progress", rail: "var(--accent)" },
  { id: "done", name: "Done", rail: "var(--vs-success)" },
];
const cards = [
  { id: "1", columnId: "backlog", title: "Rotate signing keys", priority: "high", assignee: "AM" },
  { id: "3", columnId: "progress", title: "Idempotency keys", priority: "high", assignee: "JL" },
];
 
<Kanban columns={columns} defaultCards={cards} />

<script setup lang="ts">
import { Kanban } from "@grassroot/ui-vue";
 
const columns = [
  { id: "backlog", name: "Backlog", rail: "var(--text-muted)" },
  { id: "progress", name: "In progress", rail: "var(--accent)" },
  { id: "done", name: "Done", rail: "var(--vs-success)" },
];
const cards = [
  { id: "1", columnId: "backlog", title: "Rotate signing keys", priority: "high", assignee: "AM" },
  { id: "3", columnId: "progress", title: "Idempotency keys", priority: "high", assignee: "JL" },
];
</script>
 
<template>
  <Kanban :columns="columns" :default-cards="cards" />
</template>

import { Component } from "@angular/core";
import { GrassrootKanban } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootKanban],
  template: `
    <grassroot-kanban [columns]="columns" [defaultCards]="cards" />
  `,
})
export class ExampleComponent {
  readonly columns = [
    { id: "backlog", name: "Backlog", rail: "var(--text-muted)" },
    { id: "progress", name: "In progress", rail: "var(--accent)" },
    { id: "done", name: "Done", rail: "var(--vs-success)" },
  ];
  readonly cards = [
    { id: "1", columnId: "backlog", title: "Rotate signing keys", priority: "high", assignee: "AM" },
    { id: "3", columnId: "progress", title: "Idempotency keys", priority: "high", assignee: "JL" },
  ];
}

<script lang="ts">
  import { Kanban } from "@grassroot/ui-svelte";
 
  const columns = [
    { id: "backlog", name: "Backlog", rail: "var(--text-muted)" },
    { id: "progress", name: "In progress", rail: "var(--accent)" },
    { id: "done", name: "Done", rail: "var(--vs-success)" },
  ];
  const cards = [
    { id: "1", columnId: "backlog", title: "Rotate signing keys", priority: "high", assignee: "AM" },
    { id: "3", columnId: "progress", title: "Idempotency keys", priority: "high", assignee: "JL" },
  ];
</script>
 
<Kanban columns={columns} defaultCards={cards} />

import { Kanban } from "@grassroot/ui-solid";
 
const columns = [
  { id: "backlog", name: "Backlog", rail: "var(--text-muted)" },
  { id: "progress", name: "In progress", rail: "var(--accent)" },
  { id: "done", name: "Done", rail: "var(--vs-success)" },
];
const cards = [
  { id: "1", columnId: "backlog", title: "Rotate signing keys", priority: "high", assignee: "AM" },
  { id: "3", columnId: "progress", title: "Idempotency keys", priority: "high", assignee: "JL" },
];
 
export function Example() {
  return (
    <>
      <Kanban columns={columns} defaultCards={cards} />
    </>
  );
}