More Premium Hugo Themes Premium Svelte Themes

Thumb UI

Svelte Components for thumb-driven web UIs

Thumb UI

Svelte Components for thumb-driven web UIs

Author Avatar Theme by buhrmi
Github Stars Github Stars: 106
Last Commit Last Commit: Oct 2, 2025 -
First Commit Created: Dec 18, 2023 -
Thumb UI screenshot

Overview:

Thumb UI is a collection of Svelte components designed for thumb-driven web UIs. However, this library is experimental and not recommended for anything beyond experimenting with Svelte.

Features:

  • Swipeable: Enables various touch-based interactions with optional props like numScreens, speed, direction, and current.
  • Screen: Allows the user to swipe between different screens when plugged into Swipeable component.
  • Cover: Content presenter in a Coverflow style when plugged into Swipeable component.
  • Controls: Adds navigation controls to the Swipeable component.
  • Preload: Defers rendering of content until a resource has been loaded into the browser cache.
  • Lazy: Delays rendering of content until it is scrolled into view with options like root, rootMargin, and threshold.

Installation:

To use the Thumb UI library, follow these steps:

  1. Install the package via npm:
npm install thumb-ui
  1. Import the desired component(s) into your project:
import { Swipeable, Screen, Cover, Controls, Preload, Lazy } from 'thumb-ui';
  1. Start using the components in your Svelte project.

Summary:

Thumb UI is an experimental library designed for thumb-driven web UIs. It offers several components like Swipeable, Screen, Cover, Controls, Preload, and Lazy, each serving different purposes in creating interactive web experiences. It is important to note that Thumb UI is not recommended for production use, but rather for experimentation and exploring the capabilities of Svelte.