UI primitives
Shared building blocks, each shown inside a section that renders it, plus the marquee band, heading styles and the floating WhatsApp button. 28 variants, 27 rendered live.
desktop preview
mobile preview
solid
marquee-bandin useOpen livedesktop preview
mobile preview
rise
heading-stylein useOpen livedesktop preview
mobile preview
chars
heading-stylein useOpen livedesktop preview
mobile preview
blur
heading-stylein useOpen livedesktop preview
mobile preview
Ambient
ui-primitivein useOpen livedesktop preview
mobile preview
Avatar
ui-primitivein useOpen livedesktop preview
mobile preview
Byline
ui-primitivein useOpen livedesktop preview
mobile preview
CardArt
ui-primitivein useOpen livedesktop preview
mobile preview
CardCopy
ui-primitivein useOpen livedesktop preview
mobile preview
CardMedia
ui-primitivein useOpen livedesktop preview
mobile preview
Downloads
ui-primitivein useOpen livedesktop preview
mobile preview
HScroll
ui-primitivein useOpen livedesktop preview
mobile preview
Icon
ui-primitivein useOpen livedesktop preview
mobile preview
IconBadge
ui-primitivein useOpen livedesktop preview
mobile preview
ItemRows
ui-primitivein useOpen livedesktop preview
mobile preview
LinkedText
ui-primitivein useOpen livedesktop preview
mobile preview
LongCopy
ui-primitivein useOpen livedesktop preview
mobile preview
MarqueeBand
ui-primitivein useOpen livedesktop preview
mobile preview
NoBreakPhones
ui-primitivein useOpen livedesktop preview
mobile preview
Picture
ui-primitivein useOpen livedesktop preview
mobile preview
SectionHeading
ui-primitivein useOpen livedesktop preview
mobile preview
Separator
ui-primitivein useOpen livedesktop preview
mobile preview
SplitWords
ui-primitivein useOpen livedesktop preview
mobile preview
Surface
ui-primitivein useOpen livedesktop preview
mobile preview
TextLines
ui-primitivein useOpen livedesktop preview
mobile preview
WhatsAppFab
fabin useOpen livedesktop preview
mobile preview
Base
layoutin usenot rendered: page shell of every demo, not a component with its own look
Primitives: where each is imported
| Primitive | File | Imported by |
|---|---|---|
| Ambient | src/components/ui/Ambient.astro | src/components/Footer.astro src/components/page/PageHero.astro src/components/sections/About.astro src/components/sections/CvSection.astro src/components/sections/Downloads.astro src/components/sections/Faq.astro src/components/sections/Gallery.astro src/components/sections/ListSection.astro src/components/sections/PageCatalogue.astro src/components/sections/PageTeasers.astro src/components/sections/Services.astro src/components/sections/Stats.astro src/components/sections/Team.astro src/components/sections/Testimonials.astro src/components/sections/VideoSection.astro src/components/sections/gallery/LogoWall.astro src/components/sections/health/HealthTeam.astro |
| Avatar | src/components/ui/Avatar.astro | src/components/sections/Team.astro src/components/sections/health/HealthTeam.astro |
| Byline | src/components/ui/Byline.astro | src/components/sections/Testimonials.astro |
| CardArt | src/components/ui/CardArt.astro | src/components/sections/services/ServiceCards.astro src/components/sections/services/ServiceList.astro src/components/sections/services/ServiceMenu.astro |
| CardCopy | src/components/ui/CardCopy.astro | src/components/sections/services/ServiceCards.astro |
| CardMedia | src/components/ui/CardMedia.astro | src/components/sections/About.astro src/components/sections/PageTeasers.astro src/components/sections/Stats.astro src/components/sections/services/ServiceBento.astro src/components/sections/services/ServiceCards.astro src/components/sections/services/ServiceIcons.astro src/components/sections/services/ServiceMenu.astro src/components/sections/services/ServiceStack.astro |
| Downloads | src/components/ui/Downloads.astro | src/components/sections/About.astro |
| HScroll | src/components/ui/HScroll.astro | src/components/SectionList.astro src/components/sections/Gallery.astro |
| Icon | src/components/ui/Icon.astro | src/components/WhatsAppFab.astro src/components/footer/FooterBase.astro src/components/hero/ClinicHeroCopy.astro src/components/hero/HeroCtas.astro src/components/hero/MakerHeroCopy.astro src/components/nav/Bar.astro src/components/nav/NavAccordion.astro src/components/nav/NavDropdown.astro src/components/page/PageHeroCopy.astro src/components/sections/About.astro src/components/sections/Downloads.astro src/components/sections/Faq.astro src/components/sections/ListSection.astro src/components/sections/PageTeasers.astro src/components/sections/Team.astro src/components/sections/Testimonials.astro src/components/sections/contact/ActionButton.astro src/components/sections/contact/ChannelCard.astro src/components/sections/contact/ChannelIcon.astro src/components/sections/contact/ColorBlockSeal.astro src/components/sections/contact/Hours.astro src/components/sections/contact/MapPanel.astro src/components/sections/contact/NumberedAction.astro src/components/sections/contact/Socials.astro src/components/sections/contact/Ticket.astro src/components/sections/faq/HelpCard.astro src/components/sections/gallery/GalleryReel.astro src/components/sections/health/BookingBand.astro src/components/sections/health/TreatmentExplorer.astro src/components/sections/services/ServiceBento.astro src/components/sections/services/ServiceCards.astro src/components/sections/services/ServiceIcons.astro src/components/sections/services/ServiceList.astro src/components/sections/services/ServiceMenu.astro src/components/sections/services/ServiceStack.astro src/effects/filmstrip/Hero.astro src/effects/kinetic-type/Hero.astro src/effects/panorama-360/Hero.astro src/effects/parallax-layers/Hero.astro |
| IconBadge | src/components/ui/IconBadge.astro | src/components/sections/About.astro src/components/sections/PageTeasers.astro src/components/sections/about/AboutText.astro src/components/sections/services/ServiceBento.astro src/components/sections/services/ServiceCards.astro src/components/sections/services/ServiceList.astro |
| ItemRows | src/components/ui/ItemRows.astro | src/components/sections/about/AboutText.astro src/components/sections/services/ServiceList.astro |
| LinkedText | src/components/ui/LinkedText.astro | src/components/page/PageHeroCopy.astro src/components/sections/About.astro src/components/sections/CvSection.astro src/components/sections/Faq.astro src/components/sections/about/AboutText.astro src/components/sections/health/Journey.astro src/components/sections/health/TreatmentExplorer.astro |
| LongCopy | src/components/ui/LongCopy.astro | src/components/sections/About.astro src/components/sections/about/AboutText.astro |
| MarqueeBand | src/components/ui/MarqueeBand.astro | src/components/SectionList.astro |
| NoBreakPhones | src/components/ui/NoBreakPhones.astro | src/components/sections/contact/ActionButton.astro |
| Picture | src/components/ui/Picture.astro | src/components/footer/Collage.astro src/components/footer/Columns.astro src/components/page/PageHero.astro src/components/page/PageRail.astro src/components/page/SpecPanel.astro src/components/sections/About.astro src/components/sections/CvSection.astro src/components/sections/Downloads.astro src/components/sections/Highlight.astro src/components/sections/contact/Backdrop.astro src/components/sections/contact/ColorBlockSeal.astro src/components/sections/contact/Editorial.astro src/components/sections/contact/Numbered.astro src/components/sections/contact/Poster.astro src/components/sections/contact/Ticket.astro src/components/sections/gallery/GalleryTile.astro src/components/sections/health/Monogram.astro src/components/sections/services/MenuCategory.astro src/components/sections/services/ServiceList.astro src/effects/card-stack/Hero.astro src/effects/clinic-scan/Hero.astro src/effects/filmstrip/Hero.astro src/effects/food-reveal/Hero.astro src/effects/kinetic-type/Hero.astro src/effects/mosaic-zoom/Hero.astro src/effects/panorama-360/Hero.astro src/effects/parallax-layers/Hero.astro src/effects/product-3d/Hero.astro src/effects/product-showcase/Hero.astro src/effects/shader-gradient/Hero.astro src/effects/shutter-blinds/Hero.astro src/effects/split-curtain/Hero.astro |
| SectionHeading | src/components/ui/SectionHeading.astro | src/components/sections/CvSection.astro src/components/sections/Downloads.astro src/components/sections/Faq.astro src/components/sections/Gallery.astro src/components/sections/Highlight.astro src/components/sections/ListSection.astro src/components/sections/PageCatalogue.astro src/components/sections/PageTeasers.astro src/components/sections/Services.astro src/components/sections/Team.astro src/components/sections/Testimonials.astro src/components/sections/VideoSection.astro src/components/sections/gallery/LogoWall.astro src/components/sections/health/HealthTeam.astro src/components/sections/health/Journey.astro src/components/sections/health/TreatmentExplorer.astro src/components/sections/services/ServiceStack.astro |
| Separator | src/components/ui/Separator.astro | src/components/page/PageHero.astro src/components/page/PageRail.astro |
| SplitWords | src/components/ui/SplitWords.astro | src/components/page/PageHeroCopy.astro src/components/sections/About.astro src/components/sections/LocationSection.astro src/components/sections/Testimonials.astro src/components/sections/about/AboutText.astro src/components/sections/contact/ColorBlock.astro src/components/sections/contact/DarkMap.astro src/components/sections/contact/Editorial.astro src/components/sections/contact/Numbered.astro src/components/sections/contact/Poster.astro src/components/sections/contact/Ticket.astro |
| Surface | src/components/ui/Surface.astro | src/components/SectionList.astro src/components/blocks.ts |
| TextLines | src/components/ui/TextLines.astro | src/components/sections/services/ServiceBento.astro src/components/sections/services/ServiceIcons.astro src/components/sections/services/ServiceList.astro src/components/sections/services/ServiceStack.astro |