Virons UI

Apple HIG-compliant fintech design system extracted from Bobby Robo-Advisor.

Installation

npm install @virons-fintech/ui
# or
pnpm add @virons-fintech/ui
# or
yarn add @virons-fintech/ui

Usage

Import Components

import { Button, Card, Input } from '@virons-fintech/ui';
import '@virons-fintech/ui/styles';

function App() {
  return (
    <Card>
      <Input placeholder="Enter amount" />
      <Button>Submit</Button>
    </Card>
  );
}

Import Design Tokens

import { colors, spacing, motion } from '@virons-fintech/ui/tokens';

const customStyles = {
  backgroundColor: colors.primary[500],
  padding: spacing[4],
  transition: `all ${motion.duration.standard}ms ${motion.easing.spring}`,
};

Features

• ✅ 150+ Components - Atoms, organisms, and layouts
• ✅ Apple HIG Compliant - 8pt grid, 250ms motion, 44pt touch targets
• ✅ Design Tokens - Colors, spacing, typography, motion, shadows
• ✅ Fintech Semantics - Profit/loss colors, financial data patterns
• ✅ Accessibility - WCAG AA+ compliant with Radix UI primitives
• ✅ TypeScript - Full type safety
• ✅ Framer Motion - Smooth animations built-in
• ✅ Tailwind CSS - Utility-first styling

Design System

Colors

primary-500: #009688 (teal brand)
profit: hsl(142 76% 36%) (green)
loss: hsl(0 84% 60%) (red)
warning: hsl(45 93% 47%) (amber)

Spacing (8pt Grid)

p-2: 8px, p-4: 16px, p-6: 24px, p-8: 32px

Motion

duration-[250ms] // Apple HIG standard
ease-spring: cubic-bezier(0.16, 1, 0.3, 1)

Component Categories

Atoms

• Button, Input, Badge, Label, Checkbox, Switch
• Avatar, Icon, Spinner, Skeleton
• Typography (H1, H2, H3, P, Small, Span)
• Alert, Tooltip, Separator

Organisms

• Card (11 variants)
• Charts (Portfolio Pie, Performance Line)
• Dashboard components
• Modal system
• Data tables
• Layouts (BentoGrid, Container, Section, Spotlight)

Documentation

Full documentation available in the /docs directory:

• Theme Architecture
• Design Tokens
• Component Structure
• Typography Scale
• Motion System
• Semantic Colors

Tailwind Configuration

Add to your tailwind.config.ts:

import { colors, spacing, typography } from '@virons-fintech/ui/tokens';

export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@virons-fintech/ui/dist/**/*.{js,mjs}',
  ],
  theme: {
    extend: {
      colors,
      spacing,
      fontFamily: typography.fontFamily,
    },
  },
};

Requirements

• React 18+ or 19+
• TypeScript 5+
• Tailwind CSS 3.4+

License

MIT

Credits

Extracted from Bobby Robo-Advisor design system.