Carregando…

Settings Panel

Display

Compact expanding settings tray with tabbed categories, morphing active-tab indicator and an apply action.

Settings Panel — bandeja de ajustes com abas por categoria

Instalação via CLI

$ npx kikitocn add settings-panel

Interno:

@/lib/utils@/lib/motionmotionlucide-react

Exemplo de uso

Settings PanelExample.tsx

import { SettingsPanel } from "@/components/ui/cn/settings-panel/SettingsPanel";

export function SettingsPanelExample() {
  return (
    <SettingsPanel />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`categories*`	`SettingsCategory[]`	—	Categorias exibidas como abas: { id, label, content: ReactNode }[]
`triggerLabel`	`string`	`'Ajustes'`	Texto exibido na pílula fechada
`defaultOpen`	`boolean`	`false`	Estado inicial (aberto/fechado)
`applyLabel`	`string`	`'Aplicar mudanças'`	Texto do botão de aplicar mudanças
`onApply`	`(categoryId: string) => void`	`undefined`	Chamado ao clicar em 'Aplicar mudanças', com o id da categoria ativa
`className`	`string`	—	Classes CSS extras

Voltar para Display

Carregando…