QUI React
NextGen v1.28.1
Components
CTRL
+
K
QUI AI Assistant (QC-only)
Getting Started
Installation
Setup
Next.jsReact RouterTanstack StartVite / Other
Versioning
Integrations
AI Tools
MCPClaude CodeCodex
Plugins
QUI DocsQUI React Best PracticesQUI Angular Best PracticesUI Testing
ESLintTailwind CSS
Theming & Patterns
Theming
OverviewColorsSpacingTypographyZ-Index
Patterns & Best Practices
OverviewIntroduction to JavaScriptAttributes vs. PropertiesChoosing Dependencies
Clean Code
Clean CodeAvoid The Pyramid of Doom
Controlled StateEnumsFrontend MasteryModern package.json exportsProject StructureTypeScript ConfigsTypeScript Style Guide
Composition
Polymorphic ComponentsRender Props
Components
OverviewAccordionAlert Banner
Avatar
Badges
Icon Badge
Number Badge
Status Badge
Text Badge
BreadcrumbsButtonButton GroupCard
CheckboxCheckbox Group
CollapsibleComboboxDialogDividerDrawerFile Input
Header BarIconIcon ButtonInline Icon ButtonInline Notification
LinkListbox
Alpha
MenuNumber InputPaginationPassword InputPopoverProgressProgress RingRadioSegmented ControlSelectSide NavSliderStepper
Beta
SwitchSwitch Group
TableTabsTagText Area
Text InputToast NotificationTooltipTree
  1. Home
  2. Installation

Installation

Soon we'll provide pre-built templates for quickly starting new projects. Until then, continue below to learn how to install manually.

Choose Your Flavor

Refer to the setup section for your framework:

  • Next.js
  • React Router
  • Tanstack Start
  • Vite
Last updated on Nov 20, 2025 by Ryan Bower
Next.js
Setup
Choose Your Flavor
Copyright © 2026 QUALCOMM incorporated. All rights reserved. This site is built with QUI Docs. Head over to the template repository to start building.