Documentation

Everything you need to know to use Shades By Jay UI components in your projects.

Introduction

Shades By Jay is an open-source UI component library featuring beautiful, community-built elements. All components are built with pure HTML and CSS, making them framework-agnostic and easy to integrate into any project.

Pure HTML/CSS

No JavaScript dependencies. Works everywhere.

Copy & Paste

One-click copy. Instant integration.

Customizable

Easy to modify colors, sizes, and styles.

Community Built

Created by developers, for developers.

Installation

Using Shades By Jay components is simple - just copy and paste!

How It Works

Simply browse our component library, click on any component, and copy the HTML/CSS code directly into your project. No build tools, no dependencies, no setup required.

Quick Start

Get started in under a minute:

1

Browse Components

Visit the components page and find a component you like.

2

Copy the Code

Click on the component to open it, then copy the HTML and CSS.

3

Paste & Customize

Paste the code into your project and customize as needed.

Copy & Paste Usage

Each component provides separate HTML and CSS code that you can copy:

HTML 
<button class="btn-gradient">
    <span>Click Me</span>
</button>
CSS 
.btn-gradient {
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-gradient:hover {
    transform: translateY(-2px);
}
Pro Tip: Use the Playground to experiment with components before adding them to your project.

Customization

All components are designed to be easily customizable. Here are some common modifications:

Colors

Most components use CSS custom properties or direct color values that you can easily change:

CSS 
/* Original */
background: linear-gradient(135deg, #667eea, #764ba2);

/* Your custom colors */
background: linear-gradient(135deg, #00d4ff, #090979);

Sizes

Adjust padding, font-size, and dimensions to fit your design:

CSS 
/* Small button */
padding: 8px 16px;
font-size: 14px;

/* Large button */
padding: 16px 32px;
font-size: 18px;

Buttons

Our button collection includes gradient buttons, neon effects, 3D buttons, animated buttons, and more. Each button is fully customizable and works without JavaScript.

View all buttons →

Cards

Beautiful card components for displaying content, products, profiles, and more. Includes hover effects, glass morphism, and animated variants.

View all cards →

Loaders

CSS-only loading animations including spinners, dots, bars, and creative animated loaders. Perfect for loading states.

View all loaders →

Forms

Form components including inputs, textareas, checkboxes, and complete form layouts with modern styling.

View all forms →

Switches

Toggle switches and checkboxes with various styles including iOS-style, material design, and creative animations.

View all switches →

Playground

The Playground allows you to experiment with components in real-time:

  • Edit HTML and CSS live
  • See changes instantly
  • Reset to original code anytime
  • Copy your modified code
Open Playground →

Contributing

Shades By Jay is community-driven! Here's how you can contribute:

Submit a Component

  1. Create your component with clean HTML/CSS
  2. Visit the Submit page
  3. Fill in the details and submit
  4. Your component will be reviewed and added

Guidelines

  • Use pure HTML and CSS (no JavaScript required)
  • Make sure components are responsive
  • Use meaningful class names
  • Keep code clean and well-formatted
Submit Your Component