Relic UI

A modern, lightweight CSS framework for building beautiful web applications

Welcome to Relic UI!
This is a demonstration page showcasing all available components. Use the CDN link below to integrate Relic UI into your projects.

Buttons

Beautiful, accessible button components with multiple variants and sizes

Button Variants

Outline Buttons

Button Sizes

Button States

Cards

Flexible card components for displaying content

Card Title

Card subtitle

This is a basic card with a header, body, and footer. Cards are perfect for organizing content.

Primary Card

Cards can have different color themes to match your design.

Elevated Card

This card has an elevated shadow style.

Form Components

Complete form controls for user input

Please enter your full name
Email is valid
Password must be at least 8 characters
Enable notifications

Grid System

Flexible grid layout with responsive breakpoints

CSS Grid

Col 1
Col 2
Col 3
Col 4

Flexbox Row

4 Columns
4 Columns
4 Columns

Alerts & Banners

Contextual feedback messages

Info: This is a primary information banner.
Success: Your changes have been saved successfully!
Warning: Please review your input before submitting.
Error: An error occurred while processing your request.

CDN Integration

Quick and easy integration into your projects

Getting Started

Add the following link to your HTML file's <head> section: 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Paul-W-0/Relic-UI@main/style.css">

Alternatively, you can download the CSS file and host it yourself.