Widget

import { SunIcon } from "@phosphor-icons/react"
import {
  Widget,
  WidgetContent,
  WidgetDescription,
  WidgetFooter,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetValue,
} from "@/components/ui/widget"

export default function WidgetDemo() {
  return (
    <Widget size="small" align="start">
      <WidgetHeader>

Widget is a rounded muted card that comes in four sizes: small (168 × 168), medium (352 × 168), large (352 × 352) and extra-large (720 × 352), or auto to fill its parent. Compose it from WidgetHeader, which holds a WidgetIcon, WidgetTitle and an optional WidgetAction, followed by WidgetValue, WidgetDescription, WidgetContent and a WidgetFooter pinned to the bottom.

With resizable, a corner handle lets people drag the widget to another size. While dragging, a dashed outline previews the size it will snap to on release. Use widgets for glanceable summaries on a dashboard; for general grouped content, use Card.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/widget

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add widget

Manual

Add the cn helper.
Copy the source into components/ui/widget.tsx:

components/ui/widget.tsx

"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

type WidgetSize = "small" | "medium" | "large" | "extra-large"

const WIDGET_DIMENSIONS: Record<WidgetSize, [number, number]> = {
  small: [168, 168],
  medium: [352, 168],
  large: [352, 352],
  "extra-large": [720, 352],
}

function nearestSize(width: number, height: number, sizes: WidgetSize[]) {
  let best: WidgetSize | null = null

Update the import paths to match your project.

Usage

import { Widget, WidgetHeader, WidgetIcon, WidgetTitle, WidgetAction, WidgetDescription, WidgetValue, WidgetContent, WidgetFooter } from "@/components/ui/widget"

<Widget size="small" align="start">
  <WidgetHeader>
    <WidgetIcon>
      <SunIcon weight="fill" />
    </WidgetIcon>
    <WidgetTitle>Istanbul</WidgetTitle>
  </WidgetHeader>
  <WidgetContent>
    <WidgetValue>24°</WidgetValue>
    <WidgetDescription>Partly cloudy</WidgetDescription>
  </WidgetContent>
  <WidgetFooter>H 27° · L 18°</WidgetFooter>
</Widget>

Use size with onSizeChange to control the size, or defaultSize to set where an uncontrolled widget starts. Without either, a resizable widget starts small and a fixed widget is auto. Limit the sizes a drag can snap to with sizes.

Set resizable="free" to follow the pointer without snapping; the widget stays between the smallest size and the largest allowed size. Double-click the handle to return to the starting size.

Adapt the content to the current size with the group/widget group and data-size, for example group-data-[size=small]/widget:hidden.

Examples

Sales

Shows a resizable widget whose chart and list adapt to each size.

import { CashRegisterIcon } from "@phosphor-icons/react"
import type * as React from "react"
import {
  Widget,
  WidgetDescription,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetValue,
} from "@/components/ui/widget"

const hourly = [12, 18, 14, 30, 44, 34, 22, 40, 100, 46, 30, 14]

const topItems = [
  { name: "Grilled meatballs", count: 38 },
  { name: "Lahmacun", count: 31 },

Kitchen

Places the resize handle inside the widget's corner.

import { CookingPotIcon } from "@phosphor-icons/react"
import type * as React from "react"
import {
  Widget,
  WidgetDescription,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetValue,
} from "@/components/ui/widget"

const tickets = [
  { id: "#1042", place: "Table 4", minutes: 18 },
  { id: "#1043", place: "Takeaway", minutes: 15 },
  { id: "#1044", place: "Table 12", minutes: 9 },
  { id: "#1045", place: "Pickup", minutes: 7 },

Reservations

Limits resizing to the small and medium sizes.

import { CalendarBlankIcon } from "@phosphor-icons/react"
import type * as React from "react"
import {
  Widget,
  WidgetAction,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetValue,
} from "@/components/ui/widget"

function Hint({ children }: { children: React.ReactNode }) {
  return <p className="mt-6 text-xs text-muted-foreground">{children}</p>
}

export default function WidgetReservations() {

Weekly report

Starts at extra-large and reveals extra content only at that size.

import { ChartBarIcon, TriangleIcon } from "@phosphor-icons/react"
import type * as React from "react"
import {
  Widget,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetValue,
} from "@/components/ui/widget"

const week = [
  { day: "Mon", value: 52 },
  { day: "Tue", value: 44 },
  { day: "Wed", value: 60 },
  { day: "Thu", value: 56 },
  { day: "Fri", value: 82 },

Free resize

Resizes freely with the pointer instead of snapping to sizes.

import {
  BowlFoodIcon,
  CoffeeIcon,
  HamburgerIcon,
  IceCreamIcon,
  OrangeSliceIcon,
  PizzaIcon,
} from "@phosphor-icons/react"
import * as React from "react"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Widget, WidgetTitle } from "@/components/ui/widget"

const menu = [
  {
    name: "Meatballs",
    price: "₺280",

Auto resize

Fills its parent with auto, and snaps to fixed sizes when dragged.

import { CashRegisterIcon } from "@phosphor-icons/react"
import {
  Widget,
  WidgetDescription,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
} from "@/components/ui/widget"

export default function WidgetAutoResize() {
  return (
    <div className="h-60 w-full max-w-180">
      <Widget resizable defaultSize="auto">
        <WidgetHeader>
          <WidgetIcon>
            <CashRegisterIcon />

Centered

Centers the icon, title and description with align="center".

import { CashRegisterIcon } from "@phosphor-icons/react"
import {
  Widget,
  WidgetDescription,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
} from "@/components/ui/widget"

export default function WidgetCentered() {
  return (
    <Widget size="small" align="center">
      <WidgetHeader>
        <WidgetIcon size="lg">
          <CashRegisterIcon />
        </WidgetIcon>

Sizes

Shows each fixed size side by side.

import {
  Widget,
  WidgetFooter,
  WidgetHeader,
  WidgetTitle,
} from "@/components/ui/widget"

const gridSpans = {
  small: "1 × 1",
  medium: "2 × 1",
  large: "2 × 2",
  "extra-large": "4 × 2",
}

export default function WidgetSizes() {
  return (

Dashboard

Arranges fixed widgets in a grid as a dashboard.

import {
  CalendarBlankIcon,
  CashRegisterIcon,
  CookingPotIcon,
  SunIcon,
} from "@phosphor-icons/react"
import {
  Widget,
  WidgetContent,
  WidgetDescription,
  WidgetFooter,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetValue,
} from "@/components/ui/widget"

API Reference

Anatomy11 parts

</WidgetHeader>

</WidgetContent>

</Widget>

The rounded card that sets the size, alignment and resize behavior.

Prop	Type	Default	Description
`size`	`WidgetSize \| "auto"`	-	Controls the current size, or `auto` to fill the parent.
`defaultSize`	`WidgetSize \| "auto"`	-	Sets the starting size when uncontrolled; double-clicking the handle also returns to it.
`onSizeChange`	`(size: WidgetSize \| "auto") => void`	-	Called with the new size when a drag snaps to a different size or the size is reset.
`sizes`	`WidgetSize[]`	`["small", "medium", "large", "extra-large"]`	Lists the sizes a drag can snap to; the largest also caps free resizing.
`resizable`	`boolean \| "free"`	`false`	Adds a resize handle; `true` snaps to `sizes`, and `free` follows the pointer.
`handle`	`"inside" \| "outside"`	`"outside"`	Places the resize handle `inside` or `outside` the bottom corner.
`align`	`"start" \| "center"`	`"start"`	Centers the content horizontally and vertically when set to `center`.

Also accepts the props of React.ComponentProps<"div">.

WidgetHeader

A row that holds the icon, title and action.

Also accepts the props of React.ComponentProps<"div">.

WidgetIcon

A decorative icon, shown on a tile in the default and lg sizes.

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg"`	`"default"`	Sets the icon size: `sm` without a tile, or `default` and `lg` on a rounded tile.

Also accepts the props of React.ComponentProps<"span">.

WidgetTitle

The widget's title, truncated to one line.

Also accepts the props of React.ComponentProps<"p">.

WidgetAction

A slot at the end of the header for a control; hidden when centered.

Also accepts the props of React.ComponentProps<"div">.

WidgetDescription

Secondary text that explains the content.

Also accepts the props of React.ComponentProps<"p">.

WidgetValue

A large figure in tabular numbers, such as a total or temperature.

Also accepts the props of React.ComponentProps<"p">.

WidgetContent

A flexible column that fills the remaining space.

Also accepts the props of React.ComponentProps<"div">.

WidgetFooter

Small secondary text pinned to the bottom of the widget.

Also accepts the props of React.ComponentProps<"div">.

Accessibility

WidgetIcon is hidden from assistive technologies, so make sure the title conveys its meaning.
The resize handle is hidden from assistive technologies and works with a pointer only. Offer another way to change the size, such as a control that sets size, if it matters.

Notes

Widget sets data-size and data-align, and data-resizing while dragging. It's also a @container/widget container for container queries.
Parts carry data-slot attributes such as widget, widget-container, widget-handle, widget-preview and widget-header.
The handle is visible on hover and always visible on touch screens. It mirrors in right-to-left layouts.
Size changes animate over 500ms, and the animation is removed when reduced motion is preferred.

iOS

import { SunIcon } from "phosphor-react-native"
import { Icon } from "@/components/ui/icon"
import { Widget, WidgetContent, WidgetDescription, WidgetFooter, WidgetHeader, WidgetIcon, WidgetTitle, WidgetValue } from "@/components/ui/widget"

function Weather() {
  return (
    <>
      <WidgetHeader>
        <WidgetIcon>
          <Icon as={SunIcon} weight="fill" />
        </WidgetIcon>
        <WidgetTitle>Istanbul</WidgetTitle>
      </WidgetHeader>
      <WidgetContent>
        <WidgetValue>24°</WidgetValue>
        <WidgetDescription>Partly cloudy</WidgetDescription>

import EsuissUI
import PhosphorSwift
import SwiftUI

struct WidgetExample: View {
  var body: some View {
    Widget(.small) {
      WidgetWeather()
    }
  }
}

struct WidgetWeather: View {
  var body: some View {
    WidgetHeader {
      WidgetIcon {

import androidx.compose.runtime.Composable
import androidx.compose.ui.text.style.TextOverflow
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Fill
import com.adamglin.phosphoricons.fill.Sun
import com.esuiss.ui.components.Icon
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.Widget
import com.esuiss.ui.components.WidgetContent
import com.esuiss.ui.components.WidgetDescription
import com.esuiss.ui.components.WidgetFooter
import com.esuiss.ui.components.WidgetHeader
import com.esuiss.ui.components.WidgetIcon
import com.esuiss.ui.components.WidgetSize
import com.esuiss.ui.components.WidgetTitle
import com.esuiss.ui.components.WidgetValue

Widget is a View with a rounded, filled surface. It comes in four fixed sizes, small (168×168), medium (352×168), large (352×352) and extra-large (720×352), or auto, which fills its parent. Fixed sizes animate with Reanimated when the size changes.

With resizable, a corner handle lets the user drag the widget between sizes: a dashed outline previews the size it will snap to, a selection haptic plays on each new snap (when a haptics adapter is provided through HapticsContext), and double-tapping the handle returns to the initial size. Only sizes that fit the available width are offered. Set align="center" to center the content, which also hides WidgetAction.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/widget

See Installation for the components.json setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add widget

$ pnpm dlx @esuiss/ui@latest add widget --platform swift

$ pnpm dlx @esuiss/ui@latest add widget --platform kotlin

The CLI also adds what it builds on: Icon, Text. On React Native it also adds the animated view components/ui/animated-view.tsx.

Manual

Install the dependencies:

npx expo install cn phosphor-react-native react-native-gesture-handler react-native-reanimated react-native-svg react-native-worklets

Add the pieces it builds on: Icon, Text, and the primitives components/primitives/haptics.tsx, and the animated view components/ui/animated-view.tsx from the next step.
Copy the animated view into components/ui/animated-view.tsx:

uniwind/components/ui/animated-view.tsx

import { Pressable } from "react-native"
import Animated from "react-native-reanimated"

const AnimatedPressable = Animated.createAnimatedComponent(Pressable)

type AnimatedViewProps =
  | (React.ComponentProps<typeof Animated.View> &
      React.RefAttributes<React.ComponentRef<typeof Animated.View>> & {
        as?: "View"
      })
  | (React.ComponentProps<typeof AnimatedPressable> &
      React.RefAttributes<React.ComponentRef<typeof AnimatedPressable>> & {
        as: "Pressable"
      })

function AnimatedView(props: AnimatedViewProps) {

Copy the source into components/ui/widget.tsx:

uniwind/components/ui/widget.tsx

import { cn } from "cn"
import type { IconProps as PhosphorIconProps } from "phosphor-react-native"
import * as React from "react"
import {
  type AccessibilityActionEvent,
  I18nManager,
  View,
  type ViewProps,
} from "react-native"
import { Gesture, GestureDetector } from "react-native-gesture-handler"
import {
  Easing,
  ReduceMotion,
  runOnJS,
  useAnimatedStyle,
  useSharedValue,

Update the import paths to match your project.

Install the dependencies:

npx expo install cn phosphor-react-native react-native-gesture-handler react-native-reanimated react-native-svg react-native-worklets

Add the pieces it builds on: Icon, Text, and the primitives components/primitives/haptics.tsx, and the animated view components/ui/animated-view.tsx from the next step.
Copy the animated view into components/ui/animated-view.tsx:

nativewind/components/ui/animated-view.tsx

import { Pressable } from "react-native"
import Animated from "react-native-reanimated"

const AnimatedPressable = Animated.createAnimatedComponent(Pressable)

type AnimatedViewProps =
  | (React.ComponentProps<typeof Animated.View> &
      React.RefAttributes<React.ComponentRef<typeof Animated.View>> & {
        as?: "View"
      })
  | (React.ComponentProps<typeof AnimatedPressable> &
      React.RefAttributes<React.ComponentRef<typeof AnimatedPressable>> & {
        as: "Pressable"
      })

function AnimatedView(props: AnimatedViewProps) {

Copy the source into components/ui/widget.tsx:

nativewind/components/ui/widget.tsx

import { cn } from "cn"
import type { IconProps as PhosphorIconProps } from "phosphor-react-native"
import * as React from "react"
import {
  type AccessibilityActionEvent,
  I18nManager,
  View,
  type ViewProps,
} from "react-native"
import { Gesture, GestureDetector } from "react-native-gesture-handler"
import {
  Easing,
  ReduceMotion,
  runOnJS,
  useAnimatedStyle,
  useSharedValue,

Update the import paths to match your project.

Install the dependencies:

npx expo install phosphor-react-native react-native-gesture-handler react-native-reanimated react-native-svg react-native-worklets

Add the pieces it builds on: Icon, Text, and the primitives components/primitives/haptics.tsx, and the animated view components/ui/animated-view.tsx from the next step.
Copy the animated view into components/ui/animated-view.tsx:

stylesheet/components/ui/animated-view.tsx

import { Pressable } from "react-native"
import Animated from "react-native-reanimated"

const AnimatedPressable = Animated.createAnimatedComponent(Pressable)

type AnimatedViewProps =
  | (React.ComponentProps<typeof Animated.View> &
      React.RefAttributes<React.ComponentRef<typeof Animated.View>> & {
        as?: "View"
      })
  | (React.ComponentProps<typeof AnimatedPressable> &
      React.RefAttributes<React.ComponentRef<typeof AnimatedPressable>> & {
        as: "Pressable"
      })

function AnimatedView(props: AnimatedViewProps) {

Copy the source into components/ui/widget.tsx:

stylesheet/components/ui/widget.tsx

import type { IconProps as PhosphorIconProps } from "phosphor-react-native"
import * as React from "react"
import {
  type AccessibilityActionEvent,
  I18nManager,
  type StyleProp,
  StyleSheet,
  type TextStyle,
  View,
  type ViewProps,
  type ViewStyle,
} from "react-native"
import { Gesture, GestureDetector } from "react-native-gesture-handler"
import {
  Easing,
  ReduceMotion,

Update the import paths to match your project.

Target iOS 17 or later.
Add the Swift package to your app:

Package.swift

.package(url: "https://github.com/phosphor-icons/swift", from: "2.1.0")

Copy the theme files every view uses:

swift/Theme/Theme.swift

import CoreText
import SwiftUI
import UIKit

struct RGBA: Sendable {
  let red: CGFloat
  let green: CGFloat
  let blue: CGFloat
  let alpha: CGFloat

  init(_ hex: UInt32, _ alpha: CGFloat = 1) {
    red = CGFloat((hex >> 16) & 0xFF) / 255
    green = CGFloat((hex >> 8) & 0xFF) / 255
    blue = CGFloat(hex & 0xFF) / 255
    self.alpha = alpha
  }

swift/Theme/Tokens.swift

import SwiftUI

public enum EsuissColor {
  public static let background = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000))
  public static let foreground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let card = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let cardForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let popover = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let popoverForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let primary = Color.adaptive(light: .init(0x0071E3), dark: .init(0x2997FF))
  public static let primaryForeground = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0xFFFFFF))
  public static let secondary = Color.adaptive(light: .init(0x000000, 0.04), dark: .init(0xFFFFFF, 0.1))
  public static let secondaryForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let muted = Color.adaptive(light: .init(0xF5F5F7), dark: .init(0x161617))
  public static let mutedForeground = Color.adaptive(light: .init(0x6E6E73), dark: .init(0xA1A1A6))
  public static let accent = Color.adaptive(light: .init(0x000000, 0.06), dark: .init(0xFFFFFF, 0.1))

Copy the source and every file it uses:

swift/Components/Widget.swift

import PhosphorSwift
import SwiftUI

public enum WidgetSize: CaseIterable, Sendable {
  case small, medium, large, extraLarge

  public var dimensions: CGSize {
    switch self {
    case .small: CGSize(width: 168, height: 168)
    case .medium: CGSize(width: 352, height: 168)
    case .large: CGSize(width: 352, height: 352)
    case .extraLarge: CGSize(width: 720, height: 352)
    }
  }
}

swift/Components/Button.swift

import SwiftUI

public struct VariantButtonStyle: ButtonStyle {
  public enum Variant: CaseIterable, Sendable {
    case `default`, outline, secondary, tinted, ghost, plain, destructive, link
  }

  public enum Size: CaseIterable, Sendable {
    case `default`, xs, sm, lg, xl, icon, iconXs, iconSm, iconLg, iconXl

    var height: CGFloat {
      switch self {
      case .xs, .iconXs: Metrics.Height.buttonXs
      case .sm, .iconSm: Metrics.Height.buttonSm
      case .default, .icon: Metrics.Height.button
      case .lg, .iconLg: Metrics.Height.buttonLg

swift/Components/ButtonGroup.swift

import SwiftUI

extension EnvironmentValues {
  @Entry var buttonGroup: Axis? = nil
  @Entry var buttonGroupSize: CGSize = .zero
}

enum ButtonGroupSpace: Hashable {
  case group
}

struct ButtonGroupFrame {
  let bounds: Anchor<CGRect>
  let outlined: Bool
}

swift/Components/Dialog.swift

import SwiftUI

extension View {
  public func dialog<Content: View>(
    isPresented: Binding<Bool>,
    @ViewBuilder content: @escaping () -> Content
  ) -> some View {
    modifier(
      CoverPresenter(isPresented: isPresented) { visible in
        CenteredStage(visible: visible, dismissible: true, content: content)
      }
    )
  }
}

struct CenteredStage<Content: View>: View {

swift/Components/Drawer.swift

import SwiftUI

extension View {
  public func drawer<Content: View>(
    isPresented: Binding<Bool>,
    detents: Set<PresentationDetent>? = nil,
    selection: Binding<PresentationDetent>? = nil,
    onDismiss: (() -> Void)? = nil,
    @ViewBuilder content: @escaping () -> Content
  ) -> some View {
    let binding = isPresented
    return sheet(isPresented: isPresented, onDismiss: onDismiss) {
      DrawerHost(detents: detents, selection: selection, content: content)
        .environment(\.overlayDismiss, OverlayDismiss { binding.wrappedValue = false })
    }
  }

swift/Components/Haptics.swift

import SwiftUI

extension EnvironmentValues {
  @Entry public var hapticsEnabled = true
}

extension View {
  public func haptics(_ enabled: Bool) -> some View {
    environment(\.hapticsEnabled, enabled)
  }

  func hapticFeedback<Trigger: Equatable>(_ feedback: SensoryFeedback, trigger: Trigger) -> some View {
    modifier(HapticFeedbackModifier(feedback: feedback, trigger: trigger) { _, _ in true })
  }

  func hapticFeedback<Trigger: Equatable>(

swift/Components/Overlay.swift

import PhosphorSwift
import Observation
import SwiftUI

public enum PopupAlignment: Sendable, CaseIterable {
  case start, center, end
}

struct OverlayDismiss: Sendable {
  let action: @MainActor @Sendable () -> Void

  @MainActor func callAsFunction() {
    action()
  }
}

swift/Components/Popover.swift

import SwiftUI
import UIKit

public struct PopoverContent<Content: View>: View {
  let width: CGFloat?
  let content: Content

  public init(width: CGFloat? = 288, @ViewBuilder content: () -> Content) {
    self.width = width
    self.content = content()
  }

  public var body: some View {
    VStack(alignment: .leading, spacing: 16) {
      content
    }

swift/Components/TextVariant.swift

import SwiftUI

public enum TextVariant: CaseIterable, Sendable {
  case `default`, h1, h2, h3, h4, p, blockquote, code, lead, large, small, muted

  var style: TextStyle {
    switch self {
    case .h1: .xl3
    case .h2: .xl2
    case .h3: .xl
    case .h4, .lead, .large: .lg
    case .code, .small, .muted: .sm
    default: .base
    }
  }

swift/Patterns/Adaptive.swift

import SwiftUI

extension EnvironmentValues {
  @Entry var patternCompact: Bool? = nil
}

@propertyWrapper
struct CompactLayout: DynamicProperty {
  @Environment(\.patternCompact) private var forced
  @Environment(\.horizontalSizeClass) private var sizeClass

  init() {}

  var wrappedValue: Bool {
    forced ?? (sizeClass != .regular)
  }

swift/Patterns/Preview.swift

import SwiftUI

extension View {
  public func preview<Content: View>(
    isPresented: Binding<Bool>,
    arrowEdge: Edge = .top,
    @ViewBuilder content: @escaping () -> Content
  ) -> some View {
    modifier(PreviewPresenter(isPresented: isPresented, arrowEdge: arrowEdge, content: content))
  }
}

struct PreviewPresenter<Body: View>: ViewModifier {
  let isPresented: Binding<Bool>
  let arrowEdge: Edge
  @ViewBuilder let content: () -> Body

Add the files to your app target.

Set minSdk to 24 or higher and add the dependencies:

build.gradle.kts

implementation(platform("androidx.compose:compose-bom:2026.09.00"))
implementation("androidx.compose.foundation:foundation")
implementation("androidx.compose.ui:ui")

Copy the theme files every view uses:

kotlin/theme/Theme.kt

package com.esuiss.ui.theme

import android.content.res.AssetManager
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.dropShadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.shadow.Shadow as DropShadow
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font

kotlin/theme/Tokens.kt

package com.esuiss.ui.theme

import androidx.compose.runtime.Immutable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp

@Immutable
data class Colors(
    val background: Color,
    val foreground: Color,
    val card: Color,
    val cardForeground: Color,
    val popover: Color,
    val popoverForeground: Color,
    val primary: Color,

Copy the source and every file it uses:

kotlin/components/Widget.kt

package com.esuiss.ui.components

import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.snap
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size

kotlin/components/Content.kt

package com.esuiss.ui.components

import androidx.compose.runtime.compositionLocalOf
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

val LocalContentStyle = compositionLocalOf { TextStyle.Default }

val LocalContentColor = compositionLocalOf { Color.Unspecified }

val LocalIconSize = compositionLocalOf { 20.dp }

kotlin/components/FormSupport.kt

package com.esuiss.ui.components

import android.provider.Settings
import androidx.compose.animation.core.CubicBezierEasing
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.text.selection.TextSelectionColors
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.Offset

kotlin/components/Haptics.kt

package com.esuiss.ui.components

import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.remember
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.hapticfeedback.HapticFeedback
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.platform.LocalHapticFeedback

val LocalHapticsEnabled = staticCompositionLocalOf { true }

@Composable
fun ProvideHaptics(enabled: Boolean, content: @Composable () -> Unit) {
    CompositionLocalProvider(LocalHapticsEnabled provides enabled, content = content)
}

Update the com.esuiss.ui package names to match your project.

Usage

import { Widget, WidgetHeader, WidgetIcon, WidgetTitle, WidgetAction, WidgetDescription, WidgetValue, WidgetContent, WidgetFooter } from "@/components/ui/widget"

<Widget size="small" align="start">
  <Weather />
</Widget>

Compose the content from WidgetHeader (with WidgetIcon, WidgetTitle and WidgetAction), then WidgetValue, WidgetDescription or WidgetContent, and WidgetFooter, which sticks to the bottom. Plain strings passed to WidgetContent and WidgetFooter are wrapped in Text.

The size is uncontrolled with defaultSize, or controlled with size and onSizeChange. Use sizes to limit which sizes the user can pick. A non-resizable widget defaults to auto; a resizable one defaults to small.

useWidget returns the current size and align so custom content can adapt to the widget size.

Examples

Sizes

The four fixed sizes side by side.

iOS

import { ScrollView } from "react-native"
import { Widget, WidgetFooter, WidgetHeader, type WidgetSize, WidgetTitle } from "@/components/ui/widget"

const gridSpans: Record<WidgetSize, string> = {
  small: "1 × 1",
  medium: "2 × 1",
  large: "2 × 2",
  "extra-large": "4 × 2",
}

export function WidgetSizesExample() {
  return (
    <ScrollView
      horizontal
      contentContainerClassName="items-start gap-4"
      showsHorizontalScrollIndicator={false}

import EsuissUI
import SwiftUI

struct WidgetSizesExample: View {
  var body: some View {
    ScrollView(.horizontal, showsIndicators: false) {
      HStack(alignment: .top, spacing: 16) {
        ForEach(widgetSizeNames, id: \.title) { entry in
          Widget(entry.size) {
            WidgetHeader {
              WidgetTitle(verbatim: entry.title)
            }
            WidgetFooter(verbatim: entry.span)
          }
        }
      }

import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.rememberScrollState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.Widget
import com.esuiss.ui.components.WidgetFooter
import com.esuiss.ui.components.WidgetHeader
import com.esuiss.ui.components.WidgetSize
import com.esuiss.ui.components.WidgetTitle

Editing

A resizable widget starting at large.

iOS

import { CashRegisterIcon } from "phosphor-react-native"
import * as React from "react"
import { View } from "react-native"
import { Icon } from "@/components/ui/icon"
import { Text } from "@/components/ui/text"
import { useWidget, Widget, WidgetContent, WidgetDescription, WidgetFooter, WidgetHeader, WidgetIcon, WidgetTitle, WidgetValue } from "@/components/ui/widget"

const hourly = [12, 18, 14, 30, 44, 34, 22, 40, 100, 46, 30, 14].map(
  (value, hour) => ({ hour: hour + 10, value })
)

const topItems = [
  { name: "Grilled meatballs", count: 38 },
  { name: "Lahmacun", count: 31 },
  { name: "Adana kebab", count: 24 },
]

import EsuissUI
import PhosphorSwift
import SwiftUI

struct WidgetEditingExample: View {
  var body: some View {
    VStack(alignment: .leading, spacing: 0) {
      WidgetEditable(initial: .large) {
        WidgetSales()
      }
      WidgetHint(text: "Drag the corner handle to snap between sizes. Double tap it to reset.")
    }
    .frame(maxWidth: .infinity, alignment: .leading)
  }
}

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow

Inside handle

A resizable widget with the handle drawn inside the corner.

iOS

Widget (inside handle) on iOS in light mode

import { CashRegisterIcon } from "phosphor-react-native"
import * as React from "react"
import { View } from "react-native"
import { Icon } from "@/components/ui/icon"
import { Text } from "@/components/ui/text"
import { useWidget, Widget, WidgetContent, WidgetDescription, WidgetFooter, WidgetHeader, WidgetIcon, WidgetTitle, WidgetValue } from "@/components/ui/widget"

const hourly = [12, 18, 14, 30, 44, 34, 22, 40, 100, 46, 30, 14].map(
  (value, hour) => ({ hour: hour + 10, value })
)

const topItems = [
  { name: "Grilled meatballs", count: 38 },
  { name: "Lahmacun", count: 31 },
  { name: "Adana kebab", count: 24 },
]

import EsuissUI
import PhosphorSwift
import SwiftUI

struct WidgetInsideHandleExample: View {
  var body: some View {
    VStack(alignment: .leading, spacing: 0) {
      WidgetEditable(initial: .medium, handle: .inside) {
        WidgetSales()
      }
      WidgetHint(text: "The handle sits inside the corner.")
    }
    .frame(maxWidth: .infinity, alignment: .leading)
  }
}

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow

Limited sizes

Resizing limited to small and medium.

iOS

Widget (limited sizes) on iOS in light mode

import { CalendarBlankIcon } from "phosphor-react-native"
import * as React from "react"
import { View } from "react-native"
import { Icon } from "@/components/ui/icon"
import { Text } from "@/components/ui/text"
import { useWidget, Widget, WidgetContent, WidgetDescription, WidgetHeader, WidgetIcon, WidgetTitle, WidgetValue } from "@/components/ui/widget"

const reservations = [
  { time: "18:00", place: "Table 4" },
  { time: "19:00", place: "Garden 3" },
  { time: "20:00", place: "Table 12" },
  { time: "21:00", place: "Table 7" },
]

function Hint({ children }: { children: React.ReactNode }) {
  return <Text className="mt-6 text-xs text-muted-foreground">{children}</Text>

import EsuissUI
import PhosphorSwift
import SwiftUI

struct WidgetLimitedSizesExample: View {
  var body: some View {
    VStack(alignment: .leading, spacing: 0) {
      WidgetEditable(initial: .medium, sizes: [.small, .medium]) {
        WidgetReservations()
      }
      WidgetHint(text: "Only small and medium are offered.")
    }
    .frame(maxWidth: .infinity, alignment: .leading)
  }
}

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Fill

Controlled

Controls the size with size and onSizeChange.

iOS

Widget (controlled) on iOS in light mode

import { SunIcon } from "phosphor-react-native"
import * as React from "react"
import { View } from "react-native"
import { Icon } from "@/components/ui/icon"
import { Text } from "@/components/ui/text"
import { Widget, WidgetContent, WidgetDescription, WidgetFooter, WidgetHeader, WidgetIcon, type WidgetSize, WidgetTitle, WidgetValue } from "@/components/ui/widget"

function Hint({ children }: { children: React.ReactNode }) {
  return <Text className="mt-6 text-xs text-muted-foreground">{children}</Text>
}

function Weather() {
  return (
    <>
      <WidgetHeader>
        <WidgetIcon>

import EsuissUI
import PhosphorSwift
import SwiftUI

func widgetSizeValue(_ size: WidgetSize) -> String {
  switch size {
  case .small: "small"
  case .medium: "medium"
  case .large: "large"
  case .extraLarge: "extra-large"
  }
}

struct WidgetHint: View {
  let text: String

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Fill
import com.adamglin.phosphoricons.fill.Sun
import com.esuiss.ui.components.Icon
import com.esuiss.ui.components.Text

Centered

Centered content with align="center".

iOS

import { CashRegisterIcon } from "phosphor-react-native"
import { Icon } from "@/components/ui/icon"
import { Widget, WidgetDescription, WidgetHeader, WidgetIcon, WidgetTitle } from "@/components/ui/widget"

export function WidgetCenteredExample() {
  return (
    <Widget size="small" align="center">
      <WidgetHeader>
        <WidgetIcon size="lg">
          <Icon as={CashRegisterIcon} />
        </WidgetIcon>
        <WidgetTitle>Point of sale</WidgetTitle>
      </WidgetHeader>
      <WidgetDescription>3 open orders</WidgetDescription>
    </Widget>
  )

import EsuissUI
import PhosphorSwift
import SwiftUI

struct WidgetCenteredExample: View {
  var body: some View {
    Widget(.small, align: .center) {
      WidgetHeader {
        WidgetIcon(size: .lg) {
          Ph.cashRegister.regular
        }
        WidgetTitle("Point of sale")
      }
      WidgetDescription("3 open orders")
    }
  }

import androidx.compose.runtime.Composable
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Regular
import com.esuiss.ui.components.Icon
import com.esuiss.ui.components.Widget
import com.esuiss.ui.components.WidgetAlign
import com.esuiss.ui.components.WidgetDescription
import com.esuiss.ui.components.WidgetHeader
import com.esuiss.ui.components.WidgetIcon
import com.esuiss.ui.components.WidgetIconSize
import com.esuiss.ui.components.WidgetSize
import com.esuiss.ui.components.WidgetTitle

@Composable
fun WidgetCentered() {
    Widget(size = WidgetSize.Small, align = WidgetAlign.Center) {

Auto

An auto widget that fills its parent.

iOS

import { SunIcon } from "phosphor-react-native"
import { View } from "react-native"
import { Icon } from "@/components/ui/icon"
import { Widget, WidgetContent, WidgetDescription, WidgetFooter, WidgetHeader, WidgetIcon, WidgetTitle, WidgetValue } from "@/components/ui/widget"

function Weather() {
  return (
    <>
      <WidgetHeader>
        <WidgetIcon>
          <Icon as={SunIcon} weight="fill" />
        </WidgetIcon>
        <WidgetTitle>Istanbul</WidgetTitle>
      </WidgetHeader>
      <WidgetContent>
        <WidgetValue>24°</WidgetValue>

import EsuissUI
import PhosphorSwift
import SwiftUI

struct WidgetAutoExample: View {
  var body: some View {
    Widget(nil) {
      WidgetWeather()
    }
    .frame(maxWidth: .infinity)
    .frame(height: 192)
  }
}

struct WidgetWeather: View {
  var body: some View {

import androidx.compose.foundation.layout.height
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Fill
import com.adamglin.phosphoricons.fill.Sun
import com.esuiss.ui.components.Icon
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.Widget
import com.esuiss.ui.components.WidgetContent
import com.esuiss.ui.components.WidgetDescription
import com.esuiss.ui.components.WidgetFooter
import com.esuiss.ui.components.WidgetHeader
import com.esuiss.ui.components.WidgetIcon

Dashboard

Several auto-sized widgets arranged in a grid.

iOS

import { CashRegisterIcon, CookingPotIcon, SunIcon } from "phosphor-react-native"
import { ScrollView, View } from "react-native"
import { Icon } from "@/components/ui/icon"
import { Widget, WidgetDescription, WidgetFooter, WidgetHeader, WidgetIcon, WidgetTitle, WidgetValue } from "@/components/ui/widget"

export function WidgetDashboardExample() {
  return (
    <ScrollView contentContainerClassName="gap-4">
      <View className="h-42 flex-row gap-4">
        <View className="flex-1">
          <Widget>
            <WidgetHeader>
              <WidgetIcon>
                <Icon as={SunIcon} weight="fill" />
              </WidgetIcon>
              <WidgetTitle>Istanbul</WidgetTitle>

import EsuissUI
import PhosphorSwift
import SwiftUI

struct WidgetDashboardExample: View {
  var body: some View {
    VStack(spacing: 16) {
      HStack(spacing: 16) {
        Widget(nil) {
          WidgetHeader {
            WidgetIcon {
              Ph.sun.fill
            }
            WidgetTitle("Istanbul")
          }
          WidgetValue(verbatim: "24°")

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Fill
import com.adamglin.phosphoricons.Regular
import com.adamglin.phosphoricons.fill.CashRegister

API Reference

The card surface and optional resize handle.

Prop	Type	Default	Description
`className`	`string`	-
`size`	`WidgetSize \| "auto"`	-	Controlled size: `small`, `medium`, `large`, `extra-large` or `auto`.
`defaultSize`	`WidgetSize \| "auto"`	-	Initial size when uncontrolled.
`onSizeChange`	`(size: WidgetSize \| "auto") => void`	-	Called with the new size after a resize.
`sizes`	`WidgetSize[]`	`ALL_SIZES`	Sizes the user can resize to. Defaults to all four.
`resizable`	`boolean`	`false`	Shows a drag handle for resizing.
`handle`	`WidgetHandlePlacement`	`"outside"`	Handle placement: `outside` the corner or `inside` it. Defaults to `outside`.
`align`	`WidgetAlign`	`"start"`	`start` or `center` content alignment.
`resizeLabel`	`string`	`"Resize widget"`	Accessibility label for the handle. Defaults to "Resize widget".

Also accepts the props of ViewProps, React.RefAttributes<View>.

WidgetHeader

Row for the icon, title and action.

Prop	Type	Default	Description
`className`	`string`	-

Also accepts the props of ViewProps, React.RefAttributes<View>.

WidgetIcon

Icon frame in default, sm or lg size.

Prop	Type	Default	Description
`className`	`string`	-
`iconClassName`	`string`	-	Classes applied to the icon inside.
`size`	`"default" \| "sm" \| "lg"`	`"default"`	`default`, `sm` or `lg`.

Also accepts the props of ViewProps, React.RefAttributes<View>.

WidgetTitle

Single-line heading.

Also accepts the props of React.ComponentProps<typeof Text>, React.RefAttributes<typeof Text>.

WidgetAction

Trailing slot in the header; hidden when centered.

Prop	Type	Default	Description
`className`	`string`	-

Also accepts the props of ViewProps, React.RefAttributes<View>.

WidgetDescription

Secondary text.

Also accepts the props of React.ComponentProps<typeof Text>, React.RefAttributes<typeof Text>.

WidgetValue

Large number with tabular figures.

Also accepts the props of React.ComponentProps<typeof Text>, React.RefAttributes<typeof Text>.

WidgetContent

Flexible body area that clips overflow.

Prop	Type	Default	Description
`className`	`string`	-

Also accepts the props of ViewProps, React.RefAttributes<View>.

WidgetFooter

Small secondary text and icons pinned to the bottom.

Prop	Type	Default	Description
`className`	`string`	-

Also accepts the props of ViewProps, React.RefAttributes<View>.

Accessibility

The resize handle has the adjustable role, its resizeLabel and the current size as its value; increment and decrement actions step through the available sizes, so VoiceOver and TalkBack users can resize without dragging.
WidgetTitle has the heading role.
WidgetIcon and the resize preview outline are hidden from assistive technology.
Size animations respect the system reduce motion setting.

Notes

Uses bg-muted for the surface, bg-secondary for icon frames, and text-muted-foreground/50 for the handle, which turns text-primary while dragging.
The handle and drag direction mirror in right-to-left layouts.
Light and dark colors follow the system appearance.

import { SunIcon } from "@phosphor-icons/react"
import {
  Widget,
  WidgetContent,
  WidgetDescription,
  WidgetFooter,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetValue,
} from "@/components/ui/widget"

export default function WidgetDemo() {
  return (
    <Widget size="small" align="start">
      <WidgetHeader>

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/widget

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add widget

Manual

Add the cn helper.
Copy the source into components/ui/widget.tsx:

components/ui/widget.tsx

"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

type WidgetSize = "small" | "medium" | "large" | "extra-large"

const WIDGET_DIMENSIONS: Record<WidgetSize, [number, number]> = {
  small: [168, 168],
  medium: [352, 168],
  large: [352, 352],
  "extra-large": [720, 352],
}

function nearestSize(width: number, height: number, sizes: WidgetSize[]) {
  let best: WidgetSize | null = null

Update the import paths to match your project.

Usage

import { Widget, WidgetHeader, WidgetIcon, WidgetTitle, WidgetAction, WidgetDescription, WidgetValue, WidgetContent, WidgetFooter } from "@/components/ui/widget"

<Widget size="small" align="start">
  <WidgetHeader>
    <WidgetIcon>
      <SunIcon weight="fill" />
    </WidgetIcon>
    <WidgetTitle>Istanbul</WidgetTitle>
  </WidgetHeader>
  <WidgetContent>
    <WidgetValue>24°</WidgetValue>
    <WidgetDescription>Partly cloudy</WidgetDescription>
  </WidgetContent>
  <WidgetFooter>H 27° · L 18°</WidgetFooter>
</Widget>

Set resizable="free" to follow the pointer without snapping; the widget stays between the smallest size and the largest allowed size. Double-click the handle to return to the starting size.

Adapt the content to the current size with the group/widget group and data-size, for example group-data-[size=small]/widget:hidden.

Examples

Sales

Shows a resizable widget whose chart and list adapt to each size.

import { CashRegisterIcon } from "@phosphor-icons/react"
import type * as React from "react"
import {
  Widget,
  WidgetDescription,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetValue,
} from "@/components/ui/widget"

const hourly = [12, 18, 14, 30, 44, 34, 22, 40, 100, 46, 30, 14]

const topItems = [
  { name: "Grilled meatballs", count: 38 },
  { name: "Lahmacun", count: 31 },

Kitchen

Places the resize handle inside the widget's corner.

import { CookingPotIcon } from "@phosphor-icons/react"
import type * as React from "react"
import {
  Widget,
  WidgetDescription,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetValue,
} from "@/components/ui/widget"

const tickets = [
  { id: "#1042", place: "Table 4", minutes: 18 },
  { id: "#1043", place: "Takeaway", minutes: 15 },
  { id: "#1044", place: "Table 12", minutes: 9 },
  { id: "#1045", place: "Pickup", minutes: 7 },

Reservations

Limits resizing to the small and medium sizes.

import { CalendarBlankIcon } from "@phosphor-icons/react"
import type * as React from "react"
import {
  Widget,
  WidgetAction,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetValue,
} from "@/components/ui/widget"

function Hint({ children }: { children: React.ReactNode }) {
  return <p className="mt-6 text-xs text-muted-foreground">{children}</p>
}

export default function WidgetReservations() {

Weekly report

Starts at extra-large and reveals extra content only at that size.

import { ChartBarIcon, TriangleIcon } from "@phosphor-icons/react"
import type * as React from "react"
import {
  Widget,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetValue,
} from "@/components/ui/widget"

const week = [
  { day: "Mon", value: 52 },
  { day: "Tue", value: 44 },
  { day: "Wed", value: 60 },
  { day: "Thu", value: 56 },
  { day: "Fri", value: 82 },

Free resize

Resizes freely with the pointer instead of snapping to sizes.

import {
  BowlFoodIcon,
  CoffeeIcon,
  HamburgerIcon,
  IceCreamIcon,
  OrangeSliceIcon,
  PizzaIcon,
} from "@phosphor-icons/react"
import * as React from "react"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Widget, WidgetTitle } from "@/components/ui/widget"

const menu = [
  {
    name: "Meatballs",
    price: "₺280",

Auto resize

Fills its parent with auto, and snaps to fixed sizes when dragged.

import { CashRegisterIcon } from "@phosphor-icons/react"
import {
  Widget,
  WidgetDescription,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
} from "@/components/ui/widget"

export default function WidgetAutoResize() {
  return (
    <div className="h-60 w-full max-w-180">
      <Widget resizable defaultSize="auto">
        <WidgetHeader>
          <WidgetIcon>
            <CashRegisterIcon />

Centered

Centers the icon, title and description with align="center".

import { CashRegisterIcon } from "@phosphor-icons/react"
import {
  Widget,
  WidgetDescription,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
} from "@/components/ui/widget"

export default function WidgetCentered() {
  return (
    <Widget size="small" align="center">
      <WidgetHeader>
        <WidgetIcon size="lg">
          <CashRegisterIcon />
        </WidgetIcon>

Sizes

Shows each fixed size side by side.

import {
  Widget,
  WidgetFooter,
  WidgetHeader,
  WidgetTitle,
} from "@/components/ui/widget"

const gridSpans = {
  small: "1 × 1",
  medium: "2 × 1",
  large: "2 × 2",
  "extra-large": "4 × 2",
}

export default function WidgetSizes() {
  return (

Dashboard

Arranges fixed widgets in a grid as a dashboard.

import {
  CalendarBlankIcon,
  CashRegisterIcon,
  CookingPotIcon,
  SunIcon,
} from "@phosphor-icons/react"
import {
  Widget,
  WidgetContent,
  WidgetDescription,
  WidgetFooter,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetValue,
} from "@/components/ui/widget"

API Reference

Anatomy11 parts

</WidgetHeader>

</WidgetContent>

</Widget>

The rounded card that sets the size, alignment and resize behavior.

Prop	Type	Default	Description
`size`	`WidgetSize \| "auto"`	-	Controls the current size, or `auto` to fill the parent.
`defaultSize`	`WidgetSize \| "auto"`	-	Sets the starting size when uncontrolled; double-clicking the handle also returns to it.
`onSizeChange`	`(size: WidgetSize \| "auto") => void`	-	Called with the new size when a drag snaps to a different size or the size is reset.
`sizes`	`WidgetSize[]`	`["small", "medium", "large", "extra-large"]`	Lists the sizes a drag can snap to; the largest also caps free resizing.
`resizable`	`boolean \| "free"`	`false`	Adds a resize handle; `true` snaps to `sizes`, and `free` follows the pointer.
`handle`	`"inside" \| "outside"`	`"outside"`	Places the resize handle `inside` or `outside` the bottom corner.
`align`	`"start" \| "center"`	`"start"`	Centers the content horizontally and vertically when set to `center`.

Also accepts the props of React.ComponentProps<"div">.

WidgetHeader

A row that holds the icon, title and action.

Also accepts the props of React.ComponentProps<"div">.

WidgetIcon

A decorative icon, shown on a tile in the default and lg sizes.

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg"`	`"default"`	Sets the icon size: `sm` without a tile, or `default` and `lg` on a rounded tile.

Also accepts the props of React.ComponentProps<"span">.

WidgetTitle

The widget's title, truncated to one line.

Also accepts the props of React.ComponentProps<"p">.

WidgetAction

A slot at the end of the header for a control; hidden when centered.

Also accepts the props of React.ComponentProps<"div">.

WidgetDescription

Secondary text that explains the content.

Also accepts the props of React.ComponentProps<"p">.

WidgetValue

A large figure in tabular numbers, such as a total or temperature.

Also accepts the props of React.ComponentProps<"p">.

WidgetContent

A flexible column that fills the remaining space.

Also accepts the props of React.ComponentProps<"div">.

WidgetFooter

Small secondary text pinned to the bottom of the widget.

Also accepts the props of React.ComponentProps<"div">.

Accessibility

WidgetIcon is hidden from assistive technologies, so make sure the title conveys its meaning.
The resize handle is hidden from assistive technologies and works with a pointer only. Offer another way to change the size, such as a control that sets size, if it matters.

Notes

Widget sets data-size and data-align, and data-resizing while dragging. It's also a @container/widget container for container queries.
Parts carry data-slot attributes such as widget, widget-container, widget-handle, widget-preview and widget-header.
The handle is visible on hover and always visible on touch screens. It mirrors in right-to-left layouts.
Size changes animate over 500ms, and the animation is removed when reduced motion is preferred.

iOS

import { SunIcon } from "phosphor-react-native"
import { Icon } from "@/components/ui/icon"
import { Widget, WidgetContent, WidgetDescription, WidgetFooter, WidgetHeader, WidgetIcon, WidgetTitle, WidgetValue } from "@/components/ui/widget"

function Weather() {
  return (
    <>
      <WidgetHeader>
        <WidgetIcon>
          <Icon as={SunIcon} weight="fill" />
        </WidgetIcon>
        <WidgetTitle>Istanbul</WidgetTitle>
      </WidgetHeader>
      <WidgetContent>
        <WidgetValue>24°</WidgetValue>
        <WidgetDescription>Partly cloudy</WidgetDescription>

import EsuissUI
import PhosphorSwift
import SwiftUI

struct WidgetExample: View {
  var body: some View {
    Widget(.small) {
      WidgetWeather()
    }
  }
}

struct WidgetWeather: View {
  var body: some View {
    WidgetHeader {
      WidgetIcon {

import androidx.compose.runtime.Composable
import androidx.compose.ui.text.style.TextOverflow
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Fill
import com.adamglin.phosphoricons.fill.Sun
import com.esuiss.ui.components.Icon
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.Widget
import com.esuiss.ui.components.WidgetContent
import com.esuiss.ui.components.WidgetDescription
import com.esuiss.ui.components.WidgetFooter
import com.esuiss.ui.components.WidgetHeader
import com.esuiss.ui.components.WidgetIcon
import com.esuiss.ui.components.WidgetSize
import com.esuiss.ui.components.WidgetTitle
import com.esuiss.ui.components.WidgetValue

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/widget

See Installation for the components.json setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add widget

$ pnpm dlx @esuiss/ui@latest add widget --platform swift

$ pnpm dlx @esuiss/ui@latest add widget --platform kotlin

The CLI also adds what it builds on: Icon, Text. On React Native it also adds the animated view components/ui/animated-view.tsx.

Manual

Install the dependencies:

npx expo install cn phosphor-react-native react-native-gesture-handler react-native-reanimated react-native-svg react-native-worklets

Add the pieces it builds on: Icon, Text, and the primitives components/primitives/haptics.tsx, and the animated view components/ui/animated-view.tsx from the next step.
Copy the animated view into components/ui/animated-view.tsx:

uniwind/components/ui/animated-view.tsx

import { Pressable } from "react-native"
import Animated from "react-native-reanimated"

const AnimatedPressable = Animated.createAnimatedComponent(Pressable)

type AnimatedViewProps =
  | (React.ComponentProps<typeof Animated.View> &
      React.RefAttributes<React.ComponentRef<typeof Animated.View>> & {
        as?: "View"
      })
  | (React.ComponentProps<typeof AnimatedPressable> &
      React.RefAttributes<React.ComponentRef<typeof AnimatedPressable>> & {
        as: "Pressable"
      })

function AnimatedView(props: AnimatedViewProps) {

Copy the source into components/ui/widget.tsx:

uniwind/components/ui/widget.tsx

import { cn } from "cn"
import type { IconProps as PhosphorIconProps } from "phosphor-react-native"
import * as React from "react"
import {
  type AccessibilityActionEvent,
  I18nManager,
  View,
  type ViewProps,
} from "react-native"
import { Gesture, GestureDetector } from "react-native-gesture-handler"
import {
  Easing,
  ReduceMotion,
  runOnJS,
  useAnimatedStyle,
  useSharedValue,

Update the import paths to match your project.

Install the dependencies:

npx expo install cn phosphor-react-native react-native-gesture-handler react-native-reanimated react-native-svg react-native-worklets

Add the pieces it builds on: Icon, Text, and the primitives components/primitives/haptics.tsx, and the animated view components/ui/animated-view.tsx from the next step.
Copy the animated view into components/ui/animated-view.tsx:

nativewind/components/ui/animated-view.tsx

import { Pressable } from "react-native"
import Animated from "react-native-reanimated"

const AnimatedPressable = Animated.createAnimatedComponent(Pressable)

type AnimatedViewProps =
  | (React.ComponentProps<typeof Animated.View> &
      React.RefAttributes<React.ComponentRef<typeof Animated.View>> & {
        as?: "View"
      })
  | (React.ComponentProps<typeof AnimatedPressable> &
      React.RefAttributes<React.ComponentRef<typeof AnimatedPressable>> & {
        as: "Pressable"
      })

function AnimatedView(props: AnimatedViewProps) {

Copy the source into components/ui/widget.tsx:

nativewind/components/ui/widget.tsx

import { cn } from "cn"
import type { IconProps as PhosphorIconProps } from "phosphor-react-native"
import * as React from "react"
import {
  type AccessibilityActionEvent,
  I18nManager,
  View,
  type ViewProps,
} from "react-native"
import { Gesture, GestureDetector } from "react-native-gesture-handler"
import {
  Easing,
  ReduceMotion,
  runOnJS,
  useAnimatedStyle,
  useSharedValue,

Update the import paths to match your project.

Install the dependencies:

npx expo install phosphor-react-native react-native-gesture-handler react-native-reanimated react-native-svg react-native-worklets

Add the pieces it builds on: Icon, Text, and the primitives components/primitives/haptics.tsx, and the animated view components/ui/animated-view.tsx from the next step.
Copy the animated view into components/ui/animated-view.tsx:

stylesheet/components/ui/animated-view.tsx

import { Pressable } from "react-native"
import Animated from "react-native-reanimated"

const AnimatedPressable = Animated.createAnimatedComponent(Pressable)

type AnimatedViewProps =
  | (React.ComponentProps<typeof Animated.View> &
      React.RefAttributes<React.ComponentRef<typeof Animated.View>> & {
        as?: "View"
      })
  | (React.ComponentProps<typeof AnimatedPressable> &
      React.RefAttributes<React.ComponentRef<typeof AnimatedPressable>> & {
        as: "Pressable"
      })

function AnimatedView(props: AnimatedViewProps) {

Copy the source into components/ui/widget.tsx:

stylesheet/components/ui/widget.tsx

import type { IconProps as PhosphorIconProps } from "phosphor-react-native"
import * as React from "react"
import {
  type AccessibilityActionEvent,
  I18nManager,
  type StyleProp,
  StyleSheet,
  type TextStyle,
  View,
  type ViewProps,
  type ViewStyle,
} from "react-native"
import { Gesture, GestureDetector } from "react-native-gesture-handler"
import {
  Easing,
  ReduceMotion,

Update the import paths to match your project.

Target iOS 17 or later.
Add the Swift package to your app:

Package.swift

.package(url: "https://github.com/phosphor-icons/swift", from: "2.1.0")

Copy the theme files every view uses:

swift/Theme/Theme.swift

import CoreText
import SwiftUI
import UIKit

struct RGBA: Sendable {
  let red: CGFloat
  let green: CGFloat
  let blue: CGFloat
  let alpha: CGFloat

  init(_ hex: UInt32, _ alpha: CGFloat = 1) {
    red = CGFloat((hex >> 16) & 0xFF) / 255
    green = CGFloat((hex >> 8) & 0xFF) / 255
    blue = CGFloat(hex & 0xFF) / 255
    self.alpha = alpha
  }

swift/Theme/Tokens.swift

import SwiftUI

public enum EsuissColor {
  public static let background = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000))
  public static let foreground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let card = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let cardForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let popover = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let popoverForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let primary = Color.adaptive(light: .init(0x0071E3), dark: .init(0x2997FF))
  public static let primaryForeground = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0xFFFFFF))
  public static let secondary = Color.adaptive(light: .init(0x000000, 0.04), dark: .init(0xFFFFFF, 0.1))
  public static let secondaryForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let muted = Color.adaptive(light: .init(0xF5F5F7), dark: .init(0x161617))
  public static let mutedForeground = Color.adaptive(light: .init(0x6E6E73), dark: .init(0xA1A1A6))
  public static let accent = Color.adaptive(light: .init(0x000000, 0.06), dark: .init(0xFFFFFF, 0.1))

Copy the source and every file it uses:

swift/Components/Widget.swift

import PhosphorSwift
import SwiftUI

public enum WidgetSize: CaseIterable, Sendable {
  case small, medium, large, extraLarge

  public var dimensions: CGSize {
    switch self {
    case .small: CGSize(width: 168, height: 168)
    case .medium: CGSize(width: 352, height: 168)
    case .large: CGSize(width: 352, height: 352)
    case .extraLarge: CGSize(width: 720, height: 352)
    }
  }
}

swift/Components/Button.swift

import SwiftUI

public struct VariantButtonStyle: ButtonStyle {
  public enum Variant: CaseIterable, Sendable {
    case `default`, outline, secondary, tinted, ghost, plain, destructive, link
  }

  public enum Size: CaseIterable, Sendable {
    case `default`, xs, sm, lg, xl, icon, iconXs, iconSm, iconLg, iconXl

    var height: CGFloat {
      switch self {
      case .xs, .iconXs: Metrics.Height.buttonXs
      case .sm, .iconSm: Metrics.Height.buttonSm
      case .default, .icon: Metrics.Height.button
      case .lg, .iconLg: Metrics.Height.buttonLg

swift/Components/ButtonGroup.swift

import SwiftUI

extension EnvironmentValues {
  @Entry var buttonGroup: Axis? = nil
  @Entry var buttonGroupSize: CGSize = .zero
}

enum ButtonGroupSpace: Hashable {
  case group
}

struct ButtonGroupFrame {
  let bounds: Anchor<CGRect>
  let outlined: Bool
}

swift/Components/Dialog.swift

import SwiftUI

extension View {
  public func dialog<Content: View>(
    isPresented: Binding<Bool>,
    @ViewBuilder content: @escaping () -> Content
  ) -> some View {
    modifier(
      CoverPresenter(isPresented: isPresented) { visible in
        CenteredStage(visible: visible, dismissible: true, content: content)
      }
    )
  }
}

struct CenteredStage<Content: View>: View {

swift/Components/Drawer.swift

import SwiftUI

extension View {
  public func drawer<Content: View>(
    isPresented: Binding<Bool>,
    detents: Set<PresentationDetent>? = nil,
    selection: Binding<PresentationDetent>? = nil,
    onDismiss: (() -> Void)? = nil,
    @ViewBuilder content: @escaping () -> Content
  ) -> some View {
    let binding = isPresented
    return sheet(isPresented: isPresented, onDismiss: onDismiss) {
      DrawerHost(detents: detents, selection: selection, content: content)
        .environment(\.overlayDismiss, OverlayDismiss { binding.wrappedValue = false })
    }
  }

swift/Components/Haptics.swift

import SwiftUI

extension EnvironmentValues {
  @Entry public var hapticsEnabled = true
}

extension View {
  public func haptics(_ enabled: Bool) -> some View {
    environment(\.hapticsEnabled, enabled)
  }

  func hapticFeedback<Trigger: Equatable>(_ feedback: SensoryFeedback, trigger: Trigger) -> some View {
    modifier(HapticFeedbackModifier(feedback: feedback, trigger: trigger) { _, _ in true })
  }

  func hapticFeedback<Trigger: Equatable>(

swift/Components/Overlay.swift

import PhosphorSwift
import Observation
import SwiftUI

public enum PopupAlignment: Sendable, CaseIterable {
  case start, center, end
}

struct OverlayDismiss: Sendable {
  let action: @MainActor @Sendable () -> Void

  @MainActor func callAsFunction() {
    action()
  }
}

swift/Components/Popover.swift

import SwiftUI
import UIKit

public struct PopoverContent<Content: View>: View {
  let width: CGFloat?
  let content: Content

  public init(width: CGFloat? = 288, @ViewBuilder content: () -> Content) {
    self.width = width
    self.content = content()
  }

  public var body: some View {
    VStack(alignment: .leading, spacing: 16) {
      content
    }

swift/Components/TextVariant.swift

import SwiftUI

public enum TextVariant: CaseIterable, Sendable {
  case `default`, h1, h2, h3, h4, p, blockquote, code, lead, large, small, muted

  var style: TextStyle {
    switch self {
    case .h1: .xl3
    case .h2: .xl2
    case .h3: .xl
    case .h4, .lead, .large: .lg
    case .code, .small, .muted: .sm
    default: .base
    }
  }

swift/Patterns/Adaptive.swift

import SwiftUI

extension EnvironmentValues {
  @Entry var patternCompact: Bool? = nil
}

@propertyWrapper
struct CompactLayout: DynamicProperty {
  @Environment(\.patternCompact) private var forced
  @Environment(\.horizontalSizeClass) private var sizeClass

  init() {}

  var wrappedValue: Bool {
    forced ?? (sizeClass != .regular)
  }

swift/Patterns/Preview.swift

import SwiftUI

extension View {
  public func preview<Content: View>(
    isPresented: Binding<Bool>,
    arrowEdge: Edge = .top,
    @ViewBuilder content: @escaping () -> Content
  ) -> some View {
    modifier(PreviewPresenter(isPresented: isPresented, arrowEdge: arrowEdge, content: content))
  }
}

struct PreviewPresenter<Body: View>: ViewModifier {
  let isPresented: Binding<Bool>
  let arrowEdge: Edge
  @ViewBuilder let content: () -> Body

Add the files to your app target.

Set minSdk to 24 or higher and add the dependencies:

build.gradle.kts

implementation(platform("androidx.compose:compose-bom:2026.09.00"))
implementation("androidx.compose.foundation:foundation")
implementation("androidx.compose.ui:ui")

Copy the theme files every view uses:

kotlin/theme/Theme.kt

package com.esuiss.ui.theme

import android.content.res.AssetManager
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.dropShadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.shadow.Shadow as DropShadow
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font

kotlin/theme/Tokens.kt

package com.esuiss.ui.theme

import androidx.compose.runtime.Immutable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp

@Immutable
data class Colors(
    val background: Color,
    val foreground: Color,
    val card: Color,
    val cardForeground: Color,
    val popover: Color,
    val popoverForeground: Color,
    val primary: Color,

Copy the source and every file it uses:

kotlin/components/Widget.kt

package com.esuiss.ui.components

import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.snap
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size

kotlin/components/Content.kt

package com.esuiss.ui.components

import androidx.compose.runtime.compositionLocalOf
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

val LocalContentStyle = compositionLocalOf { TextStyle.Default }

val LocalContentColor = compositionLocalOf { Color.Unspecified }

val LocalIconSize = compositionLocalOf { 20.dp }

kotlin/components/FormSupport.kt

package com.esuiss.ui.components

import android.provider.Settings
import androidx.compose.animation.core.CubicBezierEasing
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.text.selection.TextSelectionColors
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.Offset

kotlin/components/Haptics.kt

package com.esuiss.ui.components

import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.remember
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.hapticfeedback.HapticFeedback
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.platform.LocalHapticFeedback

val LocalHapticsEnabled = staticCompositionLocalOf { true }

@Composable
fun ProvideHaptics(enabled: Boolean, content: @Composable () -> Unit) {
    CompositionLocalProvider(LocalHapticsEnabled provides enabled, content = content)
}

Update the com.esuiss.ui package names to match your project.

Usage

import { Widget, WidgetHeader, WidgetIcon, WidgetTitle, WidgetAction, WidgetDescription, WidgetValue, WidgetContent, WidgetFooter } from "@/components/ui/widget"

<Widget size="small" align="start">
  <Weather />
</Widget>

useWidget returns the current size and align so custom content can adapt to the widget size.

Examples

Sizes

The four fixed sizes side by side.

iOS

import { ScrollView } from "react-native"
import { Widget, WidgetFooter, WidgetHeader, type WidgetSize, WidgetTitle } from "@/components/ui/widget"

const gridSpans: Record<WidgetSize, string> = {
  small: "1 × 1",
  medium: "2 × 1",
  large: "2 × 2",
  "extra-large": "4 × 2",
}

export function WidgetSizesExample() {
  return (
    <ScrollView
      horizontal
      contentContainerClassName="items-start gap-4"
      showsHorizontalScrollIndicator={false}

import EsuissUI
import SwiftUI

struct WidgetSizesExample: View {
  var body: some View {
    ScrollView(.horizontal, showsIndicators: false) {
      HStack(alignment: .top, spacing: 16) {
        ForEach(widgetSizeNames, id: \.title) { entry in
          Widget(entry.size) {
            WidgetHeader {
              WidgetTitle(verbatim: entry.title)
            }
            WidgetFooter(verbatim: entry.span)
          }
        }
      }

import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.rememberScrollState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.Widget
import com.esuiss.ui.components.WidgetFooter
import com.esuiss.ui.components.WidgetHeader
import com.esuiss.ui.components.WidgetSize
import com.esuiss.ui.components.WidgetTitle

Editing

A resizable widget starting at large.

iOS

import { CashRegisterIcon } from "phosphor-react-native"
import * as React from "react"
import { View } from "react-native"
import { Icon } from "@/components/ui/icon"
import { Text } from "@/components/ui/text"
import { useWidget, Widget, WidgetContent, WidgetDescription, WidgetFooter, WidgetHeader, WidgetIcon, WidgetTitle, WidgetValue } from "@/components/ui/widget"

const hourly = [12, 18, 14, 30, 44, 34, 22, 40, 100, 46, 30, 14].map(
  (value, hour) => ({ hour: hour + 10, value })
)

const topItems = [
  { name: "Grilled meatballs", count: 38 },
  { name: "Lahmacun", count: 31 },
  { name: "Adana kebab", count: 24 },
]

import EsuissUI
import PhosphorSwift
import SwiftUI

struct WidgetEditingExample: View {
  var body: some View {
    VStack(alignment: .leading, spacing: 0) {
      WidgetEditable(initial: .large) {
        WidgetSales()
      }
      WidgetHint(text: "Drag the corner handle to snap between sizes. Double tap it to reset.")
    }
    .frame(maxWidth: .infinity, alignment: .leading)
  }
}

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow

Inside handle

A resizable widget with the handle drawn inside the corner.

iOS

import { CashRegisterIcon } from "phosphor-react-native"
import * as React from "react"
import { View } from "react-native"
import { Icon } from "@/components/ui/icon"
import { Text } from "@/components/ui/text"
import { useWidget, Widget, WidgetContent, WidgetDescription, WidgetFooter, WidgetHeader, WidgetIcon, WidgetTitle, WidgetValue } from "@/components/ui/widget"

const hourly = [12, 18, 14, 30, 44, 34, 22, 40, 100, 46, 30, 14].map(
  (value, hour) => ({ hour: hour + 10, value })
)

const topItems = [
  { name: "Grilled meatballs", count: 38 },
  { name: "Lahmacun", count: 31 },
  { name: "Adana kebab", count: 24 },
]

import EsuissUI
import PhosphorSwift
import SwiftUI

struct WidgetInsideHandleExample: View {
  var body: some View {
    VStack(alignment: .leading, spacing: 0) {
      WidgetEditable(initial: .medium, handle: .inside) {
        WidgetSales()
      }
      WidgetHint(text: "The handle sits inside the corner.")
    }
    .frame(maxWidth: .infinity, alignment: .leading)
  }
}

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow

Limited sizes

Resizing limited to small and medium.

iOS

import { CalendarBlankIcon } from "phosphor-react-native"
import * as React from "react"
import { View } from "react-native"
import { Icon } from "@/components/ui/icon"
import { Text } from "@/components/ui/text"
import { useWidget, Widget, WidgetContent, WidgetDescription, WidgetHeader, WidgetIcon, WidgetTitle, WidgetValue } from "@/components/ui/widget"

const reservations = [
  { time: "18:00", place: "Table 4" },
  { time: "19:00", place: "Garden 3" },
  { time: "20:00", place: "Table 12" },
  { time: "21:00", place: "Table 7" },
]

function Hint({ children }: { children: React.ReactNode }) {
  return <Text className="mt-6 text-xs text-muted-foreground">{children}</Text>

import EsuissUI
import PhosphorSwift
import SwiftUI

struct WidgetLimitedSizesExample: View {
  var body: some View {
    VStack(alignment: .leading, spacing: 0) {
      WidgetEditable(initial: .medium, sizes: [.small, .medium]) {
        WidgetReservations()
      }
      WidgetHint(text: "Only small and medium are offered.")
    }
    .frame(maxWidth: .infinity, alignment: .leading)
  }
}

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Fill

Controlled

Controls the size with size and onSizeChange.

iOS

import { SunIcon } from "phosphor-react-native"
import * as React from "react"
import { View } from "react-native"
import { Icon } from "@/components/ui/icon"
import { Text } from "@/components/ui/text"
import { Widget, WidgetContent, WidgetDescription, WidgetFooter, WidgetHeader, WidgetIcon, type WidgetSize, WidgetTitle, WidgetValue } from "@/components/ui/widget"

function Hint({ children }: { children: React.ReactNode }) {
  return <Text className="mt-6 text-xs text-muted-foreground">{children}</Text>
}

function Weather() {
  return (
    <>
      <WidgetHeader>
        <WidgetIcon>

import EsuissUI
import PhosphorSwift
import SwiftUI

func widgetSizeValue(_ size: WidgetSize) -> String {
  switch size {
  case .small: "small"
  case .medium: "medium"
  case .large: "large"
  case .extraLarge: "extra-large"
  }
}

struct WidgetHint: View {
  let text: String

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Fill
import com.adamglin.phosphoricons.fill.Sun
import com.esuiss.ui.components.Icon
import com.esuiss.ui.components.Text

Centered

Centered content with align="center".

iOS

import { CashRegisterIcon } from "phosphor-react-native"
import { Icon } from "@/components/ui/icon"
import { Widget, WidgetDescription, WidgetHeader, WidgetIcon, WidgetTitle } from "@/components/ui/widget"

export function WidgetCenteredExample() {
  return (
    <Widget size="small" align="center">
      <WidgetHeader>
        <WidgetIcon size="lg">
          <Icon as={CashRegisterIcon} />
        </WidgetIcon>
        <WidgetTitle>Point of sale</WidgetTitle>
      </WidgetHeader>
      <WidgetDescription>3 open orders</WidgetDescription>
    </Widget>
  )

import EsuissUI
import PhosphorSwift
import SwiftUI

struct WidgetCenteredExample: View {
  var body: some View {
    Widget(.small, align: .center) {
      WidgetHeader {
        WidgetIcon(size: .lg) {
          Ph.cashRegister.regular
        }
        WidgetTitle("Point of sale")
      }
      WidgetDescription("3 open orders")
    }
  }

import androidx.compose.runtime.Composable
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Regular
import com.esuiss.ui.components.Icon
import com.esuiss.ui.components.Widget
import com.esuiss.ui.components.WidgetAlign
import com.esuiss.ui.components.WidgetDescription
import com.esuiss.ui.components.WidgetHeader
import com.esuiss.ui.components.WidgetIcon
import com.esuiss.ui.components.WidgetIconSize
import com.esuiss.ui.components.WidgetSize
import com.esuiss.ui.components.WidgetTitle

@Composable
fun WidgetCentered() {
    Widget(size = WidgetSize.Small, align = WidgetAlign.Center) {

Auto

An auto widget that fills its parent.

iOS

import { SunIcon } from "phosphor-react-native"
import { View } from "react-native"
import { Icon } from "@/components/ui/icon"
import { Widget, WidgetContent, WidgetDescription, WidgetFooter, WidgetHeader, WidgetIcon, WidgetTitle, WidgetValue } from "@/components/ui/widget"

function Weather() {
  return (
    <>
      <WidgetHeader>
        <WidgetIcon>
          <Icon as={SunIcon} weight="fill" />
        </WidgetIcon>
        <WidgetTitle>Istanbul</WidgetTitle>
      </WidgetHeader>
      <WidgetContent>
        <WidgetValue>24°</WidgetValue>

import EsuissUI
import PhosphorSwift
import SwiftUI

struct WidgetAutoExample: View {
  var body: some View {
    Widget(nil) {
      WidgetWeather()
    }
    .frame(maxWidth: .infinity)
    .frame(height: 192)
  }
}

struct WidgetWeather: View {
  var body: some View {

import androidx.compose.foundation.layout.height
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Fill
import com.adamglin.phosphoricons.fill.Sun
import com.esuiss.ui.components.Icon
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.Widget
import com.esuiss.ui.components.WidgetContent
import com.esuiss.ui.components.WidgetDescription
import com.esuiss.ui.components.WidgetFooter
import com.esuiss.ui.components.WidgetHeader
import com.esuiss.ui.components.WidgetIcon

Dashboard

Several auto-sized widgets arranged in a grid.

iOS

import { CashRegisterIcon, CookingPotIcon, SunIcon } from "phosphor-react-native"
import { ScrollView, View } from "react-native"
import { Icon } from "@/components/ui/icon"
import { Widget, WidgetDescription, WidgetFooter, WidgetHeader, WidgetIcon, WidgetTitle, WidgetValue } from "@/components/ui/widget"

export function WidgetDashboardExample() {
  return (
    <ScrollView contentContainerClassName="gap-4">
      <View className="h-42 flex-row gap-4">
        <View className="flex-1">
          <Widget>
            <WidgetHeader>
              <WidgetIcon>
                <Icon as={SunIcon} weight="fill" />
              </WidgetIcon>
              <WidgetTitle>Istanbul</WidgetTitle>

import EsuissUI
import PhosphorSwift
import SwiftUI

struct WidgetDashboardExample: View {
  var body: some View {
    VStack(spacing: 16) {
      HStack(spacing: 16) {
        Widget(nil) {
          WidgetHeader {
            WidgetIcon {
              Ph.sun.fill
            }
            WidgetTitle("Istanbul")
          }
          WidgetValue(verbatim: "24°")

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Fill
import com.adamglin.phosphoricons.Regular
import com.adamglin.phosphoricons.fill.CashRegister

API Reference

The card surface and optional resize handle.

Prop	Type	Default	Description
`className`	`string`	-
`size`	`WidgetSize \| "auto"`	-	Controlled size: `small`, `medium`, `large`, `extra-large` or `auto`.
`defaultSize`	`WidgetSize \| "auto"`	-	Initial size when uncontrolled.
`onSizeChange`	`(size: WidgetSize \| "auto") => void`	-	Called with the new size after a resize.
`sizes`	`WidgetSize[]`	`ALL_SIZES`	Sizes the user can resize to. Defaults to all four.
`resizable`	`boolean`	`false`	Shows a drag handle for resizing.
`handle`	`WidgetHandlePlacement`	`"outside"`	Handle placement: `outside` the corner or `inside` it. Defaults to `outside`.
`align`	`WidgetAlign`	`"start"`	`start` or `center` content alignment.
`resizeLabel`	`string`	`"Resize widget"`	Accessibility label for the handle. Defaults to "Resize widget".

Also accepts the props of ViewProps, React.RefAttributes<View>.

WidgetHeader

Row for the icon, title and action.

Prop	Type	Default	Description
`className`	`string`	-

Also accepts the props of ViewProps, React.RefAttributes<View>.

WidgetIcon

Icon frame in default, sm or lg size.

Prop	Type	Default	Description
`className`	`string`	-
`iconClassName`	`string`	-	Classes applied to the icon inside.
`size`	`"default" \| "sm" \| "lg"`	`"default"`	`default`, `sm` or `lg`.

Also accepts the props of ViewProps, React.RefAttributes<View>.

WidgetTitle

Single-line heading.

Also accepts the props of React.ComponentProps<typeof Text>, React.RefAttributes<typeof Text>.

WidgetAction

Trailing slot in the header; hidden when centered.

Prop	Type	Default	Description
`className`	`string`	-

Also accepts the props of ViewProps, React.RefAttributes<View>.

WidgetDescription

Secondary text.

Also accepts the props of React.ComponentProps<typeof Text>, React.RefAttributes<typeof Text>.

WidgetValue

Large number with tabular figures.

Also accepts the props of React.ComponentProps<typeof Text>, React.RefAttributes<typeof Text>.

WidgetContent

Flexible body area that clips overflow.

Prop	Type	Default	Description
`className`	`string`	-

Also accepts the props of ViewProps, React.RefAttributes<View>.

WidgetFooter

Small secondary text and icons pinned to the bottom.

Prop	Type	Default	Description
`className`	`string`	-

Also accepts the props of ViewProps, React.RefAttributes<View>.

Accessibility

The resize handle has the adjustable role, its resizeLabel and the current size as its value; increment and decrement actions step through the available sizes, so VoiceOver and TalkBack users can resize without dragging.
WidgetTitle has the heading role.
WidgetIcon and the resize preview outline are hidden from assistive technology.
Size animations respect the system reduce motion setting.

Notes

Uses bg-muted for the surface, bg-secondary for icon frames, and text-muted-foreground/50 for the handle, which turns text-primary while dragging.
The handle and drag direction mirror in right-to-left layouts.
Light and dark colors follow the system appearance.