Components from @lockii/site-sdk follow the site theme. Use them for type, buttons, cards, and chrome. The host still owns checkout, calendars, and overlay open and close.
SiteContainer sets the shared content width.
<SiteContainer>
<SiteHeading level={2}>{headline}</SiteHeading>
</SiteContainer>SiteHeading renders h1 through h5. level is the heading rank. size changes the visual size. color is a palette key (lightest, light, accent, dark, darkest) or empty to inherit the theme.
SiteText is theme body copy. variant is 1 to 4. maxWidth is narrow, normal, or none. color uses the same palette keys.
SiteRichText renders HTML from fields.richText.
SiteButton follows a SiteAction. variant is primary or outline. size is sm, md, or lg. backgroundColor and textColor override the theme button colors with a palette key.
<SiteButton action={cta} variant="primary">{cta.label}</SiteButton>SiteImage loads a catalog image by id. Pair it with an image field.
<SiteImage
alt="Fleet"
imageId={siteImageSrc(photo)}
overlay={siteImageOverlay(photo)}
/>SiteIcon draws an icon from fields.icon. SiteCard is a themed surface. SiteAvailabilityBadge prints a product or location availability label.
<SiteAvailabilityBadge availability={product.availability} />SiteProductCard renders one SiteProduct with the theme card: photo, name, price, and booking button.
<SiteProductCard product={product} />SiteProductCards lays out a list of products. SiteProductCheckout is the product booking panel. SiteLocationCard is one location. SiteLocationSearch and SiteRentalSearch are the location and hire search bars. SiteCollectionCards lists collections. SiteReviews prints company reviews. SiteFilterBar is the catalog filter row.
These read the theme and the open page. Pass catalog rows from the hooks in Catalog data.
Use these inside a cart.drawer part. Checkout math and the Stripe handoff stay in Lockii.
| Component | Renders |
|---|---|
CartDrawerContents |
Title, lines, and footer in the default order |
CartTitle |
Drawer title |
CartFilters |
Date and location filters |
CartLineItems |
Lines with photo, quantity, and price |
CartEmpty |
Empty-cart message |
CartSubtotal |
Subtotal row |
CartCheckoutButton |
Checkout button |
SiteCartButton |
Header control that opens the cart |
<CartDrawerContents />SiteHeaderLayout places brand, nav, search, account, and cart on a header part.
SiteNavLinks renders the site nav. Closing the menu stays with the host.
SiteMenuContents is the mobile-menu title, links, and call to action.
SiteDateTriggerLabel is the label and selected range inside the date button.
<SiteHeaderLayout />