<Flyout.Root>
  <Flyout.Trigger />
  <Flyout.Portal>
    <Flyout.Overlay />
    <Flyout.Content>
      <Flyout.Header>
        <Flyout.Title />
        <Flyout.Description />
        <Flyout.Close />
      </Flyout.Header>
      <Flyout.Body />
      <Flyout.Footer />
    </Flyout.Content>
  </Flyout.Portal>
</Flyout.Root>

<Flyout.Root>
  <Flyout.Trigger asChild>
    <Button>Open Flyout</Button>
  </Flyout.Trigger>
  <Flyout.Portal>
    <Flyout.Overlay />
    <Flyout.Content>
      <Flyout.Header>
        <Flyout.Title>Settings</Flyout.Title>
        <Flyout.Description>
          Manage your account settings and preferences.
        </Flyout.Description>
      </Flyout.Header>
      <Flyout.Body>
        Content goes here
      </Flyout.Body>
      <Flyout.Footer>
        <Button>Save Changes</Button>
      </Flyout.Footer>
    </Flyout.Content>
  </Flyout.Portal>
</Flyout.Root>

<Flyout.Root>
  <Flyout.Trigger asChild>
    <Button>Open Flyout</Button>
  </Flyout.Trigger>
  <Flyout.Portal>
    <Flyout.Overlay />
    <Flyout.Content side="left">
      <Flyout.Header>
        <Flyout.Title>Left Side Panel</Flyout.Title>
      </Flyout.Header>
      <Flyout.Body>
        Content slides in from the left
      </Flyout.Body>
    </Flyout.Content>
  </Flyout.Portal>
</Flyout.Root>

<Flyout.Root>
  <Flyout.Trigger asChild>
    <Button>Open Flyout</Button>
  </Flyout.Trigger>
  <Flyout.Portal>
    <Flyout.Overlay blur />
    <Flyout.Content>
      <Flyout.Header>
        <Flyout.Title>Blurred Background</Flyout.Title>
      </Flyout.Header>
      <Flyout.Body>
        The background is blurred
      </Flyout.Body>
    </Flyout.Content>
  </Flyout.Portal>
</Flyout.Root>

<Flyout.Root>
  <Flyout.Trigger asChild>
    <Button>Open Flyout</Button>
  </Flyout.Trigger>
  <Flyout.Portal>
    <Flyout.Overlay />
    <Flyout.Content>
      <Flyout.Header>
        <Flyout.Title>Scrollable Content</Flyout.Title>
      </Flyout.Header>
      <ScrollArea className="h-[400px]">
        <Flyout.Body>
          {Array.from({ length: 50 }).map((_, i) => (
            <div key={i} className="py-2">
              Scrollable item {i + 1}
            </div>
          ))}
        </Flyout.Body>
      </ScrollArea>
    </Flyout.Content>
  </Flyout.Portal>
</Flyout.Root>

<Flyout.Root>
  <Flyout.Trigger asChild>
    <Button>Edit Profile</Button>
  </Flyout.Trigger>
  <Flyout.Portal>
    <Flyout.Overlay />
    <Flyout.Content>
      <Flyout.Header>
        <Flyout.Title>Edit Profile</Flyout.Title>
        <Flyout.Description>
          Make changes to your profile.
        </Flyout.Description>
      </Flyout.Header>
      <Flyout.Body>
        <form className="space-y-4">
          <div>
            <Label>Name</Label>
            <Input />
          </div>
          <div>
            <Label>Email</Label>
            <Input type="email" />
          </div>
          <div>
            <Label>Bio</Label>
            <Textarea />
          </div>
        </form>
      </Flyout.Body>
      <Flyout.Footer className="flex justify-end gap-2">
        <Flyout.Close asChild>
          <Button variant="ghost">Cancel</Button>
        </Flyout.Close>
        <Button type="submit">Save Changes</Button>
      </Flyout.Footer>
    </Flyout.Content>
  </Flyout.Portal>
</Flyout.Root>