Hlc-layer-ui NPM

HLC Layer UI

A collection of Vue 3 components for Nuxt 3 applications, including a Button component and a Hero Slider pattern with Prismic CMS integration.

Installation

# Using bun
bun add hlc-layer-ui

# Using npm
npm install hlc-layer-ui

# Using yarn
yarn add hlc-layer-ui

Setup

Add hlc-layer-ui to the extends array in your nuxt.config.ts:

export default defineNuxtConfig({
  extends: ['hlc-layer-ui']
})

Components

Button Component

<template>
  <Button variant="primary">Click me</Button>
  
  <!-- With loading state -->
  <Button loading>Loading...</Button>
  
  <!-- Different variants -->
  <Button variant="secondary">Secondary</Button>
  <Button variant="danger">Danger</Button>
  
  <!-- Different sizes -->
  <Button size="small">Small</Button>
  <Button size="large">Large</Button>
</template>

Button Props

Name	Type	Default	Description
variant	string	'primary'	Button style: 'primary', 'secondary', 'danger'
size	string	'medium'	Button size: 'small', 'medium', 'large'
loading	boolean	false	Shows a loading spinner
disabled	boolean	false	Disables the button

Hero Slider Pattern

A modern, responsive hero slider with Prismic CMS integration, perfect for showcasing featured content, promotions, and announcements.

<template>
  <HeroSlider :data="sliderData" />
</template>

<script setup lang="ts">
import type { SliderData } from 'hlc-layer-ui'

const sliderData: SliderData = {
  primary: {
    enable_auto_rotation: true,
    slider_full_width: true,
    hide_content_on_mobile: false
  },
  items: [
    {
      hero_image_desktop: {
        dimensions: { width: 3840, height: 1410 },
        alt: "Slide Example",
        url: "your-image-url.jpg",
        // ... other Prismic image properties
      },
      hero_image_mobile: {
        // ... mobile image properties
      },
      enable_slide: true,
      schedule_to: "2025-02-14T22:59:00+0000",
      hero_helper_text: "FEATURED",
      hero_helper_text_color: "#D8A19A",
      hero_title: "Your Slide Title",
      hero_content: [
        {
          type: "paragraph",
          text: "Your slide content here.",
          spans: [],
          direction: "ltr"
        }
      ],
      hero_primary_cta_text: "Learn More",
      hero_primary_cta_link: {
        link_type: "Document",
        uid: "your-page"
      },
      hero_slider_theme: false,
      hero_content_mobile_background_color: "#F0D2CF"
    }
    // ... more slides
  ],
  id: "your-slider-id",
  slice_type: "hero_slider"
}
</script>

Hero Slider Features

Responsive design with mobile/desktop images
Auto-rotation support
Full-width option
Mobile content visibility toggle
Primary and secondary CTAs
Theme variations (light/dark)
Scheduling support
Rich text content with formatting

Best Practices

Keep the number of slides between 3-5 for optimal user experience
Ensure images are optimized and properly sized (desktop: 3840x1410px, mobile: 1242x1197px recommended)
Use clear, action-oriented CTA text
Keep content concise and focused
Test slider behavior across different screen sizes
Consider accessibility by providing meaningful alt text for images