Buttons
Inputs
Loading
Media
Navigation
Panels & Popups
Scroll
Tables
Other Components
All Components
Directives
Plugins
Composables
Utils
loading
Ajax-bar
A loading bar for ajax calls in progress
media
Avatar
A space for your portrait, icon or text
media
Badge
To highlight small but important info
panel
Banner
To display important messages and actions
other
Bar
A small top bar for side info and actions
navigation
Breadcrumbs
To keep track of your position inside app
button
Buttons
To access the most important actions
button
Buttons Dropdown
To access more actions at once in less space
button
Buttons Group
An alternative to classic buttons
panel
Cards
To display grouped contents
media
Carousels
To display images and other contents
other
Chat Message
To display users' conversations
input
Checkbox
To flag one or more options in a list
media
Chips
A small container for info and actions
loading
Circular Progress
To inform when content is still loading
input
Color Pickers
To select color values and codes
input
Date Picker
To access the most important actions
panel
Dialogs
To show actions and info only when needed
navigation
Drawer
The sidebar panels of your layout
other
Editor WYSIWYG
To write text and style it directly
panel
Expansion Panels
To show hidden extra info and actions
media
File Pickers
To access and choose a file from users' device
button
Floating Action Button
To display the page primary action
input
Forms
A system to submit validated inputs
input
Form Fields
Wrapper for your own custom form elements
media
Icon
To insert icons inside other components
media
Img
To set some basic image features
scroll
Infinite Scroll
To enable new content display while scrolling
loading
Inner Loading
To add content loading inside a component
input
Input Text Fields
To collect users' typed text input
loading
Intersection
Set how UI elements enter the screen
input
Knob
To set a value with a draggable gauge
loading
Linear Progress
A loading bar with various behaviors
other
List and List Items
To display contents on a vertical list
table
Markup Table
To display data and content on a table
panel
Menu
A dropdown panel to access options
other
No SSR
Ignore irrelevant code during SSR generation
other
Observer resize
Emit an Event when an element resizes
other
Observer scroll
Emit an Event when the user scrolls
input
Option Group
Helper component to set groups of options
navigation
Pagination
To navigate content on multiple pages
media
Parallax
To create interesting UI image background
input
Popup Edit
To access inline editing of data
panel
Popup Proxy
To show extra content on click
loading
Pull to Refresh
To refresh the page content with a gesture
input
Radio
To select a single option in a list
input
Range
To pick a period on a range of values
other
Rating
The classic "star rating" component
other
Responsive
To keep content aspect ratio consistent
scroll
Scroll Area
To set a scrollable content in components
input
Select
To choose one item from a dropdown list
other
Separator
The linear visual divider for contents
loading
Skeleton
To set loading content placeholders
other
Slide Item
To add dragging feature to list items
input
Slider
To pick a single value on a range
other
Slide Transition
To show a hidden content
other
Space
Fill space inside elements using flexbox
loading
Spinners
A loading indicator with various behaviors
other
Splitter
To add a draggable resizer for containers
navigation
Stepper
To divide content in progressive steps
table
Table
To display much data on a datatable
navigation
Tab Panels
To split out content view in the same page
navigation
Tabs
To navigate separate content in one page
other
Timeline
A vertical solution to set milestones in time
input
Time Picker
To set a specific time on the clock
button
Toggle Buttons
An alternative to pick an option among many
button
Toggle
To switch an option on and off
navigation
Toolbar
The top main bar for actions and menu
media
Tooltip
To show extra useful info about the UI
navigation
Tree
An indented structure for hierarchical data
media
Uploader
To upload any kind of file from the computer
media
Video
To embed and display a video player in UI
scroll
Virtual Scroll
To render new content while scrolling it
directive
Close Popup
Close the parent QDialog or QMenu on click
directive
Intersection
Handle elements coming into the view
directive
Material Ripples
Apply Material ripples to elements
directive
Mutation
Watch changes being made to the DOM tree
directive
Morph
Morph DOM elements between two states
directive
Scroll
Handle page scroll
directive
Scroll Fire
Take action when element comes into view
directive
Touch Hold
Handle touch & mouse hold user actions
directive
Touch Pan
Handle touch & mouse panning user actions
directive
Touch Repeat
Handle repeated touch & mouse taps/clicks
directive
Touch Swipe
Handle touch & mouse swipe user actions
plugin
Addressbar Color
Manage the browser addressbar color
plugin
App Fullscreen
Handle app fullscreen mode
plugin
App Visibility
For app coming into (or out of) view
plugin
Bottom Sheet
Quick way to offer a list of actions
plugin
Cookies
Easy way to manage browser cookies
plugin
Dark Mode
Manage dark mode
plugin
Dialog
Plugin to display a floating modal
plugin
Loading
Overlay for a background action in progress
plugin
Loading Bar
Display a loading bar for in progress Ajax calls
plugin
Local/Session Storage
Manage the local storage and session storage
plugin
Meta Plugin
Helps with SEO by managing the meta tags
plugin
Notify
Display floating animated messages
composable
useQuasar
Access Quasar API (the $q object)
composable
useDialogPluginComponent
Access Dialog Plugin functionality
composable
useFormChild
Communicate with the parent QForm
composable
useMeta
Configure meta tags with Quasar Meta Plugin
composable
useHydration
Get hydration state for SSR/SSG
composable
useId
Generate unique IDs
composable
useIntersection
Detect when an element enters or leaves the viewport
composable
useInterval
Similar to setInterval() but with additional features
composable
useRenderCache
Cache rendered nodes for performance optimization
composable
useTick
Similar to nextTick() but with additional features
composable
useTimeout
Similar to setTimeout() but with additional features
composable
useAnimationFrame
Similar to requestAnimationFrame() but with additional features
composable
useSplitAttrs
Split a component's attributes into listeners and non-listeners
util
Date utils
Easily handle date objects
util
Color utils
Manipulate colors and app brand colors
util
DOM utils
Various DOM-related helper utils
util
Morph utils
Morph DOM elements helper util
util
Formatter utils
Various text formatting utils
util
Scrolling utils
Various scrolling-related utils
util
Type checking utils
Helpers to determine variable types
util
Event bus util
Global event bus
util
Other utils
Various other utils that Quasar supplies