Thumb UI screenshot

Thumb UI

Author Avatar Theme by Buhrmi
Updated: 2 Oct 2025
106 Stars

Svelte Components for thumb-driven web UIs

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.