PreviewFeatures
Horizontal and vertical orientations
Semantic HTML separator element
Customizable thickness and color
Proper ARIA separator role
Works in menus, sections, and layouts
Minimal and unobtrusive design
Shadcn/ui Separator - Figma Component
Visually or semantically separates content. This Figma component is part of our comprehensive design system that brings the popular shadcn/ui library into your design workflow.
Every Separator variant includes all the necessary states, properties, and styling options you need to create consistent, production-ready designs. The component seamlessly integrates with your existing Figma files and maintains full compatibility with the shadcn/ui React implementation.
Your questions, answered
Browse all 58 components
Accordion
Alert Dialog
Alert
Aspect Ratio
Avatar
Badge
Breadcrumb
Button Group
Button
Calendar
Card
Carousel
Chart
Checkbox
Collapsible
Combobox
Command
Context Menu
Data Table
Date Picker
Dialog
Drawer
Dropdown Menu
Empty
Field
Form
Hover Card
Input Group
Input OTP
Input
Item
Kbd
Label
Menubar
Native Select
Navigation Menu
Pagination
Popover
Progress
Radio Group
Resizable
Scroll Area
Select
Separator
Sheet
Sidebar
Skeleton
Slider
Sonner
Spinner
Switch
Table
Tabs
Textarea
Toast
Toggle Group
Toggle
Tooltip
Separators in Figma
The shadcn/ui figma Separator creates visual content divisions. Design menus, forms, and layouts in Figma with organized sections. This shadcn figma component improves hierarchy without adding noise.
Horizontal and vertical
Design Separators in Figma with the shadcn/ui figma component—both orientations available. Prototype interfaces where thin lines organize content logically, matching shadcn/ui subtle styling.
Semantic separators
This shadcn figma Separator uses proper HTML separator element. Design accessible interfaces in Figma where separators announce to screen readers, providing structural meaning beyond visual styling.
Subtle styling
The shadcn/ui figma Separator has minimal, unobtrusive design. Design clean interfaces in Figma where separators organize without distracting, using muted colors and thin lines following shadcn/ui patterns.