🚀 VelocityUI Core

Motion meets Minimalism - La libreria di componenti React che fa dire "Che figata!"

✨ Features

• 🎭 12+ Componenti animati - Dall'essenziale al complesso
• ⚡ Sistema Velocity - Animazioni fluide e personalizzabili
• 🎨 Design system coerente - Palette colori e spacing perfetti
• 📱 Mobile-first - Responsive by design
• 🌙 Dark mode nativo - Supporto completo tema scuro
• ♿ Accessibilità avanzata - WCAG 2.1 AA compliant
• 🔧 TypeScript - Type safety completo
• 🎯 Tree shaking - Bundle size ottimizzato

📦 Installation

npm install @velocityui/core
# or
yarn add @velocityui/core
# or
pnpm add @velocityui/core

🚀 Quick Start

import { Button, Card, ToastProvider } from '@velocityui/core'
import '@velocityui/core/styles'

function App() {
  return (
    <ToastProvider>
      <Card velocity="hover" className="p-6">
        <Button variant="gradient" velocity="scale">
          Get Started
        </Button>
      </Card>
    </ToastProvider>
  )
}

🧩 Components Overview

Core Components

Button

8 varianti con animazioni personalizzabili e stati di caricamento.

<Button variant="gradient" velocity="scale" loading={false}>
  Click me
</Button>

// Varianti: default, destructive, outline, secondary, ghost, link, glass, gradient
// Velocity: none, rise, morph, scale, glow, bounce, float

Card

Layout flessibili con effetti di profondità e animazioni hover.

<Card velocity="hover" variant="glass" padding="lg">
  <CardHeader>
    <CardTitle>Titolo</CardTitle>
    <CardDescription>Descrizione</CardDescription>
  </CardHeader>
  <CardContent>
    Contenuto della card
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Input

Form controls con validazione visiva e icone.

<Input
  placeholder="Enter email"
  leftIcon={<Mail />}
  rightIcon={<Check />}
  error={false}
  errorMessage="Invalid email"
  variant="glass"
/>

Badge

Indicatori con micro-feedback e dismiss opzionale.

<Badge 
  variant="success" 
  velocity="scale"
  dismissible={true}
  onDismiss={() => console.log('dismissed')}
>
  New Feature
</Badge>

Progress

Barre di progresso animate con varianti colore.

<Progress 
  value={75} 
  max={100}
  barVariant="success"
  animated={true}
  showValue={true}
  label="Upload progress"
/>

Switch

Toggle con spring physics e feedback tattile.

<Switch 
  size="lg"
  checked={enabled}
  onCheckedChange={setEnabled}
/>

Advanced Components

Modal

Modali responsive con overlay blur e animazioni fluide.

<Modal 
  open={isOpen} 
  onClose={() => setIsOpen(false)}
  title="Conferma azione"
  description="Questa azione non può essere annullata"
  size="md"
>
  <ModalContent>
    Contenuto del modal
  </ModalContent>
  <ModalFooter>
    <Button variant="outline" onClick={() => setIsOpen(false)}>
      Annulla
    </Button>
    <Button variant="destructive">
      Conferma
    </Button>
  </ModalFooter>
</Modal>

Tooltip

Tooltip posizionabili con effetti glass.

<Tooltip 
  content="Questa è una tooltip informativa"
  side="top"
  align="center"
  delayDuration={300}
>
  <Button>Hover me</Button>
</Tooltip>

Dropdown

Menu a discesa con sub-menu e checkbox items.

<Dropdown 
  trigger={<Button>Menu <ChevronDown /></Button>}
  align="start"
  side="bottom"
>
  <DropdownLabel>Account</DropdownLabel>
  <DropdownItem icon={<User />}>Profile</DropdownItem>
  <DropdownItem icon={<Settings />}>Settings</DropdownItem>
  <DropdownSeparator />
  <DropdownCheckboxItem 
    checked={notifications}
    onCheckedChange={setNotifications}
  >
    Enable notifications
  </DropdownCheckboxItem>
  <DropdownSubMenu trigger="More options">
    <DropdownItem>Export data</DropdownItem>
    <DropdownItem destructive>Delete account</DropdownItem>
  </DropdownSubMenu>
</Dropdown>

Tabs

Sistema di tab con animazioni layout e content switching.

<Tabs defaultValue="overview" orientation="horizontal">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  
  <TabsContent value="overview">
    Contenuto overview
  </TabsContent>
  <TabsContent value="analytics">
    Contenuto analytics
  </TabsContent>
  <TabsContent value="settings">
    Contenuto settings
  </TabsContent>
</Tabs>

Loading Components

Spinner

5 varianti di spinner con dimensioni personalizzabili.

<Spinner size="lg" variant="dots" />
<Spinner size="md" variant="ring" />
<Spinner size="sm" variant="pulse" />

Skeleton

Placeholder animati per content loading.

<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
<Skeleton className="h-4 w-[150px]" />

LoadingOverlay

Overlay di caricamento per wrappare contenuti.

<LoadingOverlay 
  isLoading={loading}
  loadingText="Saving changes..."
  spinner={<Spinner variant="ring" size="lg" />}
>
  <YourContent />
</LoadingOverlay>

Feedback Components

Alert

Sistema di alert con varianti e auto-dismiss.

<Alert 
  variant="success"
  dismissible={true}
  autoHideDelay={5000}
  onDismiss={() => console.log('dismissed')}
>
  <AlertTitle>Success!</AlertTitle>
  <AlertDescription>
    Your changes have been saved successfully.
  </AlertDescription>
</Alert>

Toast System

Sistema di notifiche globale con provider e hook.

// Wrap your app
<ToastProvider>
  <App />
</ToastProvider>

// Use in components
const { addToast } = useToast()

const showToast = () => {
  addToast({
    variant: 'success',
    title: 'Success!',
    description: 'Operation completed',
    duration: 3000
  })
}

🎨 Velocity System

Ogni componente supporta il nostro sistema "Velocity" per animazioni fluide:

// Animazioni disponibili
<Button velocity="scale">Scale on interaction</Button>
<Button velocity="rise">Lift on hover</Button> 
<Button velocity="morph">Morph animation</Button>
<Button velocity="glow">Glow effect</Button>
<Button velocity="bounce">Bounce effect</Button>
<Button velocity="float">Floating animation</Button>

🎯 Styling & Customization

VelocityUI è costruito con Tailwind CSS e supporta:

• CSS Variables per colori e spacing
• Dark mode automatico
• Responsive design mobile-first
• Custom animations con Framer Motion
• Glass morphism effects nativi

Custom Colors

:root {
  --primary: 221.2 83.2% 53.3%;
  --velocity-duration: 300ms;
  --velocity-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

Velocity Utilities

.velocity-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.velocity-gradient-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

📱 Responsive Design

Tutti i componenti sono mobile-first e responsive:

<Card className="p-4 md:p-6 lg:p-8">
  <Button size="sm md:size-default lg:size-lg">
    Responsive Button
  </Button>
</Card>

♿ Accessibility

VelocityUI segue le linee guida WCAG 2.1 AA:

• Keyboard navigation completa
• Screen reader support
• Focus management avanzato
• ARIA attributes appropriati
• Color contrast ottimizzato
• Reduced motion support

🛠️ Development

# Clone repository
git clone https://github.com/your-username/velocityui
cd velocityui

# Install dependencies
npm install

# Start development
npm run dev

# Build library
npm run build

# Run tests
npm test

📄 License

MIT © VelocityUI Team

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details.

🔗 Links

• Documentation
• Examples
• GitHub
• npm

VelocityUI - Motion meets Minimalism 🚀