Collapsible

import { Collapsible } from "@grassroot/ui-react";
 
const [open, setOpen] = React.useState(true);
 
<Collapsible title="Environment variables" open={open} onOpenChange={setOpen}>
  <div className="font-mono text-[12.5px]">DATABASE_URL=postgres://…</div>
</Collapsible>

<script setup lang="ts">
import { ref } from "vue";
import { Collapsible } from "@grassroot/ui-vue";
 
const open = ref(true);
</script>
 
<template>
  <Collapsible
    v-model:open="open"
    title="Environment variables"
  >
    <div className="font-mono text-[12.5px]">DATABASE_URL=postgres://…</div>
  </Collapsible>
</template>

import { Component, signal } from "@angular/core";
import { GrassrootCollapsible } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootCollapsible],
  template: `
    <grassroot-collapsible
      title="Environment variables"
      [open]="open()"
      (openChange)="open.set($event)"
    >
      <div className="font-mono text-[12.5px]">DATABASE_URL=postgres://…</div>
    </grassroot-collapsible>
  `,
})
export class ExampleComponent {
  readonly open = signal(true);
}

<script lang="ts">
  import { Collapsible } from "@grassroot/ui-svelte";
 
  let open = $state(true);
</script>
 
<Collapsible
  title="Environment variables"
  open={open}
  onOpenChange={(next) => (open = next)}
>
  <div className="font-mono text-[12.5px]">DATABASE_URL=postgres://…</div>
</Collapsible>

import { createSignal } from "solid-js";
import { Collapsible } from "@grassroot/ui-solid";
 
export function Example() {
  const [open, setOpen] = createSignal(true);
 
  return (
    <>
      <Collapsible
        title="Environment variables"
        open={open()}
        onOpenChange={setOpen}
      >
        <div className="font-mono text-[12.5px]">DATABASE_URL=postgres://…</div>
      </Collapsible>
    </>
  );
}