Tempo UI Component Library

    A comprehensive showcase of all available components featuring modern glassmorphism design with Tempo Trade branding.

    Glassmorphism Design
    Dark Mode Only
    Mobile Optimized
    16+ Components

    Buttons

    Button Variants
    All available button styles and sizes

    Variants

    Sizes

    States

    Badges

    Badge Variants
    All available badge styles
    Default
    Secondary
    Destructive
    Outline
    Success
    Brand

    Cards

    Card with All Elements
    This card demonstrates all card components

    Card content can contain any elements. This is a standard card with header, content, and footer sections.

    Simple Card
    Featured

    A simpler card without a footer section.

    Form Elements

    Input Fields & Controls
    Various form input components

    Tabs

    Overview Tab

    This is the overview tab content. Tabs are great for organizing content into different sections.

    Dialogs

    Dialog Examples
    Modal dialogs for user interactions

    Table

    Data Table
    A responsive table component
    A list of recent transactions
    InvoiceStatusMethodAmount
    INV001
    Paid
    		Credit Card$250.00
    INV002
    Pending
    		PayPal$150.00
    INV003
    Unpaid
    		Bank Transfer$350.00
    INV004
    Paid
    		Credit Card$450.00

    Dropdown Menu

    Dropdown Examples
    Context menus and dropdowns

    Tooltips

    Tooltip Examples
    Hover over elements to see tooltips

    Toast Notifications

    Toast Examples
    Click buttons to trigger different toast notifications

    Dark Mode

    Always Dark
    This component library is optimized for dark mode only

    The library uses a dark-first design with glassmorphism effects optimized for dark backgrounds.

    Separators

    Separator Examples
    Visual dividers for content

    Horizontal Separator

    Content above separator

    Content below separator

    Item 1
    Item 2
    Item 3

    Labels

    Label Examples
    Form labels in different contexts

    Design System Features

    🎨 Glassmorphism Design
    Modern glass-like aesthetic with backdrop blur effects
    • • Backdrop blur effects with transparency
    • • Subtle border styling with glass-like appearance
    • • Consistent hover and focus states
    • • Elegant shadow and depth layering
    🌙 Dark Mode Only
    Optimized exclusively for dark themes
    • • Dark-first design philosophy
    • • Optimized contrast and readability
    • • Glassmorphism effects for dark backgrounds
    • • No light mode distractions
    🎯 Brand Integration
    Tempo Trade brand colors and styling
    • • Brand color: Purple (#8B5CF6)
    • • Success accent: Lime (#D2FE02)
    • • Dark theme exclusive
    • • High contrast color palette
    âš¡ Developer Experience
    Built for easy integration and customization
    • • TypeScript support with full type safety
    • • Tree-shaking for optimized bundles
    • • Tailwind CSS for easy customization
    • • Comprehensive component variants