← Frontic UI
shared

Explorer

  • components
  • ui
  • accordion
  • alert
  • alert-dialog
  • aspect-ratio
  • autocomplete
  • avatar
  • badge
  • breadcrumb
  • button
  • button-group
  • calendar
  • card
  • carousel
  • checkbox
  • collapsible
  • combobox
  • context-menu
  • date-field
  • date-picker
  • date-range-picker
  • dialog
  • drawer
  • dropdown-menu
  • empty
  • field
  • filter
  • form
  • hover-card
  • image
  • input
  • input-group
  • input-otp
  • item
  • kbd
  • label
  • mega-menu
  • native-select
  • navigation-menu
  • number-field
  • pagination
  • payment-card
  • popover
  • price
  • progress
  • radio-accordion
  • radio-group
  • range-calendar
  • rating
  • rating-input
  • scroll-area
  • search
  • select
  • separator
  • sheet
  • sidebar
  • skeleton
  • slider
  • spinner
  • stepper
  • swatch
  • swatch-group
  • switch
  • table
  • tabs
  • tag-group
  • tags-input
  • textarea
  • toast
  • toggle
  • toggle-group
  • tooltip
  • sections
  • account-access
  • cart-summary
  • delivery-slot
  • filters
  • footer-brand
  • footer-minimal
  • footer-rich
  • footer-trust
  • navigation-shop
  • order-summary
  • order-tracking
  • payment-method
  • product-card-basic
  • product-card-featured
  • product-card-gallery
  • product-card-horizontal
  • product-card-hover
  • product-card-minimal
  • product-options
  • promo-code
  • recent-orders
  • return-request
  • review-cards
  • review-list
  • reviews
  • search-suggestions
  • settings
  • shipping-address
  • sign-in
  • team-members
  • templates
  • cart-compact
  • cart-full
  • cart-item-compact
  • cart-item-detailed
  • cart-item-minimal
  • cart-minimal
  • category-filter
  • category-grid
  • checkout-page
  • filter-sheet
  • filter-sidebar
  • filter-toolbar
  • header-centered
  • header-checkout
  • header-shop
  • composables
  • lib
  • recipes
  • shared
  • action.json
  • calendar-day-fill.json
  • calendar-day-outside.json
  • calendar-day-today.json
  • calendar-day.json
  • calendar-month.json
  • calendar-nav-button.json
  • calendar-weekday.json
  • choice-box.json
  • choice-dot.json
  • choice.json
  • clear-link.json
  • control-box.json
  • control-line.json
  • control.json
  • copy-muted.json
  • disabled.json
  • dismiss.json
  • divider.json
  • error.json
  • focus-ring.json
  • heading.json
  • hint.json
  • indent.json
  • invalid.json
  • label.json
  • line-title.json
  • link-foreground.json
  • link-primary.json
  • link.json
  • logo.json
  • menu-item-destructive.json
  • menu-item.json
  • menu-label.json
  • menu-shortcut.json
  • meta.json
  • nav-trigger.json
  • note-positive.json
  • notice-destructive.json
  • notice-info.json
  • notice-positive.json
  • notice-warning.json
  • option-item.json
  • overlay-backdrop.json
  • overlay-modal.json
  • overlay-sheet.json
  • overlay.json
  • page-title.json
  • panel.json
  • part-description.json
  • part-title-lg.json
  • part-title.json
  • quiet-action.json
  • section-title.json
  • surface-inset.json
  • tag.json
  • thumbnail.json
  • title.json
  • total.json
  • track-fill.json
  • track-thumb.json
  • track.json
  • accordion-body.json
  • accordion-item.json
  • accordion-trigger.json
  • accordion.json
  • account-access-delete-title.json
  • alert-description.json
  • alert-dialog-content.json
  • alert-dialog-description.json
  • alert-dialog-footer.json
  • alert-dialog-header.json
  • alert-dialog-media.json
  • alert-dialog-overlay.json
  • alert-dialog-title.json
  • alert-title.json
  • alert.json
  • aspect-ratio.json
  • autocomplete-content.json
  • autocomplete-empty.json
  • autocomplete-input.json
  • autocomplete-item.json
  • autocomplete-label.json
  • autocomplete-separator.json
  • autocomplete-viewport.json
  • avatar-badge.json
  • avatar-fallback.json
  • avatar-group-count.json
  • avatar-group.json
  • avatar-image.json
  • avatar-ring.json
  • avatar.json
  • badge.json
  • breadcrumb-ellipsis.json
  • breadcrumb-item.json
  • breadcrumb-link.json
  • breadcrumb-list.json
  • breadcrumb-page.json
  • breadcrumb-separator.json
  • button-group-separator.json
  • button-group-text.json
  • button-group.json
  • button.json
  • calendar-cell-trigger.json
  • calendar-cell.json
  • calendar-grid-row.json
  • calendar-head-cell.json
  • calendar-header.json
  • calendar-heading.json
  • calendar-nav.json
  • calendar-select-label.json
  • calendar.json
  • card-action.json
  • card-content.json
  • card-description.json
  • card-footer.json
  • card-header.json
  • card-title.json
  • card.json
  • carousel-content.json
  • carousel-dot.json
  • carousel-dots.json
  • carousel-item.json
  • carousel-progress-indicator.json
  • carousel-progress.json
  • cart-full.json
  • cart-item-compact-image.json
  • cart-item-compact.json
  • cart-item-detailed-image.json
  • cart-item-detailed-line.json
  • cart-item-detailed-quantity.json
  • cart-item-detailed.json
  • cart-item-minimal-image.json
  • cart-item-minimal.json
  • cart-minimal-title.json
  • category-filter-description.json
  • category-filter-heading.json
  • category-filter.json
  • category-grid-description.json
  • category-grid-dismiss.json
  • category-grid-heading.json
  • category-grid.json
  • checkbox.json
  • checkout-page-root.json
  • checkout-page-summary-toggle.json
  • checkout-page-summary.json
  • checkout-page-total-image.json
  • collapsible-content.json
  • combobox-anchor.json
  • combobox-chevron.json
  • combobox-content.json
  • combobox-empty.json
  • combobox-input.json
  • combobox-item-indicator.json
  • combobox-item.json
  • combobox-label.json
  • combobox-search.json
  • combobox-separator.json
  • combobox-trigger.json
  • combobox-viewport.json
  • context-menu-content.json
  • context-menu-item.json
  • context-menu-label.json
  • context-menu-separator.json
  • context-menu-shortcut.json
  • context-menu-sub-content.json
  • context-menu-sub-trigger.json
  • date-field-literal.json
  • date-field-segment.json
  • date-field.json
  • date-picker-content.json
  • date-picker-trigger.json
  • date-range-picker-separator.json
  • delivery-slot-price.json
  • dialog-body.json
  • dialog-content.json
  • dialog-description.json
  • dialog-footer.json
  • dialog-header.json
  • dialog-overlay.json
  • dialog-title.json
  • drawer-body.json
  • drawer-content.json
  • drawer-description.json
  • drawer-footer.json
  • drawer-handle.json
  • drawer-header.json
  • drawer-overlay.json
  • drawer-title.json
  • dropdown-menu-content.json
  • dropdown-menu-item.json
  • dropdown-menu-label.json
  • dropdown-menu-separator.json
  • dropdown-menu-shortcut.json
  • dropdown-menu-sub-content.json
  • dropdown-menu-sub-trigger.json
  • empty-content.json
  • empty-description.json
  • empty-header.json
  • empty-media.json
  • empty-title.json
  • empty.json
  • field-content.json
  • field-description.json
  • field-error.json
  • field-group.json
  • field-label.json
  • field-legend.json
  • field-separator-content.json
  • field-separator.json
  • field-set.json
  • field.json
  • filter-field-content.json
  • filter-field-description.json
  • filter-field-label.json
  • filter-field-title.json
  • filter-field.json
  • filter-group-content.json
  • filter-list-check.json
  • filter-list-item.json
  • filter-list-root.json
  • filter-list-search.json
  • filter-list.json
  • filter-meta.json
  • filter-range-separator.json
  • filter-range.json
  • filter-rating-star.json
  • filter-rating.json
  • filter-reset-root.json
  • filter-reset.json
  • filter-sheet.json
  • filter-sidebar.json
  • filter-slider.json
  • filter-swatch-text.json
  • filter-swatch.json
  • filter-switch.json
  • filter-toolbar-bar.json
  • filter-toolbar.json
  • filter-trigger-count.json
  • filter-trigger.json
  • filters-range-to.json
  • footer-brand-title.json
  • footer-brand.json
  • footer-minimal-logo.json
  • footer-minimal.json
  • footer-rich-heading.json
  • footer-rich-legal-link.json
  • footer-rich-legal-logo.json
  • footer-rich-legal-note.json
  • footer-rich-legal.json
  • footer-rich-newsletter.json
  • footer-rich-title.json
  • footer-rich.json
  • footer-trust-icon.json
  • footer-trust.json
  • form.json
  • header-centered-logo.json
  • header-centered-nav.json
  • header-centered.json
  • header-checkout.json
  • header-shop-announcement.json
  • header-shop-bar.json
  • header-shop.json
  • hover-card-content.json
  • image-fallback.json
  • image-loading.json
  • image.json
  • input-group-addon.json
  • input-group-button.json
  • input-group-input.json
  • input-group-text.json
  • input-group-textarea.json
  • input-group.json
  • input-otp-caret.json
  • input-otp-group.json
  • input-otp-separator.json
  • input-otp-slot.json
  • input-otp.json
  • input.json
  • item-actions.json
  • item-content.json
  • item-description.json
  • item-footer.json
  • item-group.json
  • item-header.json
  • item-link.json
  • item-media.json
  • item-separator.json
  • item-title.json
  • item.json
  • kbd-group.json
  • kbd.json
  • label-root.json
  • mega-menu-content.json
  • mega-menu-item.json
  • mega-menu-list.json
  • mega-menu-trigger.json
  • mega-menu-viewport.json
  • mega-menu.json
  • native-select-chevron.json
  • native-select-option.json
  • native-select-root.json
  • native-select.json
  • navigation-menu-content.json
  • navigation-menu-indicator-arrow.json
  • navigation-menu-indicator.json
  • navigation-menu-link.json
  • navigation-menu-list.json
  • navigation-menu-trigger.json
  • navigation-menu-viewport.json
  • navigation-menu.json
  • navigation-shop-caption.json
  • navigation-shop-columns.json
  • navigation-shop-content.json
  • navigation-shop-featured-image.json
  • navigation-shop-page.json
  • navigation-shop-root.json
  • navigation-shop-trigger.json
  • navigation-shop-viewport.json
  • number-field-content.json
  • number-field-input.json
  • number-field-step.json
  • number-field.json
  • order-summary-image.json
  • order-tracking-eta.json
  • order-tracking-parcel.json
  • pagination-content.json
  • pagination-ellipsis.json
  • pagination-next.json
  • pagination-previous.json
  • pagination.json
  • payment-card-brand.json
  • payment-card-brands.json
  • popover-content.json
  • popover-description.json
  • popover-header.json
  • popover-title.json
  • price-discount.json
  • price-hint.json
  • price-row.json
  • price-strike.json
  • price.json
  • product-card-basic-image.json
  • product-card-basic.json
  • product-card-featured-description.json
  • product-card-featured-image.json
  • product-card-gallery-badge.json
  • product-card-gallery-image.json
  • product-card-gallery-title.json
  • product-card-horizontal-image.json
  • product-card-horizontal.json
  • product-card-hover-image.json
  • product-card-minimal-image.json
  • product-options-image.json
  • progress-indicator.json
  • progress.json
  • radio-accordion-content.json
  • radio-accordion-indicator.json
  • radio-accordion-item.json
  • radio-accordion-trigger.json
  • radio-accordion.json
  • radio-group-item.json
  • radio-group.json
  • range-calendar-cell-trigger.json
  • range-calendar-cell.json
  • range-calendar-grid-row.json
  • range-calendar-head-cell.json
  • range-calendar-header.json
  • range-calendar-heading.json
  • range-calendar-nav.json
  • range-calendar.json
  • rating-count.json
  • rating-dot.json
  • rating-icon.json
  • rating-input-item.json
  • rating-input.json
  • rating-meta.json
  • rating-stars.json
  • rating-value.json
  • rating.json
  • return-request-option.json
  • review-cards-author.json
  • review-cards-average.json
  • review-cards-content.json
  • review-cards-heading.json
  • review-cards-percent.json
  • review-cards-star.json
  • review-cards-summary.json
  • review-cards.json
  • review-list.json
  • reviews-count.json
  • reviews-stars.json
  • reviews-verified.json
  • scroll-area-scrollbar.json
  • scroll-area-thumb.json
  • scroll-area-viewport.json
  • search-cancel.json
  • search-empty.json
  • search-group-heading.json
  • search-group.json
  • search-highlight.json
  • search-input-clear.json
  • search-input.json
  • search-item.json
  • search-loading-label.json
  • search-loading-row.json
  • search-loading.json
  • search-overlay-backdrop.json
  • search-overlay.json
  • search-query-term.json
  • search-query.json
  • search-results-viewport.json
  • search-results.json
  • search-suggestions-image.json
  • search-suggestions-pick.json
  • search-tag.json
  • select-chevron.json
  • select-content.json
  • select-group.json
  • select-item-indicator.json
  • select-item.json
  • select-label.json
  • select-scroll-button.json
  • select-separator.json
  • select-trigger.json
  • select-value-placeholder.json
  • select-value.json
  • separator.json
  • sheet-body.json
  • sheet-content.json
  • sheet-description.json
  • sheet-footer.json
  • sheet-header.json
  • sheet-overlay.json
  • sheet-title.json
  • sidebar-action.json
  • sidebar-container.json
  • sidebar-content.json
  • sidebar-footer.json
  • sidebar-group-content.json
  • sidebar-group-label.json
  • sidebar-group.json
  • sidebar-header.json
  • sidebar-input.json
  • sidebar-inset.json
  • sidebar-menu-badge.json
  • sidebar-menu-button.json
  • sidebar-menu-skeleton.json
  • sidebar-menu-sub-button.json
  • sidebar-menu-sub.json
  • sidebar-menu.json
  • sidebar-rail-line.json
  • sidebar-rail.json
  • sidebar-separator.json
  • sidebar-size.json
  • sidebar-wrapper.json
  • sidebar.json
  • skeleton.json
  • slider-control.json
  • slider-legend.json
  • slider-range.json
  • slider-thumb.json
  • slider-track.json
  • spinner.json
  • stepper-description.json
  • stepper-indicator.json
  • stepper-item.json
  • stepper-separator-fill.json
  • stepper-separator-root.json
  • stepper-separator.json
  • stepper-status.json
  • stepper-title.json
  • stepper-trigger.json
  • stepper.json
  • swatch-fallback.json
  • swatch-group.json
  • swatch-image.json
  • swatch-label.json
  • swatch-strike-halo.json
  • swatch-strike.json
  • swatch.json
  • switch-thumb.json
  • switch.json
  • table-caption.json
  • table-cell.json
  • table-empty.json
  • table-footer.json
  • table-head.json
  • table-row.json
  • table.json
  • tabs-content.json
  • tabs-list.json
  • tabs-trigger-indicator.json
  • tabs-trigger.json
  • tabs.json
  • tag-group-item-delete.json
  • tag-group-item.json
  • tag-group.json
  • tags-input-input.json
  • tags-input-item-delete.json
  • tags-input-item-text.json
  • tags-input-item.json
  • tags-input.json
  • textarea.json
  • toast-action.json
  • toast-cancel.json
  • toast-content.json
  • toast-description.json
  • toast-title.json
  • toast.json
  • toggle-group-item.json
  • toggle-group.json
  • toggle.json
  • tooltip-arrow.json
  • tooltip-content.json
  • skills
  • .mcp.json
  • AGENTS.md
  • components.json
  • DESIGN.md
  • frontic.css
  • README.md
›shared

recipes/shared

The families and shared states the component trees extend, one JSON file each. A recipe names tokens only, so a project’s brand restyles it.

62 of 62
  • action.json
  • calendar-day.json
  • calendar-day-fill.json
  • calendar-day-outside.json
  • calendar-day-today.json
  • calendar-month.json
  • calendar-nav-button.json
  • calendar-weekday.json
  • choice.json
  • choice-box.json
  • choice-dot.json
  • clear-link.json
  • control.json
  • control-box.json
  • control-line.json
  • copy-muted.json
  • disabled.json
  • dismiss.json
  • divider.json
  • error.json
  • focus-ring.json
  • heading.json
  • hint.json
  • indent.json
  • invalid.json
  • label.json
  • line-title.json
  • link.json
  • link-foreground.json
  • link-primary.json
  • logo.json
  • menu-item.json
  • menu-item-destructive.json
  • menu-label.json
  • menu-shortcut.json
  • meta.json
  • nav-trigger.json
  • note-positive.json
  • notice-destructive.json
  • notice-info.json
  • notice-positive.json
  • notice-warning.json
  • option-item.json
  • overlay.json
  • overlay-backdrop.json
  • overlay-modal.json
  • overlay-sheet.json
  • page-title.json
  • panel.json
  • part-description.json
  • part-title.json
  • part-title-lg.json
  • quiet-action.json
  • section-title.json
  • surface-inset.json
  • tag.json
  • thumbnail.json
  • title.json
  • total.json
  • track.json
  • track-fill.json
  • track-thumb.json