Секция настроек

SettingsSection связывает секцию и заголовок через aria-labelledby (id заголовка генерируется через useId, а не конкатенацией строк), выводит одну колонку на узких экранах и две — на широких, сохраняет отступ для перехода по якорю и поддерживает тона default и danger.

Пример

Интерактивный пример

Профиль

Обновите имя, фото и контактные данные.

Введите сообщение…

Использование

Импортируйте компонент из публичной точки входа пакета.

import { SettingsSection } from "denjs-ui";
import { User } from "lucide-react";

export function Example() {
  return (
    <SettingsSection
      id="profile"
      icon={<User aria-hidden="true" />}
      title="Profile"
      description="Update your name, photo, and contact details."
    >
      {/* form fields */}
    </SettingsSection>
  );
}