ContentVeda UI

✨ Components

| Component | Description | |---|---| | Banner | Full-bleed hero banner — image/video background, title, CTA | | AnnouncementBar | Slim promotional bar with customisable colours | | GridBanner | Responsive CSS grid of banner cards | | MediaGrid | Editorial 2-column layout at 21:9 aspect ratio | | RowScrollable | Horizontally scrollable card row with snap-scroll | | SlidingBanner | Slider with 13 transition effects & canvas backgrounds | | AlternatingSlider | Multi-column slider with opposing vertical scroll | | TimerWidget | Live countdown timer (days / hours / minutes / seconds) | | WysiwygRenderer | Scoped rich-text HTML renderer for CMS content | | RichTextEditor | Advanced headless WYSIWYG editor with custom inline styles and toolbars |

🚀 Installation

npm install @contentveda/ui@beta

💻 Usage

Step 1 — Import the theme

In your app's global stylesheet or entry file:

@import '@contentveda/ui/theme.css';

Override any CSS variable to customise the design system:

:root {
  --cv-color-primary: #e11d48;   /* your brand colour */
  --cv-font-family: 'Poppins', sans-serif;
}

Step 2 — Use in your framework

⚛️ React / Next.js

import Banner from '@contentveda/ui/react/Banner';
import TimerWidget from '@contentveda/ui/react/TimerWidget';

export default function Page() {
  return (
    <main>
      <Banner
        title="Summer Sale"
        subtitle="Up to 50% off"
        ctaText="Shop Now"
        media={{ type: 'image', url: '/hero.jpg' }}
        mapLinks={[{ url: '/sale' }]}
      />
      <TimerWidget title="Ends in:" targetDate="2026-12-31T23:59:59Z" />
    </main>
  );
}

🟢 Vue / Nuxt

<script setup>
import Banner from '@contentveda/ui/vue/Banner.vue';
import TimerWidget from '@contentveda/ui/vue/TimerWidget.vue';
</script>

<template>
  <main>
    <Banner title="Summer Sale" ctaText="Shop Now" />
    <TimerWidget title="Ends in:" targetDate="2026-12-31T23:59:59Z" />
  </main>
</template>

🧊 SolidJS

import Banner from '@contentveda/ui/solid/Banner';
import TimerWidget from '@contentveda/ui/solid/TimerWidget';

export default function Page() {
  return (
    <main>
      <Banner title="Summer Sale" ctaText="Shop Now" />
      <TimerWidget title="Ends in:" targetDate="2026-12-31T23:59:59Z" />
    </main>
  );
}

🟠 Svelte / SvelteKit

<script lang="ts">
  import Banner from '@contentveda/ui/svelte/Banner.svelte';
  import TimerWidget from '@contentveda/ui/svelte/TimerWidget.svelte';
</script>

<Banner title="Summer Sale" ctaText="Shop Now" />
<TimerWidget title="Ends in:" targetDate="2026-12-31T23:59:59Z" />

🌐 Web Components (Vanilla HTML / CMS Renderer)

<link rel="stylesheet" href="node_modules/@contentveda/ui/dist/styles/theme.css" />
<script type="module" src="node_modules/@contentveda/ui/dist/webcomponent/dist/Banner.js"></script>

<cv-banner
  title="Summer Sale"
  subtitle="Up to 50% off"
  cta-text="Shop Now"
></cv-banner>

📖 Documentation

Full interactive docs are published at:

docs.contentveda.com/ui

Each component page includes:

• Live in-browser preview
• Props reference table
• Copy-ready code for React, Svelte, and Web Components

📁 Repository Structure

src/
  components/       Mitosis source (.lite.tsx) — single source of truth
  styles/           theme.css — CSS design token variables
dist/               Compiled output (not committed; built on publish)
  react/
  svelte/
  webcomponent/
docs/               Generated docs, synced to docs.contentveda.com
  index.html
  components/       One page per component
  css/docs.css
  js/docs.js
.github/workflows/
  playwright.yml    Checks on push/PR to main and beta
  release.yml       Verify, CodeQL gate, then semantic-release
  notify-docs.yml   Tells contentveda-docs to rebuild the site

🏗️ Built With

• Mitosis — single-source component compiler
• TypeScript — typed component props
• Vanilla CSS — zero runtime style dependencies

📄 License

MIT © ContentVeda UI Contributors