Separator
ExperimentalSeparate adjacent groups of content.
Example
Profile preferences
EmailNotifications
Tab to explore focus and keyboard behavior.
example.tsx
'use client'; import 'panel-ui-kit/styles.css';import { PanelUiTheme } from 'panel-ui-kit/theme';import { Separator } from 'panel-ui-kit/separator'; export function Example() { return ( <PanelUiTheme theme="neutral" motion={{"mode":"full","durationScale":1,"intensity":1}}> <p>Profile preferences</p> <Separator decorative={false} style={{ margin: "16px 0" }} /> <p>Notification preferences</p> </PanelUiTheme> );}When to use
Decorative by default. Set decorative false only when the division carries structural meaning.
Keyboard
No keyboard behavior.
Properties
| Property | Values | Default |
|---|---|---|
orientation | horizontal · vertical | horizontal |
decorative | boolean | true |
motion | full · reduced · off · object | Inherited |