Skip to main content

Component Overview

QwickApps React Framework provides a comprehensive set of React components designed for modern web applications. All components are fully responsive, accessible, and support both light and dark themes.

Component Categories​

  • 🎯 Core Components - Essential components for application structure and navigation
  • 🛡️ Built-in Error Handling & Accessibility - Automatic error boundaries and accessibility features
  • 🧩 Layout Components - Flexible layout blocks for organizing content and creating responsive designs
  • 📝 Form Components - Complete form controls with validation, accessibility, and data binding
  • 🎨 UI Components - Interactive elements like buttons, cards, and media displays
  • 📊 Data Components - Components specifically designed for displaying dynamic content

Core Components​

QwickApp​

The root component that provides theming, layout, and global configuration.

<QwickApp
  appId="my-app"
  appName="My Application"
  showThemeSwitcher={true}
  showPaletteSwitcher={true}
  enableScaffolding={true}
>
  {/* Your app content */}
</QwickApp>

Key Features:

  • Global theme and palette management
  • Responsive navigation scaffolding
  • SEO optimization and meta tags
  • Accessibility defaults

ThemeSwitcher​

Theme switcher is a convenience button that can be used in your UI to allow user to swtich the theme. If you are using scaffolding support, then we recommend that you set enableThemeSwitcher={true} argument in the <QwickApp> component instead.

<ThemeSwitcher 
  position="top-right"
  showLabels={true}
/>

PaletteSwitcher​

Palette switcher is a convenience button that can be used in your UI to allow user to swtich the palette. If you are using scaffolding support, then we recommend that you set enablePaletteSwitcher={true} argument in the <QwickApp> component instead.

<PaletteSwitcher
  availablePalettes={['ocean', 'forest', 'cosmic']}
  showPreview={true}
/>

Built-in Error Handling & Accessibility​

QwickApps automatically includes robust error handling and accessibility features in every application. These components are automatically integrated into QwickApp and require zero configuration.

ErrorBoundary​

Automatic error catching and recovery for your React applications.

// Automatically included in QwickApp - no setup required!
<QwickApp appName="My App">
  <MyComponent /> {/* Protected by ErrorBoundary */}
</QwickApp>

// Or use standalone
<ErrorBoundary onError={(error) => logError(error)}>
  <MyComponent />
</ErrorBoundary>

Key Features:

  • Catches JavaScript errors anywhere in component tree
  • User-friendly fallback UI with retry functionality
  • Development mode error details
  • Custom error handling callbacks

📖 Full ErrorBoundary Documentation →

AccessibilityProvider​

WCAG 2.1 AA compliant accessibility features with zero configuration.

// Automatically included in QwickApp
<QwickApp appName="My App">
  <MyComponent /> {/* Has accessibility features */}
</QwickApp>

// Access accessibility features
function MyComponent() {
  const { announce, highContrast, isKeyboardUser } = useAccessibility();
  
  return (
    <button onClick={() => announce('Action completed')}>
      Complete Action
    </button>
  );
}

Key Features:

  • System preference detection (high contrast, reduced motion)
  • Keyboard navigation with enhanced focus indicators
  • Screen reader support with ARIA live announcements
  • Development-time accessibility auditing

📖 Full AccessibilityProvider Documentation →

Accessible navigation hierarchy component.

import { Breadcrumbs, useBreadcrumbs } from '@qwickapps/react-framework';

const items = [
  { label: 'Home', href: '/', icon: <HomeIcon /> },
  { label: 'Products', href: '/products' },
  { label: 'Laptop', href: '/products/laptop', current: true },
];

<Breadcrumbs items={items} separator="→" />

Key Features:

  • Full keyboard navigation support
  • Smart truncation for long paths
  • Customizable icons and separators
  • Built-in state management hook

📖 Full Breadcrumbs Documentation →

Layout Components​

CollapsibleLayout​

Advanced expandable/collapsible container with comprehensive features.

<CollapsibleLayout
  title="User Settings"
  subtitle="Configure your preferences"
  defaultCollapsed={false}
  variant="outlined"
  animationStyle="slide"
  persistState={true}
>
  <div>Your settings content here...</div>
</CollapsibleLayout>

Key Features:

  • Controlled and uncontrolled state management
  • Multiple animation styles (fade, slide, scale)
  • localStorage persistence and custom trigger areas
  • Rich content support with header actions and footers
  • Complete accessibility and keyboard navigation

📖 Full CollapsibleLayout Documentation →

Section​

Container component for organizing content with consistent spacing.

<Section
  backgroundColor="primary"
  padding="large"
  maxWidth="container"
>
  <HeroBlock title="Welcome" />
</Section>

HeroBlock​

Eye-catching header sections with call-to-action buttons.

<HeroBlock
  title="Build Faster"
  subtitle="Modern apps with QwickApps React Framework"
  backgroundImage="/hero.jpg"
  ctaButtons={[
    { label: "Get Started", href: "/start", variant: "primary" },
    { label: "Learn More", href: "/docs", variant: "outlined" }
  ]}
/>

FeatureGrid​

Display features in a responsive grid layout.

<FeatureGrid
  columns={3}
  features={[
    {
      icon: "⚡",
      title: "Lightning Fast",
      description: "Optimized for performance"
    },
    {
      icon: "🔒", 
      title: "Secure by Default",
      description: "Built-in security best practices"
    }
  ]}
/>

FeatureCard​

Individual feature cards with icons and content.

<FeatureCard
  icon="🎨"
  title="Beautiful Design"
  description="Modern, accessible interfaces"
  link={{ href: "/design", label: "Learn More" }}
/>

CardListGrid​

Responsive grid for displaying card-based content.

<CardListGrid
  columns={{ mobile: 1, tablet: 2, desktop: 3 }}
  gap="medium"
  items={cardData}
  renderCard={(item) => (
    <ProductCard {...item} />
  )}
/>

Form Components​

FormBlock​

Complete form container with validation and submission handling.

<FormBlock
  title="Contact Us"
  onSubmit={handleSubmit}
  submitLabel="Send Message"
  fields={[
    { type: 'text', name: 'name', label: 'Name', required: true },
    { type: 'email', name: 'email', label: 'Email', required: true },
    { type: 'textarea', name: 'message', label: 'Message' }
  ]}
/>

TextInputField​

Versatile text input with validation.

<TextInputField
  label="Full Name"
  name="fullName"
  placeholder="Enter your full name"
  required={true}
  validation={{
    minLength: 2,
    pattern: /^[a-zA-Z\s]+$/
  }}
/>

SelectInputField​

Dropdown selection with search and multi-select support.

<SelectInputField
  label="Country"
  name="country"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'ca', label: 'Canada' },
    { value: 'uk', label: 'United Kingdom' }
  ]}
  searchable={true}
/>

ChoiceInputField​

Radio buttons and checkboxes with flexible layouts.

<ChoiceInputField
  label="Preferred Contact Method"
  name="contactMethod"
  type="radio"
  layout="horizontal"
  options={[
    { value: 'email', label: 'Email' },
    { value: 'phone', label: 'Phone' },
    { value: 'text', label: 'Text Message' }
  ]}
/>

HtmlInputField​

Rich text editor for formatted content.

<HtmlInputField
  label="Description"
  name="description"
  toolbar={['bold', 'italic', 'link', 'list']}
  placeholder="Enter detailed description..."
/>

UI Components​

Button​

Versatile button component with multiple variants and states.

<Button
  label="Get Started"
  variant="primary"
  size="large"
  startIcon="🚀"
  href="/signup"
  loading={isSubmitting}
/>

Variants: primary, secondary, outlined, text, contained
Sizes: small, medium, large, responsive

Article​

Rich content display with typography and media support.

<Article
  title="Getting Started Guide" 
  content="<p>Welcome to QwickApps...</p>"
  author={{
    name: "QwickApps Team",
    avatar: "/team.jpg"
  }}
  publishedAt="2025-01-15"
  readingTime={5}
/>

Code​

Syntax-highlighted code blocks with copy functionality.

<Code
  language="tsx"
  showLineNumbers={true}
  copyButton={true}
>
{`function App() {
  return <QwickApp appId="demo">Hello World</QwickApp>;
}`}
</Code>

ProductCard​

Product display with features and call-to-action buttons.

<ProductCard
  title="QwickApps Pro"
  description="Advanced features for teams"
  image="/product.jpg"
  features={['Advanced Analytics', 'Priority Support', 'Custom Themes']}
  ctaButton={{ label: "Start Trial", href: "/trial" }}
/>

Content Components​

Content​

Generic content block for mixed media and text.

<Content
  blocks={[
    { type: 'heading', content: 'About Us', level: 2 },
    { type: 'paragraph', content: 'We build amazing software...' },
    { type: 'image', src: '/about.jpg', alt: 'Our team' },
    { type: 'button', label: 'Contact', href: '/contact' }
  ]}
/>

Application footer with links and branding.

<Footer
  logo="/logo.svg"
  brandText="© 2025 QwickApps"
  sections={[
    {
      title: 'Product',
      links: [
        { label: 'Framework', href: '/framework' },
        { label: 'Builder', href: '/builder' }
      ]
    },
    {
      title: 'Company', 
      links: [
        { label: 'About', href: '/about' },
        { label: 'Contact', href: '/contact' }
      ]
    }
  ]}
  socialLinks={[
    { platform: 'github', url: 'https://github.com/qwickapps' },
    { platform: 'twitter', url: 'https://twitter.com/qwickapps' }
  ]}
/>

Header Components​

PageBannerHeader​

Simple page header with breadcrumbs.

<PageBannerHeader
  title="Documentation"
  subtitle="Comprehensive guides and examples"
  breadcrumbs={[
    { label: 'Home', href: '/' },
    { label: 'Docs', href: '/docs' },
    { label: 'Components', href: '/docs/components' }
  ]}
/>

CoverImageHeader​

Hero-style header with background image.

<CoverImageHeader
  title="Welcome to QwickApps"
  subtitle="Build modern applications faster"
  backgroundImage="/cover.jpg"
  overlay={0.6}
  textAlign="center"
/>

Data Binding Support​

All components support data binding through the dataSource prop:

<Button
  dataSource="buttons.primary"
  label="{{label}}"
  href="{{url}}"
  variant="{{variant}}"
/>

<Article
  dataSource="articles.featured"
  title="{{title}}"
  content="{{content}}"
  author="{{author}}"
/>

<FeatureGrid
  dataSource="features"
  itemTemplate={{
    title: "{{title}}",
    description: "{{description}}",
    icon: "{{icon}}"
  }}
/>

Accessibility Features​

All components include:

✅ Built-in ARIA Support​

  • Proper labels and descriptions
  • Keyboard navigation
  • Screen reader compatibility

✅ Focus Management​

  • Logical tab order
  • Visible focus indicators
  • Skip links where appropriate

✅ Color Contrast​

  • WCAG AA compliance
  • High contrast mode support
  • Color-blind friendly palettes

Responsive Design​

Breakpoint System​

Components use a mobile-first breakpoint system:

<FeatureGrid
  columns={{
    mobile: 1,    // < 768px
    tablet: 2,    // 768px - 1024px  
    desktop: 3,   // 1024px - 1440px
    large: 4      // > 1440px
  }}
/>

Responsive Properties​

Many components accept responsive values:

<Section
  padding={{
    mobile: 'medium',
    desktop: 'large'
  }}
  textAlign={{
    mobile: 'center',
    desktop: 'left'
  }}
/>

Performance Optimization​

🚀 Lazy Loading​

Large components load on demand:

<Article 
  title="Long Article"
  lazyLoad={true}
  threshold={0.1}
/>

📦 Tree Shaking​

Import only what you need:

// Import specific components
import { Button, Article } from '@qwickapps/react-framework';

// Or use selective imports
import Button from '@qwickapps/react-framework/Button';

🔄 Caching​

Built-in caching for data-bound components:

<DataProvider 
  source="/api/content"
  cacheTime={300}
>
  <Article dataSource="featured" />
</DataProvider>

Customization​

CSS Custom Properties​

Override component styling:

.qwickapps-button {
  --button-border-radius: 12px;
  --button-font-weight: 600;
}

Style Override​

Use the sx prop for component-specific styling:

<Button
  label="Custom Button"
  sx={{
    backgroundColor: 'purple',
    borderRadius: '20px',
    '&:hover': {
      backgroundColor: 'darkpurple'
    }
  }}
/>

Custom Components​

Extend existing components:

import { Button } from '@qwickapps/react-framework';

function BrandButton({ children, ...props }) {
  return (
    <Button
      {...props}
      sx={{
        backgroundColor: 'var(--brand-primary)',
        fontFamily: 'var(--brand-font)',
        ...props.sx
      }}
    >
      {children}
    </Button>
  );
}

What's Next?​