> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frontic.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Frontic UI

> [!NOTE]
>
> **Developer Preview** - Frontic UI is currently in developer preview. We're
> actively looking for feedback from early users and will be improving it
> significantly in the coming weeks. [Share your
> feedback](mailto:support@frontic.com).

Frontic UI is a collection of ready-to-use, customizable Vue components designed specifically for Frontic storefronts. Instead of building common e-commerce UI patterns from scratch, you get pre-built components that are already wired up to work with your Frontic data - so you can focus on design and user experience rather than plumbing.

## What to expect

> [card] Pre-built Components
>
> Common storefront patterns like product cards, filter sidebars, sort dropdowns, and pagination - ready to drop into your templates.

> [card] Works with Composables
>
> Designed to integrate seamlessly with Frontic composables like `useFronticSearch` and `useFronticBlock`, so data flows without boilerplate.

> [card] Fully Customizable
>
> Every component is yours to own and modify. They live in your project directory and can be styled and extended to match your brand.

> [card] Auto-imported
>
> When using the [Nuxt Module](https://docs.frontic.com/reference/nuxt-module.md), Frontic UI components are auto-imported - no manual import statements needed.

## How it works

Frontic UI components are scaffolded into your project (by default at `@/components/ui`) and auto-imported by the [Nuxt Module](https://docs.frontic.com/reference/nuxt-module.md). This means:

* **You own the code** - components live in your repo, not hidden inside a package. Customize anything.
* **No lock-in** - since they're regular Vue components, you can replace or remove them at any time.
* **Zero config** - the Nuxt module handles auto-import and optional component prefixing out of the box.

```ts nuxt.config.ts theme={"theme":"css-variables"}
export default defineNuxtConfig({
  modules: ['@frontic/nuxt'],
  frontic: {
    // Optional: prefix components (e.g., Button.vue → <FuiButton />)
    componentsPrefix: 'Fui',
    // Optional: custom directory
    componentDir: '@/components/ui',
  },
})
```

## Coming soon

We're working on the first set of components and will be publishing detailed documentation as they become available. Planned areas include:

* **Search & Filtering** - filter sidebars, active filter tags, sort dropdowns
* **Product Display** - product cards, image galleries, variant selectors
* **Pagination** - load more buttons, page navigation
* **Context Switching** - locale and region selectors

> [!NOTE]
>
> Want early access or have specific component requests? [Get in touch](mailto:support@frontic.com) - we're shaping the component library based on real storefront needs.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.