Home
โšก Open Source ยท MIT License

A modern UI kit library to
create beautiful pages

A universal, premium component library to build stunning web experiences natively in React, Svelte, and Web Components.

React / Next.js Svelte / SvelteKit Web Components TypeScript CSS Variables
npm install @contentvidya/ui
10
Components
3
Frameworks
13
Slide Effects
0
Runtime Deps

All Components

๐Ÿ–ผ
Banner

Full-bleed hero banner with image or video background, title, subtitle, CTA button, and loading shimmer.

๐Ÿ“ข
Announcement Bar

Slim full-width bar for promotions and site-wide announcements. Customisable colours and optional link.

โŠž
Grid Banner

Responsive CSS grid of banner cards with configurable column count, hover effects, and media support.

๐ŸŽž
Media Grid

Editorial 2-column layout with one large primary asset and stacked secondary items at a 21:9 aspect ratio.

โ†”
Row Scrollable

Horizontally scrollable card row with snap-scrolling, custom scrollbar, and optional section title.

โ–ถ
Sliding Banner

Full-featured slider with 14 transition effects, 11 canvas background effects, autoplay, arrows & dots.

โ‡…
Alternating Slider

Multi-column slider where adjacent columns scroll in opposite vertical directions for a dramatic reveal effect.

โณ
Timer Widget

Live countdown timer updating every second, with days/hours/minutes/seconds to any target date. Style it with neon/dark/gray variants, or drop in a background image with an adjustable overlay scrim for a photo-backed hero look.

โœ
WYSIWYG Renderer

Safely renders rich-text HTML from a CMS with scoped typography styles and dark-mode support.

๐Ÿ“
Rich Text Editor

Advanced headless WYSIWYG editor with custom inline styles, table builder, media embedding, and dark premium aesthetics.