> ## 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

<Info>
  **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).
</Info>

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

<CardGroup cols={2}>
  <Card title="Pre-built Components" icon="puzzle-piece">
    Common storefront patterns like product cards, filter sidebars, sort dropdowns, and pagination — ready to drop into your templates.
  </Card>

  <Card title="Works with Composables" icon="plug">
    Designed to integrate seamlessly with Frontic composables like `useFronticSearch` and `useFronticBlock`, so data flows without boilerplate.
  </Card>

  <Card title="Fully Customizable" icon="paintbrush">
    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>

  <Card title="Auto-imported" icon="wand-magic-sparkles">
    When using the [Nuxt Module](/reference/nuxt-module), Frontic UI components are auto-imported — no manual import statements needed.
  </Card>
</CardGroup>

## How it works

Frontic UI components are scaffolded into your project (by default at `@/components/ui`) and auto-imported by the [Nuxt Module](/reference/nuxt-module). 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.
</Note>