Components
Separator
Visually or semantically separates content.
Let's get started
Choose a plan to fit your needs.
Source Code
Copy the following code into your project.
<template>
<div
:role="role"
:class="
cn(
orientation == 'horizontal' ? 'h-px w-full' : 'h-full w-px',
'block bg-border',
props.class
)
"
></div>
</template>
<script setup lang="ts">
const props = withDefaults(
defineProps<{
/**
* The orientation of the separator.
*/
orientation?: "horizontal" | "vertical";
/**
* The role of the separator.
*/
role?: "separator" | "presentation";
/**
* The class of the separator.
*/
class?: any;
}>(),
{
orientation: "horizontal",
role: "separator",
}
);
</script>
Table of contents