Components

182 components for Vue, Nuxt and React. Every page shows a live preview and the code for both frameworks.

Typography 5

Headings and text.

Heading3 examplesText4 examplesCode3 examplesKbd3 examplesLink4 examples

Layout 16

Stacks, grids and page structure.

Box2 examplesCenter1 exampleHStack2 examplesVStack2 examplesGrid2 examplesDivider3 examplesScrollArea1 exampleSplitLayout2 examplesAppShell2 examplesPageHeader3 examplesAuthLayout1 exampleSettingsSection2 examplesLiquidGlass3 examplesFooter2 examplesSortable2 examplesPortal1 example

Actions 14

Buttons and things you press.

Button3 examplesIconButton3 examplesPressable2 examplesFab3 examplesCopyButton3 examplesToggleGroup5 examplesSegmentedControl3 examplesFilterChips3 examplesChip3 examplesTag2 examplesBadge3 examplesActionRail2 examplesActionCard3 examplesNotificationBell3 examples

Forms 36

Inputs, pickers and form building blocks.

TextField4 examplesTextarea4 examplesNumberInput5 examplesPasswordInput4 examplesSearchInput3 examplesPhoneInput4 examplesCodeInput3 examplesChipInput4 examplesInlineEdit3 examplesRichEditor3 examplesSelect4 examplesMultiSelect3 examplesGroupedSelect2 examplesCombobox3 examplesTreeSelect2 examplesPillSelect3 examplesCheckbox3 examplesSwitch3 examplesRadioGroup2 examplesOptionCard3 examplesOptionCards3 examplesSlider3 examplesRangeSlider3 examplesRating4 examplesColorPicker3 examplesCalendar3 examplesRangeCalendar4 examplesDatePicker4 examplesTimePicker3 examplesFileUpload4 examplesImageUpload3 examplesFormField3 examplesValidatedField4 examplesLoginForm4 examplesStepForm2 examplesStepper4 examples

Data display 29

Tables, stats, charts and lists.

Card6 examplesDataTable4 examplesDataGroup2 examplesDescriptions2 examplesTimeline2 examplesTreeView2 examplesCalendarView1 exampleKpiTile3 examplesKpiInline2 examplesStatsCard2 examplesStatRow2 examplesStatLine2 examplesStatStrip2 examplesCountryRow1 exampleVersusBar3 examplesSegBar4 examplesMiniChart4 examplesChartCard1 exampleRing3 examplesOccupancyChart2 examplesSalesFunnel2 examplesSystemStatus1 exampleUserCell2 examplesIconTile3 examplesStatusIcon2 examplesHeroBanner2 examplesTabTiles1 examplePricingCard2 examplesIntegrationCard2 examples

Feedback 12

Alerts, progress and states.

Alert3 examplesBanner3 examplesToast2 examplesSnackbar3 examplesProgress3 examplesSpinner2 examplesSkeleton3 examplesEmptyState3 examplesErrorPage2 examplesStatusPage3 examplesDataState4 examplesLoadingOverlay2 examples

Overlay 20

Dialogs, sheets and popovers.

Modal3 examplesDrawer3 examplesConfirmDialog3 examplesPopconfirm4 examplesStepDialog2 examplesFullscreenDialog1 exampleBottomSheet3 examplesActionsheet2 examplesPopover3 examplesHoverCard2 examplesTooltip3 examplesDropdown3 examplesMenu2 examplesContextMenu2 examplesCommandBar2 examplesCommandPalette2 examplesImageViewer2 examplesTour2 examplesTourPopover2 examplesScreensaver2 examples

Navigation 8

Menus, tabs and paging.

TopNav3 examplesSideNav3 examplesSubNav2 examplesTabs2 examplesPillTabs3 examplesBreadcrumbs3 examplesPagination5 examplesAccordion2 examples

Media and icons 8

Avatars, images, maps and icons.

Avatar3 examplesIcon3 examplesLazyImage2 examplesGallery4 examplesCarousel5 examplesMap1 exampleProfileHeader1 exampleChatAi2 examples

Domain 18

Umrah, Hajj, hotel and CRM blocks.

HotelCard3 examplesTourCard5 examplesPrayerTimes3 examplesRamadanTracker3 examplesBookingCard2 examplesGuestCard3 examplesRoomGrid3 examplesRoomCalendar2 examplesLeadCard2 examplesDealCard2 examplesPipelineBoard4 examplesContactPanel2 examplesKanbanColumn3 examplesKanbanCard2 examplesCallRow3 examplesCallCard4 examplesIncomingCall3 examplesAuthSplit1 example

Page templates 16

Ready layouts with named slots.

PageDashboard1 examplePagePatterns1 examplePageCrm1 examplePageBookings1 examplePageCatalog1 examplePageDetail1 examplePageSettings1 examplePageUserList1 examplePageProfile1 examplePageForm1 examplePageOrder1 examplePageAccount1 examplePagePricing1 examplePageFaq1 examplePageAuth2 examplesPageStatus3 examples