Left Liquid Background
Right Liquid Background

Weather Widget

The Weather Widget preset surfaces real-time weather insights in a compact, card-based format. It integrates temperature, condition icons, and location context.

Quick Links

Installation

Install the presets individually or as part of the complete @aristobyte-ui library.

Installation of Weather Widget

Install the Weather Widget preset individually, unless @aristobyte-ui is already installed globally.

Package Manager

Individual Package

Install only the presets if you need specific functionality.

Full Library

Skip this if you have the complete @aristobyte-ui already installed.

Import

Choose between individual package imports or global library imports based on your project's needs and bundle size requirements.

Import Weather Widget

Import Weather Widget into your application to provide environmental context. Supports location-based customization and unit switching.

Import Method

;

Individual Package

Import directly from the presets package for optimal tree-shaking and smaller bundle sizes.

Recommended for component-specific usage

Global Library

Import from the main library package when using multiple components from AristoByte UI.

Recommended for component-specific usage

Basic Usage Example

Basic implementation of the component using default properties. Suitable for general-purpose interactions.

Disabled

Displays the Weather Widget in a disabled state when forecast data is unavailable, location permissions are denied, or rate limits are reached.

Preview

Guidelines

    Data Availability

  • Disable widget when third-party weather APIs return errors or when CORS/credential issues occur.

  • Disable when geolocation permission is denied and no fallback location is provided.

  • Use disabled state if forecast refresh fails repeatedly to prevent stale displays.

  • Avoid showing critical weather alerts when widget is disabled; surface system-level alerts instead.

    User Experience

  • Provide a clear call-to-action to re-enable (e.g., 'Enable location' or 'Retry').

  • Show concise placeholder data (e.g., 'Data unavailable') rather than blank space.

  • Allow manual location input as an alternative to geolocation for re-enablement.

  • Record disablement reasons for analytics to monitor API reliability and user opt-out rates.

Props Reference

Complete reference for all props available on WeatherWidget component(s), including type definitions, default values, and usage examples.

  • WeatherWidget

    • Core Props

      • children

        React.ReactNode | stringdefault: ''

Viewing Unit with ID weather-widget