//
Busca en todas las páginas de la documentación
Una línea divisoria horizontal o vertical simple que se utiliza para separar visualmente secciones de contenido o grupos de elementos relacionados.
export function Separator() {
return <hr className="border-t border-gray-200" />;
}Una regla horizontal simple con estilo de Tailwind. No se necesita "use client" ya que no hay interactividad. El border-t asegura que solo se renderice el borde superior, evitando el efecto de línea doble de un <hr> predeterminado.
interface SeparatorProps {
className?: string;
}
export function Separator({ className }: SeparatorProps) {
return (
<hr
role="separator"
aria-orientation="horizontal"
className
Añade atributos ARIA explícitos para que las tecnologías de asistencia anuncien correctamente el divisor. El prop className permite a los consumidores anular espaciado o color por uso.
interface SeparatorProps {
className?: string;
}
export function VerticalSeparator({ className }: SeparatorProps) {
return (
<div
role="separator"
aria-orientation="vertical"
className
Un divisor vertical renderizado como un div con ancho w-px y h-full para estirarse a la altura del padre. Debe vivir dentro de un contenedor flex con altura definida, de lo contrario el separador se colapsa a cero.
interface LabeledSeparatorProps {
label: string;
}
export function LabeledSeparator({ label }: LabeledSeparatorProps) {
return (
<div className="flex items-center gap-4">
<div className=
El patrón clásico del divisor "o". Dos líneas flex-1 se expanden por igual en cada lado del texto centrado. Usar h-px en lugar de border-t proporciona una alineación más predecible cuando los elementos flex tienen alturas variadas.
interface SeparatorProps {
className?: string;
}
export function DashedSeparator({ className }: SeparatorProps) {
return (
<hr
role="separator"
className={`border-t border-dashed border-gray-300 ${
La utilidad border-dashed crea un divisor punteado que se siente más ligero que una línea sólida. Útil en secciones de formulario o paneles de configuración donde se necesita una separación sutil sin límites visuales fuertes.
type SpacingSize = "none" | "sm" | "md" | "lg" | "xl";
interface SeparatorProps {
spacing?: SpacingSize;
className?: string;
}
const spacingClasses: Record<
Los ajustes de espaciado predefinidos evitan que valores de margen ad-hoc aparezcan en toda la base de código. La opción none es útil cuando el contenedor padre ya gestiona el espaciado a través de gap o padding.
interface SeparatorProps {
className?: string;
}
export function GradientSeparator({ className }: SeparatorProps) {
return (
<div
role="separator"
aria-orientation="horizontal"
className
Una línea de gradiente que se desvanece desde ambos bordes, creando una separación visual más suave. Usa el modificador via- de Tailwind para un gradiente de tres paradas. Funciona mejor en secciones de héroe o entre bloques de contenido grandes donde una regla tradicional se siente demasiado pesada.
import { forwardRef } from "react";
type Orientation = "horizontal" | "vertical";
type Variant = "solid" | "dashed" | "dotted" | "gradient";
type Thickness = "thin" | "medium" | "thick"
Aspectos clave:
orientation.label en un separador horizontal, el componente se divide en dos líneas flanqueando el texto centrado, usando el mismo subcomponente SeparatorLine para consistencia.solid, dashed, dotted y gradient cubren los estilos visuales más comunes. La variante gradiente usa una ruta de renderizado completamente diferente (gradiente de fondo vs borde) para evitar conflictos de propiedades CSS.border-t, border-t-2 y border-t-4, mientras que las variantes gradiente usan h-px, h-0.5 e h-1 para un peso visual equivalente.Separator externo como el SeparatorLine interno aceptan refs, permitiendo que bibliotecas de animación o lógica de medición se adjunten directamente al elemento DOM.my-) y los separadores verticales usan margen horizontal (mx-), por lo que el espaciado siempre se aplica en el eje correcto.El separador vertical se colapsa a altura cero -- un separador vertical con h-full requiere un padre con altura explícita o un contenedor flex. Sin él, el divisor es invisible.
Tailwind purga clases de color dinámico -- interpolar border-${color} o via-${color} en cadenas de clase causa que Tailwind purgue esas clases en producción. Usa un safelist o un mapa de clase estática en su lugar.
<hr> tiene margen predeterminado -- los navegadores aplican un margen predeterminado a los elementos <hr>. Si no lo restableces con my-0 o tu propia clase de margen, obtienes espaciado extra inesperado.
Rol ARIA en divisores decorativos -- los separadores puramente decorativos deben usar role="none" o aria-hidden="true" en lugar de role="separator" para evitar saturar el árbol de accesibilidad con puntos de referencia sin sentido.
Dirección de gradiente ignorada en modo oscuro -- si usas via-gray-300 para el punto medio del gradiente, puede volverse invisible en fondos oscuros. Cambia a via-gray-600 en modo oscuro usando el prefijo dark: de Tailwind.
Renderizado de border-dashed varía por navegador -- la longitud y el espacio de los guiones difieren entre Chrome, Firefox y Safari. Si se requieren guiones pixel-perfecto, usa un patrón SVG o una imagen de fondo repetitiva en su lugar.