Component Showcase
Complete showcase of all ShadCN UI components integrated from Sirius UI
Dashboard Components
Dashboard Pattern Examples
Components and patterns commonly used in dashboard applications
Total Vulnerabilities
16
+12 this week
Critical Issues
1
Active Hosts
23/23
CRITICAL SECURITY ISSUES DETECTED
1 critical vulnerability requires immediate attention
Vulnerability Breakdown by Severity
1
Critical8
High4
Medium3
Low0
InfoSecurity Posture Score
46Fair
Status Indicators
100% online
Offline
Warning
Loading
Online
Offline
Vulnerability Trends
Area chart placeholder
Chart integration example - Use libraries like Recharts, Chart.js, or Victory
Most Vulnerable Hosts
Horizontal bar chart placeholder
Chart integration example - Use libraries like Recharts, Chart.js, or Victory
Inline Code Styling
Database connection configured. Check lib/db/ for schema and connection setup. Use npm install to install dependencies.
Buttons
Button Variants
Different button styles and sizes
Cards
Card Title
Card description goes here
Card content area with your custom content.
Another Card
Demonstrating card variations
Cards can contain any content you need.
Badges
Default
Secondary
Destructive
Outline
Critical
High
Medium
Low
Info
Informational
Form Elements
Input Fields
Text inputs, textareas, and labels
Select
Slider
0100
Value: 50
Tabs
Content for Tab 1
Alerts
Info
This is an informational alert message.
Error
This is a destructive alert message.
CRITICAL SECURITY ISSUES DETECTED
This is a critical alert that requires immediate attention.
Avatar
CNAB
Skeleton
Table
TanStack Table Example
A comprehensive table example using TanStack Table with sorting, filtering, pagination, and column visibility. Use this as a template for building data tables in your applications.
| Role | Status | |||
|---|---|---|---|---|
John Doe | john@example.com | Admin | active | 2024-01-15 |
Jane Smith | jane@example.com | User | inactive | 2024-02-20 |
Bob Johnson | bob@example.com | User | active | 2024-03-10 |
Alice Williams | alice@example.com | Moderator | active | 2024-01-05 |
Charlie Brown | charlie@example.com | User | inactive | 2024-04-12 |
0 of 5 row(s) selected.
Page 1 of 1
Dialog
Dropdown Menu
Popover
Tooltip
Available Components
22 ShadCN UI Components
All components have been integrated from Sirius UI and are ready to use
Alert
Avatar
Badge
Button
Card
Checkbox
Context Menu
Dialog
Dropdown Menu
Form
Input
Label
Popover
Select
Skeleton
Slider
Sonner
Switch
Table
Tabs
Textarea
Tooltip