# Brand components

> 7 Brand components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: BrandGuidelines, Brand loaders, BrandingProvider, ProductArtwork, ProductMark, Spotlight, Theme presets.

Source: https://docs.nasaqui.com/components/groups/brand

- [BrandGuidelines](https://docs.nasaqui.com/components/brand-guidelines): A brand guidelines page with downloadable marks on light and dark grounds, copyable palette swatches, typography, do and dont rules and social cards. It shows only assets that are passed in or already in the repo.
- [Brand loaders](https://docs.nasaqui.com/components/brand-loaders): Loading states with a brand feel: a braille spinner, a benday dot-matrix progress fill, a loader that animates around a supplied logo, and a full-screen boot splash with an honest failure state.
- [BrandingProvider](https://docs.nasaqui.com/components/branding-provider): Applies a tenant's brand colours at runtime from data (an org's settings, a white-label customer) over the active brand manifest, with readable on-brand text, a derived dark step and the tenant logo and name shared through useBranding.
- [ProductArtwork](https://docs.nasaqui.com/components/product-artwork): A product's official mark on a gradient field of its own brand colour, plus AppGlyph, a line-icon tile for modules that have no mark.
- [ProductMark](https://docs.nasaqui.com/components/product-mark): The official cube-lattice mark of a Nasaq brand, drawn from its MarkSpec, and ProductLogo (mark plus typeset name).
- [Spotlight](https://docs.nasaqui.com/components/spotlight): Featured-product banner on the product's own artwork field, with mark, name, pitch and call to action; scopes the product's brand so one primary button takes its colour.
- [Theme presets](https://docs.nasaqui.com/components/theme-presets): Named themes (light or dark plus brand colours): Nasaq, purple, rose and emerald, each dark and light. A picker with live previews, useThemePreset to apply and remember the choice, overrides for tenant colours, and ThemePresetScope to preview a region.
