Separator
Separate groups in a menu, toolbar or card with a simple dividing line.
Session
Signed in as name@example.com
Last sign-in yesterday at 18:04
<script setup lang="ts">import { UiCard, UiStack, UiSeparator } from 'grani'</script> <template> <UiCard title="Session" class="w-full max-w-sm"> <UiStack class="text-sm"> <p class="text-fg">Signed in as name@example.com</p> <UiSeparator /> <p class="text-fg-muted">Last sign-in yesterday at 18:04</p> </UiStack> </UiCard></template>
Also called divider, horizontal rule.
Usage
<UiSeparator /> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| orientationhorizontal | vertical | horizontal spans the width between stacked blocks; vertical stands between items of a row. Default: across the enclosing UiButtonGroup, else horizontal. |
Anything else lands on the root element: native attributes, aria-*, data-testid.
When to use another component
| When you need | Take |
|---|---|
| The line under a section title | Header legend; where a legend opens a section, the legend is the line |
| The line between rows of a list | List draws it |
| Lines under a card's header and above its footer | Card draws them |
| The lines between the flat sections of an overlay | The overlay places them, as Drawer does |