Lucent UI
← CollapsibleCardSettingsPanelActionBar →
✦ LLM-ready

SettingsPanel

pattern

Settings panel composed from Card, Stack, Row, Text, Toggle, Select, Divider, and Button. Features toggle rows with descriptions, a select dropdown, and an action footer. Drill-down variant adds a NavMenu sidebar for multi-section navigation.

"Create a SettingsPanel using lucent-ui: Card elevated with toggle rows (label + description + Toggle), a Select dropdown, dividers, and a save/cancel footer. Use Stack and Row for layout."

Usage

React / JSX
import { Card, Stack, Row, Text, Toggle, Select, Divider, Button } from 'lucent-ui'

<SettingsPanel Card variant="elevated" />

Installation

pnpm add lucent-ui

API Reference

SettingsPanel props — * required

PropTypeDefaultDescription
Card variant"ghost" | "outline" | "filled" | "elevated" | "combo""elevated"Elevation level of the outer card.
Toggle defaultCheckedbooleanfalseInitial state for toggle rows.
Select labelstring—Label for dropdown fields.
Select defaultValuestring—Default selected option.