gluestack-ui logo
Get Updates
Prompt to React Native UI
Home
Components
Hooks
Apps
MCP Server
Guides
Home
Overview
IntroductionQuick Start
Getting Started
InstallationTooling SetupVS Code ExtensionsFigma UI KitCLIgluestack-ui-nativewind-utils
Core Concepts
AccessibilityUniversal
Performance
Benchmarks
Theme Configuration
Default TokensCustomizing ThemeDark Mode
Components
All Components
Typography
HeadingrscTextrsc
Layout
BoxrscCenterrscDividerHStackrscVStackrscGridalpha, rsc
Feedback
AlertProgressSpinnerToast
Data Display
BadgeCardrscTablealpha
Forms
ButtonCheckboxFormControlInputLinkPressableRadioSelectSliderSwitchTextarea
Overlay
AlertDialogDrawerMenuModalPopoverPortalTooltip
Disclosure
ActionsheetAccordionBottomSheetalpha
Media And Icons
AvatarImageIconrsc
Others
FabSkeletonalpha, rsc
Hooks
useBreakPointValue
useMediaQuery
Apps
Dashboard App
Kitchensink App
Todo App
Starter Kit
MCP Server
MCP Server
Guides
Recipes
LinearGradient
Tutorials
Building Ecommerce App
More
Upgrade to v2Upgrade to v3FAQsReleasesRoadmapTroubleshootingDiscord 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