Components

Design-system components

Generic building blocks this design adds on top of the library.

Library components

From @wikicasa-dev/components. Use them as black boxes, as their docs describe.

Actions

• BaseButtonThe standard button: primary/secondary/danger CTAs, light and text-style buttons, selectable chips, loading state.

Charts

• DoughnutChartChart.js doughnut chart for shares of a whole, e.g. a mortgage split into capital and interest.
• LineChartChart.js line chart (category, linear or time x-axis) for trends such as average €/m² over time.

Feedback

• BaseAlertInline, static message box (success/info, error, dark) shown in the page flow, e.g. under a form.
• BaseBadgeSmall non-interactive label or pill: listing status, "Vetrina", Premium/Gold tiers, tags and counters.
• BaseSnackbarTemporary toast notification that slides in at the page edge, auto-closes with a progress bar, swipe to dismiss.

Forms

• AccessibleSelectSingle-choice select field (combobox + listbox) with floating label, validation state and keyboard support.
• BaseInputSingle-line text field with floating label, validation state, feedback messages and optional icons.
• BaseSliderDual-thumb range slider with linked Min/Max number fields, linear or logarithmic.
• BaseTextareaMulti-line text field with floating label and validation state, matching BaseInput's look.
• BaseToggleOn/off switch bound to a boolean, with a label on the left or right.
• BaseUploadFileDashed, field-shaped file picker with a floating label that emits the chosen File.
• CheckboxBtnSingle accessible checkbox with a clickable text label, bound to a boolean.
• ClearableAutocompleteUnstyled search-as-you-type input with an inline clear button, loading slot and race-safe async results.
• SimpleSliderSingle-thumb draggable slider bound with v-model to one number (linear or logarithmic scale).
• BaseFloatingLabelBuilding block: only to compose something missingThe floating field label used by BaseInput and BaseTextarea, for labelling custom field-like controls.
• BaseAutocompleteLegacy: don't useLegacy search-as-you-type form field (BaseInput look) replaced by ClearableAutocomplete; wikicasa-nuxt no longer uses it.

Layout

• BaseAccordionAccessible accordion root: a stack of collapsible sections (FAQs, grouped filters), one or many open at a time.
• BaseAccordionItemOne collapsible section of BaseAccordion: a header with title and rotating arrow, plus the content.
• BaseCardImage + body card with fixed layouts (default row, mini, vertical, news) for listings, agencies and articles.
• AccordionContentPrimitiveBuilding block: only to compose something missingUnstyled collapsible panel of a primitive accordion item; hidden while the item is closed.
• AccordionHeaderPrimitiveBuilding block: only to compose something missingUnstyled heading element (h3 by default) wrapping the trigger of a primitive accordion item.
• AccordionItemPrimitiveBuilding block: only to compose something missingUnstyled accordion section wrapper, for custom accordion items composed from the Accordion*Primitive parts.
• AccordionTriggerPrimitiveBuilding block: only to compose something missingUnstyled button that opens and closes a primitive accordion item.
• CardDescriptionPrimitiveBuilding block: only to compose something missingThe body cell (.card-body) of a CardRootPrimitive composition, with the card's standard padding.
• CardImagePrimitiveBuilding block: only to compose something missingThe image cell (.card-img) of a CardRootPrimitive composition, sized by the card type.
• CardRootPrimitiveBuilding block: only to compose something missingCard shell (rounded, shadowed root with the BaseCard layouts) to compose with CardImagePrimitive and CardDescriptionPrimitive.

Loading

• BaseShimmerLoaderAnimated skeleton block (lavender box with a moving shine) that stands in for content while it loads.
• ShimmerMultiLineStack of BaseShimmerLoader lines, a quick skeleton for a paragraph or a card description.
• StaticSpinnerSmall rotating SVG ring (24px) for inline waits, e.g. inside a button while a request runs.
• ProgressIndicatorPrimitiveBuilding block: only to compose something missingUnstyled fill element of a progress bar; must sit inside ProgressRootPrimitive, which you size and position yourself.
• ProgressRootPrimitiveBuilding block: only to compose something missingUnstyled accessible progress bar root (role="progressbar"); compose with ProgressIndicatorPrimitive and style it yourself.

Media

• SwiperCarouselReady-made Swiper carousel for slides or an image gallery, with optional arrows, bullets, autoplay and thumbnails.
• SwiperSlideOne slide of a SwiperCarousel or SwiperPrimitive track; holds any content (card, image, banner).
• SwiperNavigationPrimitiveBuilding block: only to compose something missingSwiper prev/next arrows for a SwiperRootPrimitive carousel.
• SwiperPaginationPrimitiveBuilding block: only to compose something missingPagination (bullets or "2 / 8" fraction) for a SwiperRootPrimitive carousel.
• SwiperPrimitiveBuilding block: only to compose something missingThe slide track (.swiper-wrapper) of a SwiperRootPrimitive carousel; holds the slides and emits click.
• SwiperRootPrimitiveBuilding block: only to compose something missingRoot of the composable Swiper carousel; owns the Swiper instance, deferred image loading and the reveal.
• SwiperSlideImagePrimitiveBuilding block: only to compose something missingA slide holding one image, with optional deferred loading driven by SwiperRootPrimitive or SwiperThumbnailPrimitive.
• SwiperThumbnailPrimitiveBuilding block: only to compose something missingThumbnail strip linked to a SwiperRootPrimitive carousel; tapping a thumbnail shows that slide.

Navigation

• BaseBreadcrumbBreadcrumb trail of links separated by arrows, e.g. Home › Vendita › Milano › Navigli.
• BasePaginationPage navigator for result lists: prev/next arrows, first/last page, siblings and ellipses, or a compact prev/next form.
• BaseTabsAccessible tabs (root of the compound set): switches between panels with an animated underline indicator.
• BaseTabsContentThe panel of a BaseTabs set, shown while the trigger with the same value is active.
• BaseTabsIndicatorAnimated underline that slides under the active BaseTabsTrigger.
• BaseTabsListRow that holds the BaseTabsTrigger tabs (and the BaseTabsIndicator) inside BaseTabs.
• BaseTabsTriggerA single tab button inside BaseTabsList; activates the BaseTabsContent with the same value.
• BaseTabLegacy: don't useOne tab (header plus panel content) inside the legacy BaseTabView.
• BaseTabViewLegacy: don't useFirst-generation tabs container driven by BaseTab children and an index-based v-model.

Overlays

• BaseDropDownToggle button with an attached dropdown panel for menus, link lists and custom filter content.
• BaseModalDialog over a dimmed backdrop: centered card on desktop, bottom sheet on mobile, with header/body/footer slots.
• BaseTooltipCSS hover tooltip with an arrow, opening below a trigger (e.g. an info icon) to explain a value.

Selection

• BaseComplexToggleTwo-option segmented toggle (pill with a sliding highlight) that picks one of two labelled choices.
• CheckboxButtonGroupGroup of CheckboxBtn bound to one array of selected values, with an optional "select all" reset option.
• RadioButtonGroupAccessible single-choice radio group bound to one value, rendering items from a list or from its slot.
• RadioButtonItemClassic radio button (circle + clickable label) used inside RadioButtonGroup.
• CheckboxGroupItemPrimitiveBuilding block: only to compose something missingUnstyled checkbox item (reka-ui CheckboxRoot) for building custom chips or tiles inside CheckboxGroupPrimitive.
• CheckboxGroupPrimitiveBuilding block: only to compose something missingUnstyled multi-select group root (reka-ui CheckboxGroupRoot) holding an array of checked values.
• RadioGroupItemPrimitiveBuilding block: only to compose something missingUnstyled radio option (reka-ui RadioGroupItem) for custom segmented buttons or cards inside RadioButtonGroup.
• SelectItemBuilding block: only to compose something missingList row (`<li>`) with an active/highlighted state, for building option lists inside BaseDropDown.
• CheckboxGroupLegacy: don't useOlder checkbox list driven by checkboxData objects, emitting the checked objects, with optional reset checkbox.
• RadioButtonLegacy: don't useOlder standalone radio button with a boolean model, used by RadioGroup; not keyboard accessible.
• RadioGroupLegacy: don't useOlder radio list driven by radioValues objects, emitting the selected object.

Utilities

• IntersectionObserverProviderShares one IntersectionObserver with its IntersectionObserverTarget children to lazy-render content or detect scroll-into-view.
• IntersectionObserverTargetElement watched by the surrounding IntersectionObserverProvider; exposes isVisible to its slot.
• IntersectionObservableLegacy: don't useOlder element wrapper registered with the observer passed in from IntersectionObserver's #observer slot.
• IntersectionObserverLegacy: don't useOlder lazy-render helper exposing one observer and a single shared isVisible flag through its #observer slot.