gluestack-ui logopreview
Docs
Blog
Get Updates
Prompt to React Native
IntroductionQuick Start
InstallationTooling SetupVS Code ExtensionsFigma UI KitCLIgluestack-ui-nativewind-utils
AccessibilityUniversal
Benchmarks
Default TokensCustomizing ThemeDark Mode
All Components
HeadingrscTextrsc
BoxrscCenterrscDividerHStackrscVStackrscGridalpha, rsc
AlertProgressSpinnerToast
BadgeCardrscTablealphaTabsalpha
ButtonCheckboxDateTimePickerCalendarFormControlInputLinkPressableRadioSelectSliderSwitchTextarea
AlertDialogDrawerLiquid GlassMenuModalPopoverPortalTooltipImage Viewer
ActionsheetAccordionBottomSheetalpha
AvatarImageIconrsc
FabSkeletonalpha, rsc
useBreakPointValueuseMediaQuery
Dashboard AppKitchensink AppTodo AppStarter KitAppLighter
LinearGradient
Building Ecommerce App
Upgrade to v2Upgrade to v3Upgrade to v4FAQsReleasesChangelogRoadmapTroubleshootingDiscord FAQs

Universal

All
gluestack-ui
components are universal out of the box, eliminating the need for separate development for both web and mobile platforms, which is the traditional approach.
With
gluestack-ui
, developers can now craft beautiful interfaces with a single set of code that seamlessly operates across all devices, removing the need for the tedious and time-consuming process of crafting and maintaining two separate codebase for distinct platforms.
You can also use
gluestack-ui
to create styles specific to a particular platform such as Web, iOS or Android. using
web:
,
ios:
and
android:
platform modifiers respectively.
import { Button, ButtonText} from '@/components/Button';

function App {
  return (
    <Button
      className="web:bg-red-500 ios:bg-blue-500 android:bg-green-500">
     <ButtonText>Hello World</ButtonText>
    </Button>
  )
}

Component Showcase

Discover how gluestack-ui delivers a smooth and consistent user experience across various device types. You can view live example
here
.
Edit this page on GitHub
Go backAccessibility
Up nextBenchmarks
Go backAccessibility
Up nextBenchmarks