@specificlab/ui

@specificlab/ui

A Vue 3 UI component library based on TailwindCSS.

Installation

# npm
npm install @specificlab/ui

# pnpm
pnpm add @specificlab/ui

# yarn
yarn add @specificlab/ui

Usage

Global Registration

import { createApp } from 'vue'
import SpecificUI from '@specificlab/ui'
import '@specificlab/ui/dist/style.css'

const app = createApp(App)
app.use(SpecificUI)
app.mount('#app')

On-Demand Import

// 1. Import component
import { AgentBoard } from '@specificlab/ui'
import '@specificlab/ui/dist/style.css'

// 2. Register in your component
export default {
  components: {
    [AgentBoard.name]: AgentBoard
  }
}

Or in setup script:

<script setup lang="ts">
import { AgentBoard } from '@specificlab/ui'
import '@specificlab/ui/dist/style.css'
</script>

<template>
  <agent-board
    title="Agent Name"
    status="INACTIVE"
  />
</template>

Components

AgentBoard

A card component for displaying AI agent status and controls.

Props

Events

Slots

AgentStepTimeline Slots

AgentDetailLayout

The layout component requires a parent container with a defined height. Example:

<div style="height: 100vh;">
  <agent-detail-layout>
    <!-- content -->
  </agent-detail-layout>
</div>

Or using CSS:

.parent-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

AgentCompletedCard

Slots

Customization

You can customize the theme when installing:

app.use(SpecificUI, {
  theme: {
    AgentBoard: {
      // Custom theme options
      inactiveGradientStart: '#93a8ff',
      inactiveGradientEnd: '#7490ff'
    }
  }
})

License

MIT