Skip to main content

​
Visual Components

Visual components focus on presentation and styling, with limited interactivity. They are the building blocks for creating consistent, branded user interfaces across the BuildAppsWith platform.

​
Core Visual Components

Visual components are organized into several categories based on their purpose and domain:

​
Marketing Components

Marketing components are used for building landing pages and promotional content:
ComponentPurposeVariantsStatus
HeroMain landing page bannerCenter, Split, Background ImageCompleted
Feature DisplayDisplay product featuresGrid, List, CardsCompleted
Social ProofDisplay testimonials and clientsLogo Grid, Quotes, StatsIn Progress
Pricing TableDisplay pricing optionsFeature Comparison, SimplePlanned
Call to ActionDrive user conversionsButton, Banner, InlineCompleted
Marketing components should always include responsive design for mobile, tablet, and desktop views.
// Example Hero Component
import { Hero } from '@/components/marketing/ui/hero';

function LandingPage() {
  return (
    <Hero
      title="Build Apps with Expert Developers"
      subtitle="Find vetted developers for your project"
      cta={{
        primary: {
          text: "Find Developers",
          href: "/marketplace"
        },
        secondary: {
          text: "Learn More",
          href: "/how-it-works"
        }
      }}
      image="/images/hero-image.png"
      variant="split"
    />
  );
}

​
Marketplace Components

Marketplace components are used for builder discovery and marketplace functionality:
ComponentPurposeVariantsStatus
Builder CardDisplay builder profileStandard, Featured, CompactCompleted
Builder GridDisplay multiple buildersGrid, ListCompleted
Filter PanelFilter marketplace resultsSidebar, DropdownCompleted
Sort ControlsControl result sortingDropdown, RadioCompleted
Search BoxSearch marketplaceSimple, AdvancedCompleted
See the dedicated Marketplace documentation for more details on these components.

​
Profile Components

Profile components are used for displaying user and builder profiles:
ComponentPurposeVariantsStatus
Profile HeaderDisplay user detailsStandard, CompactCompleted
Skill DisplayShow user skillsTags, Progress Bars, IconsCompleted
Portfolio GalleryDisplay portfolio itemsGrid, CarouselIn Progress
Testimonial CardDisplay client testimonialsQuote, DetailedCompleted
Stats DisplayShow user statisticsNumbers, ChartsPlanned
// Example Profile Header
import { ProfileHeader } from '@/components/profile/ui/profile-header';

function BuilderProfile({ builder }) {
  return (
    <ProfileHeader
      user={builder}
      avatarSize="lg"
      showAvailability={true}
      showContactButton={true}
      variant="standard"
    />
  );
}

​
Trust Components

Trust components are used to build credibility and trust with users:
ComponentPurposeVariantsStatus
Validation BadgeDisplay validation tierIcon, Full, MinimalCompleted
Review StarsShow ratingsRead-only, InteractiveCompleted
Trust IndicatorsDisplay trust signalsIcons, CardsCompleted
Verification StatusShow verification stateBadge, BannerIn Progress
Security FeaturesDisplay security infoIcons, DetailsPlanned

​
Design Patterns

​
Responsive Design

All visual components support multiple breakpoints: 
// Responsive variants with Tailwind
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {builders.map(builder => (
    <BuilderCard key={builder.id} builder={builder} />
  ))}
</div>

​
Theming

Components support dark and light mode through Tailwind’s theme system: 
// Dark mode support
<div className="bg-white dark:bg-slate-900 text-black dark:text-white">
  <h2 className="text-slate-900 dark:text-white">Heading</h2>
  <p className="text-slate-700 dark:text-slate-300">Content</p>
</div>

​
Animation

Visual components can include subtle animations using CSS transitions or Framer Motion: 
// Framer Motion example
import { motion } from 'framer-motion';

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  Content with entrance animation
</motion.div>

​
Accessibility

Visual components follow WCAG 2.1 AA standards:
  1. Color Contrast: All text has sufficient contrast ratio (at least 4.5:1 for normal text)
  2. Screen Readers: Proper ARIA labels and semantic HTML
  3. Keyboard Navigation: All interactive elements are keyboard accessible
  4. Focus States: Visible focus states for keyboard users
  5. Reduced Motion: Support for users who prefer reduced motion
// Accessibility example
<button
  className="focus:ring-2 focus:ring-offset-2 focus:ring-primary focus:outline-none"
  aria-label="Search for builders"
>
  <SearchIcon className="h-5 w-5" />
</button>

​
Error & Empty States

Visual components handle error and empty states gracefully: 
// Empty state example
function BuilderList({ builders }) {
  if (builders.length === 0) {
    return (
      <div className="text-center py-12 px-4">
        <NoResultsIcon className="h-12 w-12 mx-auto text-muted" />
        <h3 className="mt-4 text-lg font-medium">No builders found</h3>
        <p className="mt-2 text-sm text-muted">
          Try adjusting your filters or search query
        </p>
      </div>
    );
  }
  
  return (/* Normal render */);
}

​
Implementation Guidelines

When implementing visual components:
  1. Start with Design: Use Figma designs as the source of truth
  2. Mobile First: Build mobile layouts first, then add responsive breakpoints
  3. Accessibility: Ensure accessibility during implementation, not as an afterthought
  4. Performance: Minimize JS, use CSS for animations when possible
  5. Progressive Enhancement: Ensure basic functionality works without JS

​
See Also