Menu

Style Guide

Buttons

Cyber Buttons

Primary Variants

Semantic Colors

Outline Variants

Size Variants

Badges

Default Info Success Warning Error Neutral Accent

Cyber Alerts

Info: This is an informational message.
Success: Operation completed successfully.
Warning: Please review before continuing.
Error: Something went wrong.

Cyber Cards

Basic Card

A simple card with the angular cyberpunk styling and hover effects.

New

Card with Badge

Cards can contain badges and other components.

Gradient Title

Use cyber-text-gradient for eye-catching headers.

Cyber Panels

Panel Component

Panels have angular corners on both sides, ideal for content sections.


Footer content or metadata

System Status

  • Online Main Server
  • Busy API Gateway
  • Offline Backup Node

Cyber Inputs

Cyber Links

Alerts

Form Elements

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a paragraph of text. Bold, italic, underline, link.

A blockquote example.

Inline code example
Preformatted code block

Tables

# First Last Handle
1 Mark Otto @motto
2 Jacob Thornton @fat
3 Larry Bird @twitter