Accordion

import { Accordion } from "@grassroot/ui-react";
 
const items = [
  { value: "pricing", trigger: "How do you price?", content: "Monthly retainer…" },
  { value: "codebase", trigger: "Do you work in our repo?", content: "Yes - we join…" },
];
 
const [open, setOpen] = React.useState<string[]>(["pricing"]);
 
<Accordion items={items} type="single" value={open} onValueChange={setOpen} />

<script setup lang="ts">
import { ref } from "vue";
import { Accordion } from "@grassroot/ui-vue";
 
const items = [
  { value: "pricing", trigger: "How do you price?", content: "Monthly retainer…" },
  { value: "codebase", trigger: "Do you work in our repo?", content: "Yes - we join…" },
];
 
const open = ref(["pricing"]);
</script>
 
<template>
  <Accordion v-model="open" :items="items" type="single" />
</template>

import { Component, signal } from "@angular/core";
import { GrassrootAccordion } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootAccordion],
  template: `
    <grassroot-accordion
      [items]="items"
      type="single"
      [value]="open()"
      (valueChange)="open.set($event)"
    />
  `,
})
export class ExampleComponent {
  readonly items = [
    { value: "pricing", trigger: "How do you price?", content: "Monthly retainer…" },
    { value: "codebase", trigger: "Do you work in our repo?", content: "Yes - we join…" },
  ];
  readonly open = signal(["pricing"]);
}

<script lang="ts">
  import { Accordion } from "@grassroot/ui-svelte";
 
  const items = [
    { value: "pricing", trigger: "How do you price?", content: "Monthly retainer…" },
    { value: "codebase", trigger: "Do you work in our repo?", content: "Yes - we join…" },
  ];
 
  let open = $state(["pricing"]);
</script>
 
<Accordion
  items={items}
  type="single"
  value={open}
  onValueChange={(next) => (open = next)}
/>

import { createSignal } from "solid-js";
import { Accordion } from "@grassroot/ui-solid";
 
const items = [
  { value: "pricing", trigger: "How do you price?", content: "Monthly retainer…" },
  { value: "codebase", trigger: "Do you work in our repo?", content: "Yes - we join…" },
];
 
export function Example() {
  const [open, setOpen] = createSignal(["pricing"]);
 
  return (
    <>
      <Accordion items={items} type="single" value={open()} onValueChange={setOpen} />
    </>
  );
}