---

# gluestack UI > Universal React & React Native component library with Tailwind CSS v4. > Copy-paste components for web (Next.js) and mobile (Expo / React Native), supporting both NativeWind v5 and UniWind engines. ## Getting Started - [Accessibility](/ui/docs/home/core-concepts/accessibility/index): Accessibility is an important aspect of web and native development, and at gluestack-ui, we strive to make our compon... - [Universal](/ui/docs/home/core-concepts/universal/index): All `gluestack-ui` components are universal out of the box, eliminating the need for separate development for both we... - [CLI](/ui/docs/home/getting-started/cli/index): The gluestack-ui CLI is a tool that simplifies integrating the gluestack-ui into your project. It provides commands f... - [Figma UI Kit](/ui/docs/home/getting-started/figma-ui-kit/index): The Figma UI Kit provides a collection of ready-to-use UI components from the gluestack-ui library. So you can direct... - [@gluestack-ui/utils](/ui/docs/home/getting-started/gluestack-ui-nativewind-utils/index): @gluestack-ui/utils provides a collection of utility functions for seamless integration of gluestack-ui and nativewind. - [Installation](/ui/docs/home/getting-started/installation/index): The fastest way to get started. The CLI detects your project type, prompts you to choose a styling engine, and automa... - [Tooling Setup](/ui/docs/home/getting-started/tooling-setup/index): If you are using VSCode and the Tailwind CSS IntelliSense Extension, you have to add the following to your `settings.... - [VS Code Extensions](/ui/docs/home/getting-started/vscode-extensions/index): gluestack VS Code Extension is specially crafted to streamline your development process when using the gluestack-ui v... - [Introduction](/ui/docs/home/overview/introduction/index): Customizable components and patterns for React, Next.js & React Native. - [Getting Started](/ui/docs/home/overview/quick-start/index) - [Performance Benchmarks](/ui/docs/home/performance/benchmarks/index): `gluestack-ui` harnesses the power of NativeWind, a universal and highly performant styling library, to style the com... - [Customizing Theme](/ui/docs/home/theme-configuration/customizing-theme/index): Customize your UI theme in gluestack-ui v5 using shadcn-inspired semantic color tokens. Define your theme in config.t... - [Dark Mode](/ui/docs/home/theme-configuration/dark-mode/index): Customize the theme in gluestack-ui v5 with Tailwind dark mode, UI theme dark mode colors, and React Native light & d... - [Default Tokens](/ui/docs/home/theme-configuration/default-tokens/index): gluestack-ui v5 ships with shadcn-inspired default tokens, including colored tokens that provide access to theme valu... ## Components - [Accordion](/ui/docs/components/accordion/index): Explore gluestack's Accordion component for Expo, next.js, React & React Native. Build sleek, interactive accordions ... - [ActionSheet](/ui/docs/components/actionsheet/index): Discover the ActionSheet component for Expo, React & React Native. Easily create intuitive action sheets in your app ... - [AlertDialog](/ui/docs/components/alert-dialog/index): Build seamless React Native dialogs with the AlertDialog component. Enhance user engagement with smooth and responsiv... - [Alert](/ui/docs/components/alert/index): gluestack-ui offers a responsive React Native Alert component with multiple styles. Easily integrate alerts into your... - [All Components](/ui/docs/components/all-components/index): 30+ responsive components for every screen and style - [Avatar](/ui/docs/components/avatar/index): Enhance your UI with our React Native Avatar component. Explore gluestack's-ui Avatar for seamless design and customi... - [Badge](/ui/docs/components/badge/index): Display status indicators with the Badge component. Perfect for notifications, labels, and status tags in your React ... - [BottomSheet](/ui/docs/components/bottomsheet/index): A bottom sheet component for React Native built on top of @gorhom/bottom-sheet with gluestack-ui styling and NativeWi... - [Box](/ui/docs/components/box/index): Use gluestack-ui Box, a powerful box component for flexible layouts. Customize styles, props, and structure easily fo... - [Button](/ui/docs/components/button/index): Discover a powerful button component for React & React Native with customizable size, shape, color, and behavior. Per... - [Calendar](/ui/docs/components/calendar/index): A versatile calendar component for React & React Native with support for single, multiple, and range date selection. ... - [Card](/ui/docs/components/card/index): Build beautiful interfaces with the gluestack-ui Card component. This React Native card offers a clean, modern design... - [Center](/ui/docs/components/center/index): gluestack-ui Center component helps center-align text and content in React Native. Perfect for creating responsive la... - [Chat AI](/ui/docs/components/chat-ai/index): Build AI chat interfaces with a comprehensive set of components including conversations, messages, attachments, and p... - [Checkbox](/ui/docs/components/checkbox/index): Build interactive forms with a checkbox component for React & React Native. Features include hover, focus, disabled s... - [DateTimePicker](/ui/docs/components/date-time-picker/index): A comprehensive date and time picker component that provides a native experience on mobile platforms and a custom-bui... - [Divider](/ui/docs/components/divider/index): gluestack-ui's Divider component ensures a well-structured interface. Use the Divider component for clean content sep... - [Drawer](/ui/docs/components/drawer/index): Implement a responsive Drawer component in React & React Native for navigation and content display. Learn how to inst... - [Fab](/ui/docs/components/fab/index): Improve your React Native app with the FAB component. Learn how to implement a React Native FAB button using gluestac... - [FormControl](/ui/docs/components/form-control/index): Enhance form usability with FormControl components in React. Manage validation, disabled states, and more. Easy integ... - [Grid](/ui/docs/components/grid/index): Discover a powerful Grid component for React & React Native with customizable layout and behavior. Perfect for creati... - [Heading](/ui/docs/components/heading/index): Explore the gluestack-ui Heading Component with installation steps, API reference, and usage examples. Customize Reac... - [HStack](/ui/docs/components/hstack/index): Use the gluestack-ui HStack component in React Native to align elements horizontally. Easily customize layouts with s... - [Icon](/ui/docs/components/icon/index): Use gluestack-ui Icon component to enhance your web and mobile app with scalable component icons. A must-have React N... - [Image Viewer](/ui/docs/components/image-viewer/index): The Image Viewer component provides an interactive way to display images with advanced gesture support. It includes p... - [Image](/ui/docs/components/image/index): Enhance your app with the Image component from gluestack-ui. Build seamless UI component images in React & React Nati... - [Input](/ui/docs/components/input/index): A feature-rich React Native Input component – supports icons, validation, and styling options for seamless user input... - [Link](/ui/docs/components/link/index): Enhance navigation with a React Native link component. Seamless UI link design for intuitive user experiences. Learn ... - [LiquidGlass](/ui/docs/components/liquid-glass/index): A glass effect component for React Native built on top of expo-glass-effect with gluestack-ui styling and NativeWind ... - [Menu](/ui/docs/components/menu/index): Build a user-friendly interface with gluestack-ui menu component in React & React Native, designed for easy navigatio... - [Modal](/ui/docs/components/modal/index): Create smooth and accessible modals in React & React Native. Implement React modal components for alerts, forms, and ... - [Popover](/ui/docs/components/popover/index): Improve user experience with a React Popover component—perfect for contextual modals, tooltips & interactive UI eleme... - [Portal](/ui/docs/components/portal/index): Learn how to use the Portal component in React and React Native to render content outside the DOM hierarchy. Explore ... - [Pressable](/ui/docs/components/pressable/index): Simplify interactive UI with the Pressable component in React Native. Manage hover, pressed, and focus events efficie... - [Progress](/ui/docs/components/progress/index): Enhance your app with a responsive Progress component. gluestack-ui offers a React Native progress bar for tracking s... - [Radio](/ui/docs/components/radio/index): Enhance your UI with a React Native radio button. Easily integrate radio buttons component with full accessibility su... - [Select](/ui/docs/components/select/index): Enhance your React Native app with a customizable Select dropdown component. Supports accessibility, animations, and ... - [Skeleton](/ui/docs/components/skeleton/index): Discover the ultimate gluestack-ui Skeleton component for React & React Native. Improve app loading visuals with glue... - [Slider](/ui/docs/components/slider/index): Create smooth, interactive controls with the gluestack-ui React Native Slider component. Customize track height, valu... - [Spinner](/ui/docs/components/spinner/index): Enhance your UI with the gluestack-ui Spinner component. A React Native spinner with ShadCN styling for smooth loadin... - [Switch](/ui/docs/components/switch/index): Enhance your UI with a sleek Switch Component. Built on React Native, it's customizable and accessible. Perfect for t... - [Table](/ui/docs/components/table/index): Effortlessly manage tabular data with gluestack-ui Table component. A fully customizable React Native table component... - [Tabs](/ui/docs/components/tabs/index): Create an organized UI using the gluestack-ui Tabs component in React & React Native. Add tabbed navigation seamlessl... - [Text](/ui/docs/components/text/index): Enhance your app with gluestack-ui's Text component—an adaptable React Native text area with multiple styles, sizes, ... - [TextArea](/ui/docs/components/textarea/index): Easily integrate a React & React Native Textarea component with multi-line input. Customize size, state, and accessib... - [Toast](/ui/docs/components/toast/index): gluestack-ui Toast component for React Native lets you show toast messages effortlessly. Improve your Toast component... - [Tooltip](/ui/docs/components/tooltip/index): Create an intuitive UI using the gluestack-ui Tooltip component in React & React Native. Add hints & tooltips seamles... - [VStack](/ui/docs/components/vstack/index): Use the gluestack-ui VStack component to arrange elements vertically with customizable spacing. Simplify layout desig... ## Guides - [Contributing to `gluestack-ui`](/ui/docs/guides/more/contribution-guide/index): Thank you for your interest in contributing to `gluestack-ui`! 🚀 - [Discord FAQs](/ui/docs/guides/more/discord-faqs/index) - [FAQs](/ui/docs/guides/more/faqs/index): - **How do I migrate from gluestack v1 to v2?** - [Releases](/ui/docs/guides/more/releases/index): To view releases, please visit GitHub releases. - [Roadmap](/ui/docs/guides/more/roadmap/index): The gluestack-ui roadmap outlines our vision, priorities, and upcoming features for the framework. It helps the commu... - [Troubleshooting](/ui/docs/guides/more/troubleshooting/index): If you encounter any issues while using nativewind, please refer to the nativewind troubleshooting guide. - [Upgrade to gluestack-ui v2 with Codemod](/ui/docs/guides/more/upgrade-to-v2/index): This guide provides detailed steps to upgrade from gluestack-ui v1 to gluestack-ui v2. With codemod you can automate ... - [Upgrade to gluestack-ui v3](/ui/docs/guides/more/upgrade-to-v3/index): **gluestack-ui v3** represents a major evolution in our approach to universal component development. Building on the ... - [Upgrade to gluestack-ui v4](/ui/docs/guides/more/upgrade-to-v4/index): **gluestack-ui v4** introduces significant improvements to the animation system, performance optimizations, and enhan... - [Upgrade to gluestack-ui v5](/ui/docs/guides/more/upgrade-to-v5/index): gluestack-ui v5 moves to **Tailwind CSS v4** (CSS-first configuration). You can choose between two styling engines: - [LinearGradient](/ui/docs/guides/recipes/linear-gradient/index): Learn how to use LinearGradient components in React Native for stunning UI effects. Create smooth color transitions w... - [Learn about gluestack from YouTube guru notJust.dev](/ui/docs/guides/tutorials/building-ecommerce-app/index): Vadim, popularly known as "not-just-dev" on YouTube, offers insightful and practical videos that explore a wide range... ## Hooks - [useBreakpointValue](/ui/docs/hooks/use-break-point-value/index): Learn how to use the useBreakpointValue hook to manage breaking point values, breakpoint components in Expo, React & ... - [useMediaQuery](/ui/docs/hooks/use-media-query/index): Implement responsive designs in React & React Native with the useMediaQuery hook and component. Learn how to use the ... ## Apps - [Dashboard App](/ui/docs/apps/dashboard-app/index): This Dashboard App is built using `gluestack-ui v2`. - [Kitchensink App](/ui/docs/apps/kitchensink-app/index): This Kitchensink App is built using `gluestack-ui v5`. - [Starter Kit](/ui/docs/apps/starter-kit/index): These Starter Kits are built using `gluestack-ui v5`. - [Todo App](/ui/docs/apps/todo-app/index): This Todo App is built using `gluestack-ui v2`. ## MCP Server - [MCP Server](/ui/docs/mcp-server/mcp-server/index): A server that generates complete, consistent codebases using `gluestack-ui v2` components. Check out this demo video: ## Quick Reference - **CLI**: `npx gluestack-ui@alpha add

---