Skip to content

Components Overview

Vetra UI provides a complete set of modern, elegant components for building beautiful interfaces.

Component Categories

Input Components

Components for user input and interaction:

Component Description Key Features
Buttons Trigger actions 5 variants, loading states, icons
Icon Button Icon-only actions 3 variants, circular
Text Fields Text input Floating labels, animated underline
Switch Toggle states Smooth animations, accessible
Checkbox Multiple selection Clean design, indeterminate state
Radio Button Single selection Group management
Slider Value selection Range support, custom steps

Display Components

Components for showing content:

Component Description Key Features
Cards Content containers 5 variants, clickable
Chips Compact tags Dismissible, icons
Badges Status indicators Count badges, dot badges
Divider Visual separation Horizontal, vertical

Components for app navigation:

Component Description Key Features
Top App Bar Screen headers 3 variants, scrolling effects
Navigation Bar Bottom navigation Icon + label, animations
Tabs Content switching Smooth indicator, scrollable

Feedback Components

Components for user feedback:

Component Description Key Features
Dialogs Modal messages Customizable, accessible
Notifications Toast messages Auto-dismiss, actions
Loading Progress indicators Circular, linear, skeleton
Skeleton Content placeholders Shimmer animation
Pull to Refresh Content refresh Native feel, customizable

Action Components

Components for specific actions:

Component Description Key Features
Menu Contextual options Dropdown, animations

Design Principles

All Vetra components follow these principles:

🎨 Consistent Design

  • Unified visual language across all components
  • Semantic naming that makes sense
  • Cohesive spacing and sizing

✨ Smooth Animations

  • Natural, physics-based motion
  • Purposeful transitions (200-400ms)
  • Spring physics for playful interactions

♿ Accessible by Default

  • WCAG AA contrast ratios
  • Minimum 44×44dp touch targets
  • Semantic roles for screen readers
  • Keyboard navigation support

🔧 Easy to Customize

  • Consistent API across components
  • Modifier support for flexibility
  • Theme-aware styling
  • Composable architecture

Usage Pattern

All components share a similar usage pattern:

import com.flyfishxu.vetraui.core.*

@Composable
fun MyScreen() {
    VetraTheme {  // (1)!
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(24.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            // Use components
            VetraButton(onClick = { /* */ }) {
                Text("Action")
            }

            VetraCard {
                Text("Content")
            }

            VetraTextField(
                value = text,
                onValueChange = { text = it },
                label = "Input"
            )
        }
    }
}
  1. Wrap your app with VetraTheme to enable theming

Component Selection Guide

Choosing the Right Component

  • Primary action: VetraButton
  • Secondary action: VetraSecondaryButton or VetraOutlinedButton
  • Minimal action: VetraGhostButton
  • Icon-only action: VetraIconButton
  • Destructive action: VetraDangerButton
  • Text entry: VetraTextField
  • On/off toggle: VetraSwitch
  • Multi-select: VetraCheckbox
  • Single select: VetraRadioButton
  • Value range: VetraSlider
  • Grouping content: VetraCard
  • Compact labels: VetraChip
  • Status/counts: VetraBadge
  • Visual separation: VetraDivider
  • Screen title: VetraTopAppBar
  • Bottom tabs: VetraNavigationBar
  • Content tabs: VetraTab
  • Alert/confirm: VetraDialog
  • Brief message: VetraNotify
  • Loading state: VetraLoadingIndicator
  • Content loading: VetraSkeleton

Best Practices

Do

  • ✅ Use semantic component names
  • ✅ Follow the visual hierarchy (primary → secondary → tertiary)
  • ✅ Test in both light and dark modes
  • ✅ Ensure adequate spacing between components
  • ✅ Provide feedback for all user actions
  • ✅ Consider accessibility from the start

Don't

  • ❌ Mix Material and Vetra components
  • ❌ Override component styles excessively
  • ❌ Use too many variants on one screen
  • ❌ Ignore component disabled states
  • ❌ Skip loading and error states
  • ❌ Forget to test on different screen sizes

Next Steps

  • Browse individual component documentation for detailed usage
  • Check out the Design System to understand theming
  • See Quick Start for complete examples

Ready to build? Choose a component category above or start with Buttons →