Installation

Choose your path

1. Start from a template (recommended)

If you want the fastest path to a working app, start with a template. Some templates include full-stack foundations so you can move from setup to customization quickly.

• Browse templates: Templates

2. Install individual components

If you already have a project and only need specific blocks, install components directly from this registry.

Prerequisites

A Nuxt project with shadcn-vue already configured. If you haven't set up shadcn-vue yet, follow the official guide.

Install a component

Use the shadcn-vue CLI to add components from this registry:

pnpmnpmyarnbun
pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-messages.json"
Copy

This installs the message list component and its registry dependencies into your project.

Usage

Import and use the component in your app:

Copy<script setup lang="ts">
import { ChatMessages } from '@/components/chat-messages'
</script>

<template>
  <ChatMessages :messages="messages" :status="status" should-auto-scroll />
</template>

Available components

Browse Components to find all available blocks with demos and API references.