Welcome to Vanilla UI, a component library that enables you to create attractive and functional interfaces using only vanilla CSS and JavaScript, without relying on external frameworks.
To get started, follow these simple steps:
<head> section of your HTML document:<link rel="stylesheet" href="/path-to-your-project/dist/vanillaui.css">
<body> tag:<script src="/path-to-your-project/dist/vanillaui.js"></script>
The necessary files are located in the dist folder of this GitHub repository.
Explore a wide range of customizable components, from elegant buttons to interactive forms. Designed to be lightweight and flexible, Vanilla UI components provide you with the freedom to create exceptional user experiences without burdening your project with unnecessary dependencies.
The required files are in the dist folder of this GitHub repository. We hope you enjoy using Vanilla UI in your projects!
If you prefer not to install locally, you can use the following CDN links:
https://j03rul4nd.github.io/VanillaUI/dist/vanillaui.js
https://j03rul4nd.github.io/VanillaUI/dist/vanillaui.css
const container = document.getElementById('btn');
const vanillaUI = VanillaUI(container);
const myButton = vanillaUI.createButton({
color:"Primary",
onclick: ClickMe,
});
const container = document.getElementById('btn');
const vanillaUI = VanillaUI(container);
const myButton = vanillaUI.createButton({
color:"Primary",
isDisabled: true,
});
//Sizes Small
VanillaUI(document.getElementById("btn-Sizes-s")).createButton({
color:"Primary",
sizes: "Small"
});
//Sizes Medium
VanillaUI(document.getElementById("btn-Sizes-m")).createButton({
color:"Primary",
sizes: "Medium",
});
//Sizes Large
VanillaUI(document.getElementById("btn-Sizes-l")).createButton({
color:"Primary",
sizes: "Large",
});
//Radius Full
VanillaUI(document.getElementById("btn-Radius-f")).createButton({
color:"Primary",
radius: "full",
});
//Radius large
VanillaUI(document.getElementById("btn-Radius-l")).createButton({
color:"Primary",
radius: "large",
});
//Radius medium
VanillaUI(document.getElementById("btn-Radius-m")).createButton({
color:"Primary",
radius: "medium",
});
//Radius small
VanillaUI(document.getElementById("btn-Radius-s")).createButton({
color:"Primary",
radius: "small",
});
//Radius none
VanillaUI(document.getElementById("btn-Radius-n")).createButton({
color:"Primary",
radius: "none",
});
//Colors Default
VanillaUI(document.getElementById("btn-Colors-d")).createButton({
color:"Default"
});
//Colors Primary
VanillaUI(document.getElementById("btn-Colors-p")).createButton({
color:"Primary"
});
//Colors Secondary
VanillaUI(document.getElementById("btn-Colors-s")).createButton({
color:"Secondary"
});
//Colors Success
VanillaUI(document.getElementById("btn-Colors-ss")).createButton({
color:"Success"
});
//Colors Warning
VanillaUI(document.getElementById("btn-Colors-w")).createButton({
color:"Warning"
});
//Colors Error
VanillaUI(document.getElementById("btn-Colors-e")).createButton({
color:"Error"
});
//Variants Solid
VanillaUI(document.getElementById("btn-Variants-s")).createButton({
Variants:"Solid"
});
//Variants Faded
VanillaUI(document.getElementById("btn-Variants-f")).createButton({
Variants:"Faded"
});
//Variants Bordered
VanillaUI(document.getElementById("btn-Variants-b")).createButton({
Variants:"Bordered"
});
//Variants Light
VanillaUI(document.getElementById("btn-Variants-l")).createButton({
Variants:"Light"
});
//Variants Flat
VanillaUI(document.getElementById("btn-Variants-fl")).createButton({
Variants:"Flat"
});
//Variants Ghost
VanillaUI(document.getElementById("btn-Variants-g")).createButton({
Variants:"Ghost"
});
//Variants Shadow
VanillaUI(document.getElementById("btn-Variants-sh")).createButton({
Variants:"Shadow"
});
VanillaUI(document.getElementById("btn-Custom")).createButton({
className:"MyGradientButton"
});
VanillaUI(document.getElementById("btn-Loading")).createButton({
isLoading: true
});