Toggle theme:
Advanced components with cyberpunk aesthetics — tables, inputs, tooltips, and loading states with futuristic interactions.
Advanced table with selection, sorting, and row actions
Project | Status | Deploys | Region | Last Deploy | ||
|---|---|---|---|---|---|---|
api-gateway | Active | 142 | us-east | 2 min ago | ||
auth-service | Active | 89 | eu-west | 1 hour ago | ||
analytics-db | Pending | 34 | ap-south | 3 hours ago | ||
legacy-monolith | Inactive | 12 | us-west | 2 days ago | ||
ml-pipeline | Error | 0 | eu-north | Failed |
<TechTable
data={data}
columns={columns}
selectable
sortColumn={sortColumn}
onSort={handleSort}
/>Status indicators with dot and pulse animations
<TechStatusBadge status="active" pulse />Form inputs with glow effects and icons
Search across all projects
Must be at least 8 characters
Use arrow keys to navigate history
This name is already taken
Keep this secret!
<TechSearchInput label="..." hint="..." />Border variants with glow and gradient effects
Standard border styling
Subtle cyan glow effect
Animated pulse effect
Linear gradient edge
Flickering neon effect
Animated scanner line
Card with header, content, and footer
Decorative corner accents
<TechBorder variant="glow" animated intensity="high">
<h3>Glow Border</h3>
</TechBorder>Contextual information with tech styling
<TechTooltip content="..." variant="info">
<Button>Hover me</Button>
</TechTooltip>Loading states with shimmer effects
Click "Show Skeletons" to see loading states
<TechSkeleton variant="card" className="max-w-sm" />
<TechCodeSkeleton lines={8} />Cards with customizable glow effects
Default intensity
With animation
Green glow