Introduction

The Cubby Storefront components (cubby-facility, cubby-search, and so on) are Web Components built with Lit. Their markup lives inside a shadow DOM, which means the elements inside a component are not reachable with ordinary CSS selectors and are not affected by your page's global styles.

To let you theme them, each component exposes a set of CSS Shadow Parts. A part is a named hook on an internal element (declared with the part="..." attribute) that you can target from your own stylesheet using the ::part() pseudo-element. This page lists the parts exposed by every public storefront component.

Styling a part

Target a part with <tag-name>::part(<part-name>) from any stylesheet on the host page. For example, to round the corners of the pricing cards rendered by cubby-facility and restyle their call-to-action button:

cubby-facility::part(card) {
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

cubby-facility::part(card-button) {
  background: #1e88e5;
  color: #fff;
}

Parts also support pseudo-classes and can be combined, so cubby-facility::part(tab):hover and cubby-search::part(result):first-child both work.

Forwarded parts

Some components render other components inside their shadow DOM — for instance, each card inside cubby-facility is itself a component. Those inner parts are forwarded up to the outer element (via exportparts), so you style them on the top-level tag exactly like the element's own parts. You do not need to reference the internal element.

The forwarded part sets — the pricing group card parts and the pricing tier parts — are documented once at the bottom of this page and referenced from the components that expose them.

CSS variables

Alongside the per-element parts, every storefront component reads a set of global CSS custom properties prefixed --cubby-. These are the coarse theming knobs: colors, border and shape, and typography. Set them on a component or on any ancestor (for example :root) and they cascade into every component's shadow DOM at once.

Use variables to retheme the whole storefront consistently, and reach for parts when you need to tweak one specific element. Each variable is read with a fallback — var(--cubby-primary-color, <default>) — so any value you set wins over the theme configured in the storefront builder.

:root {
  --cubby-primary-color: #1e88e5;
  --cubby-surface-color: #ffffff;
  --cubby-radius: 16px;
  --cubby-body-font: 'Inter';
}

Colors

Variable	Default	Description
`--cubby-primary-color`	`#000000`	The primary brand color (buttons, accents).
`--cubby-on-primary-color`	`#ffffff`	Text/icon color shown on top of the primary color.
`--cubby-secondary-color`	`#000000`	The secondary color.
`--cubby-on-secondary-color`	`#ffffff`	Text/icon color shown on top of the secondary color.
`--cubby-surface-color`	`#ffffff`	Component surface/background color.
`--cubby-on-surface-color`	`#000000`	Text/icon color shown on top of the surface color.
`--cubby-success-color`	`#007F5F`	Success state color.
`--cubby-error-color`	`#D72C0D`	Error state color.
`--cubby-outline-color`	`#aaaaaa`	Border/outline color.
`--cubby-divider-color`	`#aaaaaa`	Divider line color.
`--cubby-shadow-color`	`#000000`	Color used for component shadows.

The on-* colors are automatically derived for contrast from the matching base color, so you usually only need to set the base color — but you can override an on-* color individually when you want to.

Border & shape

Variable	Default	Description
`--cubby-outline-width`	`0px`	Width of element outlines/borders.
`--cubby-divider-width`	`1px`	Width of divider lines.
`--cubby-shadow`	`none`	The full `box-shadow` applied to raised surfaces.
`--cubby-radius`	`8px`	Corner radius for cards, inputs, and buttons.
`--cubby-density`	`8px`	Inner padding density of components.
`--cubby-spacing`	`8px`	Gap/spacing between items in a layout.

Typography

Variable	Default	Description
`--cubby-body-font`	`inherit`	Font family for body text.
`--cubby-heading-font`	`inherit`	Font family for headings. Falls back to the body font when unset.

The components append , sans-serif, system-ui to whatever font you provide, so a single family name (e.g. 'Inter') is enough — make sure the font itself is loaded on your page. --cubby-success-color, --cubby-error-color, --cubby-divider-color, and --cubby-divider-width are not surfaced in the storefront builder UI but can still be overridden here via CSS.

Facility

<cubby-facility> displays the pricing groups for a single facility, optionally split into collection tabs. In addition to its own parts below, it forwards the full pricing group card parts and pricing tier parts for the cards it renders.

Part	Description
`tabs`	The collection tab-navigation container.
`tab`	An individual collection tab.
`card`	A pricing group card.

cubby-facility::part(tab) { font-weight: 600; }
cubby-facility::part(card-price-amount) { color: #1e88e5; }

Facility Info

<cubby-facility-info> shows a facility's location, map, and office-hours schedule.

Part	Description
`card-title`	The facility title heading.
`card-body`	A body text block (address, description, etc.).
`card-map`	The embedded map container.
`card-schedule-name`	The schedule label (e.g. “Office hours”).
`card-schedule-hours`	The schedule hours text.

The title and body also carry a per-field variant part named after their source, e.g. card-name or card-address, so you can target an individual field with cubby-facility-info::part(card-address).

Portfolio

<cubby-portfolio> renders a grid of facility cards linking to each facility.

Part	Description
`card`	A facility card.
`card-image`	The facility card image.
`card-title`	The facility card title.
`card-body`	The facility card body.

Each body field is additionally exposed as card-body-<source> (for example card-body-address), letting you style one field at a time.

Checkout

<cubby-checkout> renders the order summary and payment form for a reservation or rental.

Part	Description
`summary-container`	The wrapper around the order summary.
`summary`	The order summary block.
`features`	The features list.
`feature`	A single feature row.
`feature-icon`	The icon of a feature row.
`form-container`	The wrapper around the checkout form.
`form`	The checkout form.
`reserve-button`	The reserve call-to-action button.
`pay-button`	The pay call-to-action button.

Search

<cubby-search> renders a multi-facility search experience with a form, a map, and a list of results. It also forwards the pricing tier parts for the tiers shown on a result.

Part	Description
`form`	The search form.
`map`	The results map container.
`results`	The results list container.
`result`	A single search result.
`result-image`	A result's image.
`result-pricing-group`	A result's pricing group block.
`result-action`	A result's action button (base part shared by the three buttons below).
`rent-button`	A result's Rent action button.
`reserve-button`	A result's Reserve action button.
`waitlist-button`	A result's Join waitlist action button.
`result-view-all-button`	A result's View all button.
`search-button`	The search-submit button.

result-action is applied to every action button alongside its specific part, so cubby-search::part(result-action) styles all three at once while cubby-search::part(rent-button) targets just one.

Contact Form

<cubby-contact-form> renders a contact form for a facility. It does not expose any CSS parts at this time — there is currently no supported way to style its internals.

Pricing cards & tiers

The two part sets below are rendered by internal components and forwarded to the public components that use them. Style them on the outer tag — e.g. cubby-facility::part(card-price-amount). See each component above for which sets it forwards.

Pricing group card parts

Forwarded by Facility.

Part	Description
`card-image`	The card image.
`card-body`	The card body.
`card-title`	The card title.
`card-description`	The card description.
`card-features`	The features list.
`card-feature`	A single feature row.
`card-feature-icon`	The icon of a feature row.
`card-actions`	The actions container.
`card-price`	The price container.
`card-price-strike-amount`	The struck-through original price.
`card-price-amount`	The price amount.
`card-price-period`	The price period (e.g. `/mo`).
`card-alerts`	The alerts container.
`card-alert`	A single alert.
`card-button`	The call-to-action button.
`pricing-group_price_description`	The supplementary price description text.

Pricing tier parts

Forwarded by Facility and Search.

Part	Description
`pricing-tier`	A single pricing tier.
`pricing-tier_name`	The tier name.
`pricing-tier_rate`	The tier rate.
`pricing-tier_benefits`	The tier benefits list.
`pricing-tier_benefit`	A single tier benefit.
`pricing-tiers_rent-button`	The tier's rent button.
`pricing-tier_details`	The tier details block.