SpDrawer

import { SpDrawer } from '@silverpoint/react/ui/drawer';

// side: start, end (the default), top or bottom; uncontrolled here
<SpDrawer title="Settings" side="end" trigger={<button type="button">Open the drawer</button>}>
  <p>A panel that slides in from any edge, over a hatched backdrop.</p>
</SpDrawer>

<script setup lang="ts">
import { SpDrawer } from '@silverpoint/vue/ui/drawer';
</script>

<template>
  <SpDrawer title="Settings" side="end">
    <template #trigger><button type="button">Open the drawer</button></template>
    <p>A panel that slides in from any edge, over a hatched backdrop.</p>
  </SpDrawer>
</template>

import { Component } from '@angular/core';
import { SpTrigger } from '@silverpoint/angular/ui';
import { SpDrawer } from '@silverpoint/angular/ui/drawer';

@Component({
  selector: 'app-settings',
  imports: [SpDrawer, SpTrigger],
  template: `
    <sp-drawer title="Settings" side="end">
      <button type="button" spTrigger>Open the drawer</button>
      <p>A panel that slides in from any edge, over a hatched backdrop.</p>
    </sp-drawer>
  `,
})
export class Settings {}

sp_drawer(rx.el.p("A panel that slides in…"), trigger="Open the drawer", title="Settings", side="end")