Uranus Design System

Painel lateral para "ver detalhes" - composição opinativa do Sheet com header, body e footer.

DetailDrawer é o padrão "abrir detalhe" do row click em uma DataTable: um painel lateral à direita com título, descrição opcional, ações no header, body com scroll e footer com ações. Tamanhos disponíveis via cva: sm | md | lg.

'use client';

import { DetailDrawer } from '@uranus-workspace/blocks';
import { Button } from '@uranus-workspace/design-system';
import { useState } from 'react';

export default function DetailDrawerDefault() {
  const [open, setOpen] = useState(false);
  return (
    <div className="flex justify-center">
      <Button type="button" variant="outline" onClick={() => setOpen(true)}>
        Ver detalhes do cliente
      </Button>
      <DetailDrawer
        open={open}
        onOpenChange={setOpen}
        title="Cliente #042 — Apollo Tech"
        description="Conta empresarial · Plano Pro · Atualizado há 2 minutos."
        footer={
          <div className="flex justify-end gap-2">
            <Button type="button" variant="outline" size="sm" onClick={() => setOpen(false)}>
              Fechar
            </Button>
            <Button type="button" size="sm">
              Editar conta
            </Button>
          </div>
        }
      >
        <dl className="grid grid-cols-1 gap-4 text-sm sm:grid-cols-2">
          <div>
            <dt className="text-xs uppercase tracking-wide text-muted-foreground">CNPJ</dt>
            <dd className="mt-0.5 font-medium">12.345.678/0001-90</dd>
          </div>
          <div>
            <dt className="text-xs uppercase tracking-wide text-muted-foreground">MRR</dt>
            <dd className="mt-0.5 font-medium">R$ 4.890,00</dd>
          </div>
          <div>
            <dt className="text-xs uppercase tracking-wide text-muted-foreground">Owner</dt>
            <dd className="mt-0.5 font-medium">alice@apollo.tech</dd>
          </div>
          <div>
            <dt className="text-xs uppercase tracking-wide text-muted-foreground">Cliente desde</dt>
            <dd className="mt-0.5 font-medium">12 mar 2024</dd>
          </div>
        </dl>
      </DetailDrawer>
    </div>
  );
}

Uso

import { DetailDrawer } from '@uranus-workspace/blocks';
import { Button } from '@uranus-workspace/design-system';

<DetailDrawer
  open={open}
  onOpenChange={setOpen}
  title="Cliente: Apollo SA"
  description="Criado em 12 de jan, 2025"
  headerActions={<Button size="sm">Editar</Button>}
  footer={
    <>
      <Button variant="ghost" onClick={() => setOpen(false)}>Fechar</Button>
      <Button>Salvar</Button>
    </>
  }
>
  <dl>...</dl>
</DetailDrawer>

Props

title — required, atribui aria-labelledby ao container (via SheetTitle).
description — sub-texto do header.
headerActions, footer — slots livres.
size — sm | md | lg. Default md (sm:max-w-md).
side — left | right. Default right.

Acessibilidade

Foco é movido para dentro do drawer no abrir e devolvido ao trigger no fechar (Radix Dialog). Sempre passe title — nunca deixe um drawer sem título acessível.

DetailDrawer

Uso

Props

Acessibilidade

On this page