Skip to main content
The Components tab is your visual library of reusable UI components.

​
Adding Components

Click “Add Component” to see import options:

​
1. From Screenshot

Convert UI screenshots into JSX components using AI. How it works:
  1. Click “From Screenshot”
  2. Upload an image (PNG, JPG, JPEG, WebP)
  3. The AI analyzes the visual design
  4. Review and edit the generated JSX code
  5. Add component name, description, and props
  6. Save to your design system
Best practices:
  • Use high-quality, clear screenshots
  • Crop to show only the component (not full pages)
  • Ensure good contrast and visibility
  • Include both light and dark mode if applicable

​
2. From Figma

Import components directly from Figma designs using VibeFigma integration. Requirements:
  • Figma integration must be configured in Settings
  • Access to the Figma file
  • Valid Figma node URL
How it works:
  1. Click “From Figma”
  2. Paste the Figma node URL
  3. VibeFigma converts the design to React code
  4. Review and customize the component
  5. Save to your library

​
3. Vibe Designer

Generate components from natural language prompts using AI. How it works:
  1. Click “Vibe Designer”
  2. Describe the component you want (e.g., “A pricing card with three tiers and a popular badge”)
  3. The AI generates JSX code based on your design guidelines
  4. Review and refine the output
  5. Save to your design system
Tips:
  • Be specific about layout, colors, and interactions
  • Reference your design guidelines for consistency
  • Iterate by regenerating with more details

​
4. Manual Input

Paste or write JSX code directly. When to use:
  • You have existing component code
  • Migrating from another system
  • Custom, hand-crafted components
How it works:
  1. Click “Manual Input”
  2. Paste your JSX code
  3. Add component metadata (name, description, props)
  4. Optionally add prop definitions for documentation
  5. Save to your library