Widgets

Fuwafuwa Framework introduces Widgets as a powerful tool to streamline development and enhance UI consistency. These widgets encapsulate common UI elements, such as forms, inputs, and interactive components.

Widgets are reusable UI components that can be easily integrated into your Fuwafuwa application. They are designed to be consistent, responsive, and accessible, making it easy to create professional -looking interfaces without having to build every component from scratch.

Whether you're building a simple form, a complex dashboard, or a data visualization interface, Fuwafuwa's widgets provide the building blocks you need to get started quickly.

Widget Categories

Fuwafuwa's widgets are organized into several categories, each designed to address specific UI requirements. This organization makes it easy to find and use the right widget for your needs.

Form Widgets

UI Components

Dashboard Widgets

Examples

To help you get started with Fuwafuwa's widgets, we've included a variety of examples that demonstrate how to use each widget in different scenarios. These examples cover everything from basic usage to advanced configurations.

Each example includes the HTML markup and any necessary JavaScript or Alpine.js code. You can copy these examples directly into your application and modify them to suit your needs.

Tabs

<div x-data="{ page: 0 }">
    <ul class="tab-container">
        <li class="tab" :class="{ 'tab-active': page == 0 }" 
            @click="page = 0">Tab 1</li>
        <li class="tab" :class="{ 'tab-active': page == 1 }" 
            @click="page = 1">Tab 2</li>
        <li class="tab tab-disabled">Tab 3</li>
    </ul>
    <div x-show="page == 0">Content 1</div>
    <div x-show="page == 1">Content 2</div>
</div>

Buttons

<!-- Color variants -->
<button class="button button-gray">Button</button>
<button class="button button-green">Button</button>
<button class="button button-red">Button</button>

<!-- Size variants -->
<button class="button button-tiny">Tiny</button>
<button class="button button-small">Small</button>
<button class="button button-large">Large</button>
<button class="button button-huge">Huge</button>

Progress Indicators

<div x-data="{ progress: 60 }">
    <!-- Basic radial progress -->
    <div class="radial-progress" 
         :style="{ '--value': progress }" 
         x-text="progress + '%'"></div>

    <!-- Themed progress -->
    <div class="radial-progress text-primary" 
         :style="{ '--value': progress }"></div>

    <!-- Custom styled progress -->
    <div class="border-4 radial-progress bg-background-secondary text-secondary border-background-primary"></div>
</div>

Form Inputs

<!-- Basic input with label -->
<ff:input title="Username" 
          name="username" 
          explanation="Enter your username" />

<!-- Radio group with grid layout -->
<ff:radio title="Options" 
          options="Opt1,1|Opt2,2|Opt3,3" 
          x-model="radio"
          cols="3" />

<!-- Inline radio group -->
<ff:radio title="Options" 
          options="Opt1|Opt2|Opt3" 
          x-model="radio2"
          inline="true" />

Srselect (Searchable Select)

<!-- Basic searchable select -->
<ff:srselect title="Select User"
             name="user_id"
             lookupUrl="/api/users/lookup"
             placeholder="Search user..." />

<!-- With custom value and label fields -->
<ff:srselect title="Assign To"
             name="assigned_user_id"
             lookupUrl="/api/users/lookup"
             valueField="id"
             labelField="fullname" />

<!-- With error model binding -->
<ff:srselect title="Category"
             name="category_id"
             lookupUrl="/api/categories/lookup"
             errormodel="errors.category_id" />

The <ff:srselect> widget provides a dropdown with server-side search capability. It is ideal for selecting from large datasets where loading all options upfront would be inefficient. The widget fetches results from the specified lookupUrl as the user types.

Modal Dialog

<!-- Modal trigger -->
<button class="button" @click="modal_modal1.open()">
    Open Modal
</button>

<!-- Modal definition -->
<ff:modal id="modal1" title="Modal Title" size="large">
    <div class="min-h-[70vh] px-6 py-4" x-data="modal1">
        Modal content here
    </div>
</ff:modal>

Stats Card

<!-- Basic stats card -->
<ff:stats
  title="Total Users"
  value="1,234"
/>

<!-- Stats with trend and icon -->
<ff:stats
  title="Revenue"
  value="$45,678"
  trend="+12.5%"
  trendUp="true"
  icon="currency"
/>

<!-- Clickable stats card -->
<ff:stats
  title="Active Sessions"
  value="456"
  href="/sessions"
/>

Chart

<!-- Line chart -->
<ff:chart
  type="line"
  title="Sales Over Time"
  xdata='["Jan", "Feb", "Mar", "Apr"]'
  ydata='[100, 150, 200, 175]'
  height="300"
/>

<!-- Bar chart -->
<ff:chart
  type="bar"
  title="Monthly Revenue"
  xdata='["Q1", "Q2", "Q3", "Q4"]'
  ydata='[10000, 15000, 12000, 18000]'
  height="250"
/>

Avatar

<!-- Avatar with initials -->
<ff:avatar
  name="John Doe"
  size="md"
/>

<!-- Avatar with image -->
<ff:avatar
  src="/images/user.jpg"
  name="John Doe"
  size="lg"
/>

<!-- Avatar with status -->
<ff:avatar
  src="/images/user.jpg"
  name="Jane Smith"
  size="xl"
  status="online"
/>

Skeleton

<!-- Card skeleton -->
<ff:skeleton type="card" />

<!-- List skeleton -->
<ff:skeleton type="list" count="3" />

<!-- Avatar skeleton -->
<ff:skeleton type="avatar" />

<!-- Text skeleton -->
<ff:skeleton type="text" count="2" width="75%" />

Switch

<!-- Basic switch -->
<ff:switch
  label="Dark Mode"
  xmodel="settings.darkMode"
/>

<!-- Small switch -->
<ff:switch
  label="Notifications"
  xmodel="settings.notifications"
  size="sm"
  color="green"
/>

<!-- Disabled switch -->
<ff:switch
  label="Feature Flag"
  xmodel="features.beta"
  disabled="true"
/>

Timeline

<!-- Standard timeline -->
<ff:timeline>
  <ff:timelineItem
    title="Project Started"
    date="2024-01-01"
    description="Initial planning phase began"
    icon="rocket"
    color="blue"
  />
  <ff:timelineItem
    title="First Milestone"
    date="2024-01-15"
    description="Completed MVP development"
    icon="check"
    color="green"
  />
</ff:timeline>

<!-- Compact timeline -->
<ff:timeline compact="true">
  <ff:timelineItem title="Event 1" date="2024-01-01" />
  <ff:timelineItem title="Event 2" date="2024-01-02" />
</ff:timeline>

Progress Card

<!-- Basic progress -->
<ff:progress-card
  title="Storage Usage"
  value="75"
  max="100"
  color="blue"
/>

<!-- Progress with label -->
<ff:progress-card
  title="Upload Progress"
  value="45"
  max="100"
  label="45 MB of 100 MB"
  color="green"
  showPercentage="true"
/>

<!-- Warning progress -->
<ff:progress-card
  title="Quota"
  value="90"
  max="100"
  color="red"
/>

Common Attributes

Many of Fuwafuwa's widgets share common attributes that allow you to customize their appearance and behavior. These attributes are consistent across all widgets, making it easy to learn and use them.

Best Practices

To get the most out of Fuwafuwa's widgets, it's important to follow best practices for widget usage. These practices will help ensure that your application is consistent, accessible, and maintainable.

• Use semantic form widgets for better accessibility
• Provide clear labels and explanations
• Implement consistent validation feedback
• Use appropriate button variants for different actions
• Consider mobile responsiveness when using modals and tabs
• Use skeleton widgets during data loading to prevent layout shifts
• Prefer semantic CSS classes (text-primary, bg-surface) over hardcoded colors
• Test components in both light and dark modes

Documentation

For detailed documentation of all dashboard widgets including complete attribute references, see Components Documentation.