Skip to main content

Components




AccordionAccordion

Accordion

A component with multiple configuration options for collapsing and expanding content.

AlertAlert

Alert

A component with a title and description, available in different visual variants.

AlertDialogAlertDialog

AlertDialog

A composable component for important confirmations and alerts with customizable actions.

AvatarAvatar

Avatar

A component used for displaying user avatars, with image support and fallback initials for when the image fails to load.

BadgeBadge

Badge

A component for displaying status, categories, or labels with multiple visual variants.

ButtonButton

Button

A versatile button component with multiple variants and sizes for user interactions.

CardCard

Card

A composable component with header, content, and footer sections for displaying grouped information.

CheckboxCheckbox

Checkbox

A component for boolean selections with checked and disabled states.

ContentWrapper

The ContentWrapper component fetches and provides user-generated content data using a render function pattern.

IconButtonIconButton

IconButton

A button component that displays an icon in various sizes.

ImageImage

Image

An optimized image component that handles File objects, remote URLs, blob URL lifecycle management, and progressive loading with thumbhash placeholders.

ImageContentWrapperImageContentWrapper

ImageContentWrapper

The ImageContentWrapper component renders images uploaded via the useCreateImageContent hook.

InputInput

Input

A simple component for inputting text.

LabelLabel

Label

A simple component to render accessible text.

ListList

List

A virtualized list component for efficiently rendering large datasets with customizable item rendering and built-in pull-to-refresh functionality.

ProductVariantPriceProductVariantPrice

ProductVariantPrice

A component for displaying product pricing with support for discounts and custom styling.

ProgressProgress

Progress

A component for showing completion status or loading progress.

QuantitySelectorQuantitySelector

QuantitySelector

A component with increment and decrement buttons for adjusting quantities.

RadioGroupRadioGroup

RadioGroup

A radio group component for single-selection options.

SafeArea

A container that applies safe area insets as padding or margin, ensuring content is not hidden behind system UI such as the home indicator on iOS or the navigation bar on Android.

SelectSelect

Select

A dropdown component with support for grouped options and disabled states.

SkeletonSkeleton

Skeleton

A placeholder component for loading states, with customizable dimensions.

TextInputTextInput

TextInput

A wrapper around the base Input that automatically adjusts the layout to keep the focused field visible when the on-screen keyboard appears.

ToasterToaster

Toaster

A notification component that shows up from the bottom, in various states.

Touchable

Animated wrapper providing native-like tap feedback.

VideoPlayerVideoPlayer

VideoPlayer

Video.js-powered player with automatic format handling.


Was this page helpful?