FB Min Design

A clean, minimalist design system built for V0 and React applications. Based on the original Figma design system with comprehensive UI components.

Installation

npm install fb-min-design

Quick Start

import { Button, Input, Message, tokens } from 'fb-min-design';

function App() {
  return (
    <div>
      <Button variant="primary">
        Click me
      </Button>
      
      <Input 
        label="Email"
        placeholder="Enter your email"
        type="email"
      />
      
      <Message 
        variant="success"
        message="Successfully saved!"
      />
    </div>
  );
}

Components

Button

A versatile button component with multiple variants and sizes.

import { Button } from 'fb-min-design';

// Basic usage
<Button variant="primary" size="md">
  Primary Button
</Button>

// With icon
<Button variant="secondary" icon={<IconUpload />}>
  Upload File
</Button>

// Disabled state
<Button variant="default" disabled>
  Disabled Button
</Button>

Props:

• variant: 'primary' | 'secondary' | 'default' | 'neutral'
• size: 'sm' | 'md' | 'lg'
• disabled: boolean
• icon: ReactNode
• iconPosition: 'left' | 'right'

Input

A flexible input component with validation states and labels.

import { Input } from 'fb-min-design';

// Basic input
<Input 
  label="Full Name"
  placeholder="Enter your name"
  required
/>

// With validation
<Input 
  label="Email"
  type="email"
  variant="error"
  helperText="Please enter a valid email"
/>

// With icon
<Input 
  label="Search"
  placeholder="Search..."
  icon={<SearchIcon />}
/>

Props:

• label: string
• type: 'text' | 'email' | 'password' | 'number' | 'date' | 'tel' | 'url'
• variant: 'normal' | 'focused' | 'filled' | 'success' | 'warning' | 'error'
• helperText: string
• icon: ReactNode

Checkbox

A customizable checkbox component.

import { Checkbox } from 'fb-min-design';

<Checkbox 
  label="Accept terms and conditions"
  checked={agreed}
  onChange={setAgreed}
/>

Radio

Radio button component for single selection.

import { Radio } from 'fb-min-design';

<Radio 
  label="Option 1"
  value="option1"
  name="selection"
  checked={selected === 'option1'}
  onChange={() => setSelected('option1')}
/>

Switch

A toggle switch component.

import { Switch } from 'fb-min-design';

<Switch 
  label="Enable notifications"
  checked={notifications}
  onChange={setNotifications}
/>

Message

Display success, error, warning, or notification messages.

import { Message } from 'fb-min-design';

// Success message
<Message 
  variant="success"
  message="Successfully saved!"
  onClose={() => setShowMessage(false)}
/>

// Error message
<Message 
  variant="error"
  message="Something went wrong. Please try again."
/>

// Notification
<Message 
  variant="notification"
  message="You have 2 new messages!"
/>

Props:

• variant: 'success' | 'error' | 'warning' | 'notification'
• message: string
• onClose: () => void (optional)
• icon: ReactNode (optional)

Dropdown

A customizable dropdown select component.

import { Dropdown } from 'fb-min-design';

const options = [
  { label: 'Option 1', value: 'opt1' },
  { label: 'Option 2', value: 'opt2' },
  { label: 'Option 3', value: 'opt3' },
];

<Dropdown 
  label="Select an option"
  options={options}
  value={selected}
  onChange={setSelected}
  placeholder="Choose..."
/>

Slider

A range slider component.

import { Slider } from 'fb-min-design';

<Slider 
  label="Volume"
  value={volume}
  onChange={setVolume}
  min={0}
  max={100}
/>

UserTile

Display user information with optional removal functionality.

import { UserTile } from 'fb-min-design';

<UserTile 
  name="John Doe"
  image="https://example.com/avatar.jpg"
  size="md"
  onRemove={() => removeUser(userId)}
/>

Design Tokens

Access design tokens for consistent styling:

import { tokens } from 'fb-min-design';

const customStyles = {
  color: tokens.colors.primary.blue,
  fontSize: tokens.typography.fontSize.lg,
  padding: tokens.spacing[4],
  borderRadius: tokens.borderRadius.lg,
};

Available Tokens

• Colors: Primary, secondary, neutral, and semantic colors
• Typography: Font families, sizes, weights, and line heights
• Spacing: Consistent spacing scale (0-24)
• Border Radius: Rounded corner options
• Shadows: Elevation and depth effects
• Breakpoints: Responsive design breakpoints

Color Palette

• Primary Blue: #00A1F1
• Secondary Blue: #005376
• Accent Orange: #FF8C19
• Success Green: #10B981
• Warning Orange: #F59E0B
• Error Red: #EF4444

Typography

Built with Lato font family and a modular scale:

• Base size: 16px
• Scale ratio: 1.333
• Sizes: 12px - 50px

V0 Integration

This design system is optimized for use with V0. Simply import components and use them in your V0 projects:

import { Button, Input, Message } from 'fb-min-design';

export default function ContactForm() {
  return (
    <div className="max-w-md mx-auto p-6">
      <Input 
        label="Name"
        placeholder="Your name"
        className="mb-4"
      />
      <Input 
        label="Email"
        type="email"
        placeholder="[email protected]"
        className="mb-4"
      />
      <Button variant="primary" className="w-full">
        Submit
      </Button>
    </div>
  );
}

Development

# Install dependencies
npm install

# Build the package
npm run build

# Run in development mode
npm run dev

# Type checking
npm run type-check

# Linting
npm run lint

License

MIT License - feel free to use in your projects!

Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests for any improvements.