Components

Peak Components Overview

Hey dev! 👋

When building out your admin frontend or themes with Peak, you get to work with three main types of components — and the best part? You’re totally free to use whichever fits your needs best.

1. Built-in Admin Components

Peak includes a solid set of ready-made admin components like widgets, cards, alerts, and more. These are designed specifically for the admin interface and live inside:

peak/resources/js/Components/Admin

You can import and use them easily via the alias:

import Card from '@peak/Components/Admin/Card'

These components help keep your admin UI consistent and neat, saving you tons of development time.

2. Headless UI Components

For quick and accessible UI primitives, Peak uses Headless UI for Vue — a fantastic library that provides unstyled, fully accessible components like menus, switches, listboxes, radio groups, and dialogs.

Here’s a simple example of how you can use the Headless UI <Switch> component:

<template>
  <div class="py-16">
    <Switch
      v-model="enabled"
      :class="enabled ? 'bg-teal-900' : 'bg-teal-700'"
      class="relative inline-flex h-[38px] w-[74px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75"
    >
      <span class="sr-only">Use setting</span>
      <span
        aria-hidden="true"
        :class="enabled ? 'translate-x-9' : 'translate-x-0'"
        class="pointer-events-none inline-block h-[34px] w-[34px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
      />
    </Switch>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Switch } from '@headlessui/vue'

const enabled = ref(false)
</script>

For more details and advanced usage, check out the Headless UI Vue docs.

3. Theme Components

Your themes come with their own reusable components too! These live inside your active theme folder, for example:

resources/js/Themes/Breeze/Components

You can import them like this:

import AlertInfo from '@/Themes/Breeze/Components/Alerts/AlertInfo'

This keeps theme-specific UI nicely scoped and easy to maintain.

Bonus: Using ShadCN Components with Peak

If you like ShadCN’s beautiful, accessible Vue components, great news! You can use them alongside Peak.

When you add a ShadCN component via their CLI, it’s automatically added to your app’s resources/js/Components folder. Here’s an example command:

npx shadcn-ui add button

Then you can import it anywhere like this:

import Button from '@/Components/Button.vue'

Mix and match built-in, headless, theme, and ShadCN components freely to build your perfect admin and theme UI.

Quick Recap

Component Type	Location	Import Alias / Path	Purpose
Built-in Admin	`peak/resources/js/Components/Admin`	`@peak/Components/Admin/*`	Admin widgets, cards, alerts, etc.
Headless UI for Vue	Installed dependency	Import from `'@headlessui/vue'`	Accessible, unstyled UI primitives
Theme Components	`resources/js/Themes/{ThemeName}/Components`	`@/Themes/{ThemeName}/Components/*`	Theme-specific reusable UI parts
ShadCN UI Components	`resources/js/Components`	`@/Components/*`	Beautiful prebuilt Vue components

If you want me to help you set up any of these or provide examples for specific components, just let me know! 😄

Would you like me to add instructions on installing Headless UI or ShadCN too?

Peak Components Overview​

1. Built-in Admin Components​

2. Headless UI Components​

3. Theme Components​

Bonus: Using ShadCN Components with Peak​

Quick Recap​