Vera UIComponentsData Display
Separator
A visual divider component that helps organize content into distinct sections. Built on Radix UI with proper accessibility support and flexible orientation options.
Features
- Dual orientation - Horizontal and vertical separators
- Accessible - Proper ARIA attributes and semantic meaning
- Flexible styling - Easy to customize appearance
- Semantic HTML - Uses appropriate separator role
- Responsive - Adapts to container dimensions
Installation
pnpm add @helgadigitals/vera-uinpm install @helgadigitals/vera-uiyarn add @helgadigitals/vera-uiUsage
Basic Separator
First section content
Second section content
Third section content
components/data-display-examples/separator-examples.tsx→BasicSeparatorExample()✓ Auto-extracted
import { Separator } from "@helgadigitals/vera-ui";import { Button } from "@helgadigitals/vera-ui";import { Card, CardContent, CardHeader, CardTitle } from "@helgadigitals/vera-ui";import { Badge } from "@helgadigitals/vera-ui";import { Avatar, AvatarFallback, AvatarImage } from "@helgadigitals/vera-ui";import { Calendar, MapPin, Users, Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, Undo, Redo, Save, TrendingUp, TrendingDown, Minus, Clock} from "lucide-react";function BasicSeparatorExample() { return ( <div className="space-y-4"> <div> <p className="text-sm">First section content</p> </div> <Separator /> <div> <p className="text-sm">Second section content</p> </div> <Separator /> <div> <p className="text-sm">Third section content</p> </div> </div> );}Vertical Separator
Left content
Middle content
Right content
components/data-display-examples/separator-examples.tsx→VerticalSeparatorExample()✓ Auto-extracted
import { Separator } from "@helgadigitals/vera-ui";import { Button } from "@helgadigitals/vera-ui";import { Card, CardContent, CardHeader, CardTitle } from "@helgadigitals/vera-ui";import { Badge } from "@helgadigitals/vera-ui";import { Avatar, AvatarFallback, AvatarImage } from "@helgadigitals/vera-ui";import { Calendar, MapPin, Users, Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, Undo, Redo, Save, TrendingUp, TrendingDown, Minus, Clock} from "lucide-react";function VerticalSeparatorExample() { return ( <div className="flex h-16 items-center space-x-4"> <div className="text-sm">Left content</div> <Separator orientation="vertical" /> <div className="text-sm">Middle content</div> <Separator orientation="vertical" /> <div className="text-sm">Right content</div> </div> );}Navigation Menu
Navigation
Settings
components/data-display-examples/separator-examples.tsx→NavigationMenuExample()✓ Auto-extracted
import { Separator } from "@helgadigitals/vera-ui";import { Button } from "@helgadigitals/vera-ui";import { Card, CardContent, CardHeader, CardTitle } from "@helgadigitals/vera-ui";import { Badge } from "@helgadigitals/vera-ui";import { Avatar, AvatarFallback, AvatarImage } from "@helgadigitals/vera-ui";import { Calendar, MapPin, Users, Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, Undo, Redo, Save, TrendingUp, TrendingDown, Minus, Clock} from "lucide-react";function NavigationMenuExample() { return ( <div className="space-y-1"> <div className="px-2 py-1"> <h4 className="text-sm font-medium text-muted-foreground">Navigation</h4> </div> <Button variant="ghost" className="w-full justify-start"> Dashboard </Button> <Button variant="ghost" className="w-full justify-start"> Projects </Button> <Button variant="ghost" className="w-full justify-start"> Tasks </Button> <Separator className="my-2" /> <div className="px-2 py-1"> <h4 className="text-sm font-medium text-muted-foreground">Settings</h4> </div> <Button variant="ghost" className="w-full justify-start"> Profile </Button> <Button variant="ghost" className="w-full justify-start"> Preferences </Button> <Separator className="my-2" /> <Button variant="ghost" className="w-full justify-start text-red-600"> Sign Out </Button> </div> );}Breadcrumb Navigation
components/data-display-examples/separator-examples.tsx→BreadcrumbExample()✓ Auto-extracted
import { Separator } from "@helgadigitals/vera-ui";import { Button } from "@helgadigitals/vera-ui";import { Card, CardContent, CardHeader, CardTitle } from "@helgadigitals/vera-ui";import { Badge } from "@helgadigitals/vera-ui";import { Avatar, AvatarFallback, AvatarImage } from "@helgadigitals/vera-ui";import { Calendar, MapPin, Users, Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, Undo, Redo, Save, TrendingUp, TrendingDown, Minus, Clock} from "lucide-react";function BreadcrumbExample() { const breadcrumbs = [ { label: "Home", href: "/" }, { label: "Products", href: "/products" }, { label: "Electronics", href: "/products/electronics" }, { label: "Smartphones", href: "/products/electronics/smartphones" }, ]; return ( <nav className="flex items-center space-x-2 text-sm"> {breadcrumbs.map((item, index) => ( <div key={index} className="flex items-center space-x-2"> {index > 0 && ( <Separator orientation="vertical" className="h-4" /> )} <a href={item.href} className={`hover:underline ${ index === breadcrumbs.length - 1 ? 'text-foreground font-medium' : 'text-muted-foreground' }`} > {item.label} </a> </div> ))} </nav> );}Card Sections
Team Meeting
March 15, 2024 at 2:00 PM
Conference Room A
8 attendees
Agenda
- • Project status update
- • Q2 planning discussion
- • Resource allocation
Tags
PlanningTeamQ2
components/data-display-examples/separator-examples.tsx→CardSectionsExample()✓ Auto-extracted
import { Separator } from "@helgadigitals/vera-ui";import { Button } from "@helgadigitals/vera-ui";import { Card, CardContent, CardHeader, CardTitle } from "@helgadigitals/vera-ui";import { Badge } from "@helgadigitals/vera-ui";import { Avatar, AvatarFallback, AvatarImage } from "@helgadigitals/vera-ui";import { Calendar, MapPin, Users, Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, Undo, Redo, Save, TrendingUp, TrendingDown, Minus, Clock} from "lucide-react";function CardSectionsExample() { return ( <Card className="w-full max-w-md"> <CardHeader> <CardTitle>Team Meeting</CardTitle> </CardHeader> <CardContent className="space-y-4"> <div className="space-y-2"> <div className="flex items-center text-sm text-muted-foreground"> <Calendar className="mr-2 h-4 w-4" /> March 15, 2024 at 2:00 PM </div> <div className="flex items-center text-sm text-muted-foreground"> <MapPin className="mr-2 h-4 w-4" /> Conference Room A </div> <div className="flex items-center text-sm text-muted-foreground"> <Users className="mr-2 h-4 w-4" /> 8 attendees </div> </div> <Separator /> <div> <h4 className="text-sm font-medium mb-2">Agenda</h4> <ul className="text-sm text-muted-foreground space-y-1"> <li>• Project status update</li> <li>• Q2 planning discussion</li> <li>• Resource allocation</li> </ul> </div> <Separator /> <div> <h4 className="text-sm font-medium mb-2">Tags</h4> <div className="flex flex-wrap gap-1"> <Badge variant="secondary">Planning</Badge> <Badge variant="secondary">Team</Badge> <Badge variant="secondary">Q2</Badge> </div> </div> </CardContent> </Card> );}Toolbar Separators
components/data-display-examples/separator-examples.tsx→ToolbarExample()✓ Auto-extracted
import { Separator } from "@helgadigitals/vera-ui";import { Button } from "@helgadigitals/vera-ui";import { Card, CardContent, CardHeader, CardTitle } from "@helgadigitals/vera-ui";import { Badge } from "@helgadigitals/vera-ui";import { Avatar, AvatarFallback, AvatarImage } from "@helgadigitals/vera-ui";import { Calendar, MapPin, Users, Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, Undo, Redo, Save, TrendingUp, TrendingDown, Minus, Clock} from "lucide-react";function ToolbarExample() { return ( <div className="flex items-center space-x-1 p-2 border rounded-lg bg-background"> {/* File operations */} <Button variant="ghost" size="sm" aria-label="Save"> <Save className="h-4 w-4" /> </Button> <Button variant="ghost" size="sm" aria-label="Undo"> <Undo className="h-4 w-4" /> </Button> <Button variant="ghost" size="sm" aria-label="Redo"> <Redo className="h-4 w-4" /> </Button> <Separator orientation="vertical" className="h-6" /> {/* Text formatting */} <Button variant="ghost" size="sm" aria-label="Bold"> <Bold className="h-4 w-4" /> </Button> <Button variant="ghost" size="sm" aria-label="Italic"> <Italic className="h-4 w-4" /> </Button> <Button variant="ghost" size="sm" aria-label="Underline"> <Underline className="h-4 w-4" /> </Button> <Separator orientation="vertical" className="h-6" /> {/* Alignment */} <Button variant="ghost" size="sm" aria-label="Align left"> <AlignLeft className="h-4 w-4" /> </Button> <Button variant="ghost" size="sm" aria-label="Align center"> <AlignCenter className="h-4 w-4" /> </Button> <Button variant="ghost" size="sm" aria-label="Align right"> <AlignRight className="h-4 w-4" /> </Button> </div> );}Statistics Dashboard
Total Revenue
$45,231.89
+20.1%from last month
Subscriptions
2,350
+180.1%from last month
Sales
12,234
+19%from last month
Active Users
573
-2%from last month
components/data-display-examples/separator-examples.tsx→StatsDashboardExample()✓ Auto-extracted
import { Separator } from "@helgadigitals/vera-ui";import { Button } from "@helgadigitals/vera-ui";import { Card, CardContent, CardHeader, CardTitle } from "@helgadigitals/vera-ui";import { Badge } from "@helgadigitals/vera-ui";import { Avatar, AvatarFallback, AvatarImage } from "@helgadigitals/vera-ui";import { Calendar, MapPin, Users, Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, Undo, Redo, Save, TrendingUp, TrendingDown, Minus, Clock} from "lucide-react";function StatsDashboardExample() { const stats = [ { label: "Total Revenue", value: "$45,231.89", change: "+20.1%", trend: "up" }, { label: "Subscriptions", value: "2,350", change: "+180.1%", trend: "up" }, { label: "Sales", value: "12,234", change: "+19%", trend: "up" }, { label: "Active Users", value: "573", change: "-2%", trend: "down" } ]; const getTrendIcon = (trend: string) => { switch (trend) { case "up": return <TrendingUp className="h-3 w-3 text-green-500" />; case "down": return <TrendingDown className="h-3 w-3 text-red-500" />; default: return <Minus className="h-3 w-3 text-gray-500" />; } }; return ( <div className="grid grid-cols-2 lg:grid-cols-4 divide-x"> {stats.map((stat, index) => ( <div key={index} className="px-4 py-6"> <div className="space-y-2"> <p className="text-sm text-muted-foreground">{stat.label}</p> <p className="text-2xl font-bold">{stat.value}</p> <div className="flex items-center space-x-1"> {getTrendIcon(stat.trend)} <span className={`text-xs ${ stat.trend === "up" ? "text-green-600" : stat.trend === "down" ? "text-red-600" : "text-gray-600" }`}> {stat.change} </span> <span className="text-xs text-muted-foreground"> from last month </span> </div> </div> </div> ))} </div> );}Content Sections
Technology
Building Scalable React Applications
Learn best practices for creating maintainable and performant React apps
JDJohn Doe
Mar 15, 2024
5 min read
React has become one of the most popular frontend frameworks, but building scalable applications requires careful planning and adherence to best practices.
In this article, we'll explore key strategies for creating React applications that can grow with your team and user base while maintaining code quality and performance.
components/data-display-examples/separator-examples.tsx→ContentSectionsExample()✓ Auto-extracted
import { Separator } from "@helgadigitals/vera-ui";import { Button } from "@helgadigitals/vera-ui";import { Card, CardContent, CardHeader, CardTitle } from "@helgadigitals/vera-ui";import { Badge } from "@helgadigitals/vera-ui";import { Avatar, AvatarFallback, AvatarImage } from "@helgadigitals/vera-ui";import { Calendar, MapPin, Users, Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, Undo, Redo, Save, TrendingUp, TrendingDown, Minus, Clock} from "lucide-react";function ContentSectionsExample() { return ( <article className="max-w-2xl space-y-6"> {/* Article header */} <header className="space-y-4"> <div className="space-y-2"> <Badge variant="secondary">Technology</Badge> <h1 className="text-3xl font-bold"> Building Scalable React Applications </h1> <p className="text-lg text-muted-foreground"> Learn best practices for creating maintainable and performant React apps </p> </div> <div className="flex items-center space-x-4 text-sm text-muted-foreground"> <div className="flex items-center space-x-2"> <Avatar className="h-8 w-8"> <AvatarImage src="https://github.com/shadcn.png" alt="Author" /> <AvatarFallback>JD</AvatarFallback> </Avatar> <span>John Doe</span> </div> <Separator orientation="vertical" className="h-4" /> <div className="flex items-center space-x-1"> <Calendar className="h-4 w-4" /> <span>Mar 15, 2024</span> </div> <Separator orientation="vertical" className="h-4" /> <div className="flex items-center space-x-1"> <Clock className="h-4 w-4" /> <span>5 min read</span> </div> </div> </header> <Separator /> {/* Article content */} <section className="prose prose-gray max-w-none"> <p> React has become one of the most popular frontend frameworks, but building scalable applications requires careful planning and adherence to best practices. </p> <p> In this article, we'll explore key strategies for creating React applications that can grow with your team and user base while maintaining code quality and performance. </p> </section> <Separator /> {/* Tags and sharing */} <footer className="space-y-4"> <div> <h3 className="text-sm font-medium mb-2">Tags</h3> <div className="flex flex-wrap gap-2"> <Badge variant="outline">React</Badge> <Badge variant="outline">JavaScript</Badge> <Badge variant="outline">Frontend</Badge> <Badge variant="outline">Performance</Badge> </div> </div> <Separator /> <div className="flex justify-between items-center"> <p className="text-sm text-muted-foreground"> Share this article </p> <div className="flex space-x-2"> <button className="text-sm text-blue-600 hover:underline"> Twitter </button> <Separator orientation="vertical" className="h-4" /> <button className="text-sm text-blue-600 hover:underline"> LinkedIn </button> <Separator orientation="vertical" className="h-4" /> <button className="text-sm text-blue-600 hover:underline"> Copy Link </button> </div> </div> </footer> </article> );}API Reference
Separator
The main separator component for creating visual divisions.
Prop
Type
Orientation Options
Horizontal
Default orientation for separating content vertically stacked.
<Separator orientation="horizontal" />Vertical
For separating content arranged horizontally.
<Separator orientation="vertical" />Decorative vs Semantic
Decorative (default)
Used for visual organization only, hidden from screen readers.
<Separator decorative={true} />Semantic
Has semantic meaning and is announced by screen readers.
<Separator decorative={false} />Use Cases
Content Organization
- Article sections - Separate different parts of content
- Page sections - Divide content into logical groups
- Form sections - Group related form fields
- Comment threads - Separate individual comments
Navigation
- Menu groups - Organize navigation items
- Breadcrumbs - Separate breadcrumb items
- Toolbar sections - Group related tools and actions
- Tab content - Divide tabbed content sections
Dashboard Layouts
- Statistics panels - Separate key metrics
- Widget boundaries - Define widget areas
- Chart sections - Organize data visualizations
- Status indicators - Group related status information
Data Display
- Table sections - Separate table groups
- List categories - Organize list items
- Card content - Divide card sections
- Timeline events - Separate timeline items
UI Components
- Modal sections - Organize modal content
- Sidebar sections - Group sidebar items
- Header sections - Divide header content
- Footer sections - Organize footer links
Accessibility
The Separator component includes:
- ARIA role - Proper
separatorrole for semantic separators - Screen reader support - Appropriate handling for decorative vs semantic use
- Keyboard navigation - Does not interfere with focus flow
- Visual clarity - Sufficient contrast for visibility
- Semantic meaning - Can convey structure to assistive technology
Best Practices
Visual Design
- Consistent spacing - Maintain uniform spacing around separators
- Appropriate thickness - Use thin lines that don't dominate content
- Color harmony - Choose colors that complement your design system
- Context awareness - Match separator style to surrounding content
Semantic Usage
- Meaningful divisions - Use separators for logical content breaks
- Avoid overuse - Don't separate every piece of content
- Hierarchy respect - Separators should support content hierarchy
- Alternative methods - Consider spacing, headings, or containers instead
Responsive Design
- Mobile adaptation - Consider how separators work on small screens
- Orientation switching - Vertical separators may become horizontal on mobile
- Touch interfaces - Ensure separators don't interfere with touch targets
- Content reflow - Separators should adapt to content changes
Performance
- Lightweight rendering - Separators should have minimal performance impact
- CSS optimization - Use efficient CSS for separator styling
- Avoid animations - Keep separators static for performance
- Reusable patterns - Create consistent separator patterns
Related Components
- Card - Content containers that often use separators
- Tabs - Tabbed interfaces with content separation
- Breadcrumb - Navigation that uses separators
- DropdownMenu - Menus that group items with separators
Progress
A visual progress indicator component for showing completion percentage, loading states, and task progress. Built on Radix UI with smooth animations and accessibility features.
Skeleton
Skeleton loading components provide visual placeholders that mimic the shape and size of content while it loads. They improve perceived performance and provide a better user experience during loading states.