Alpha-UI

UI Component Library based on dark theme first approach

A comprehensive UI CSS component library designed and developed using a dark theme first approach. This library includes a wide range of essential components commonly used in website development. By prioritizing the dark theme, the components seamlessly integrate into modern interfaces, providing a visually appealing and consistent user experience.

Check out the project : https://alpha-dark-ui.netlify.app/

To get started

CDN link : https://alpha-dark-ui.netlify.app/css/styles.css

Importing with HTML

For importing the library from the html copy this code inside the head tag of your html

<link rel="stylesheet" href="https://alpha-dark-ui.netlify.app/css/styles.css">

Importing with CSS

For importing the library from the css copy this code at the top of your css file

@import url("https://alpha-dark-ui.netlify.app/css/styles.css");

Project File Structure

:root
+---.vscode
+---alpha
|   \---css
|       +---components
|       \---pages
+---assets
|   +---images
|   \---svg
+---css
|   +---abstracts
|   +---base
|   +---components
|   +---fonts
|   \---layout
\---js

Color Palette

Theme Colors

Palette	Hex	Color
background	#282a36
background-light	#44475a
white	#f8f8f2
alpha	#6272a4
cyan	#8be9fd
green	#50fa7b
orange	#ffb86c
pink	#ff79c6
purple	#bd93f9
red	#ff5555
yellow	#f1fa8c

Base Colors

Palette	Hex	Color
black	#000000
black-1	#17141d
grey	#808080
dark-green-1	#1abc9c
dark-green-2	#16a085
light-green-1	#2ecc71
light-green-2	#27ae60
blue-1	#3498db
blue-2	#2980b9
purple-1	#9b59b6
purple-2	#8e44ad
dark-grey-1	#34495e
dark-grey-2	#2c3e50
yellow-1	#f1c40f
yellow-2	#f39c12
orange-1	#e67e22
orange-2	#d35400
red-1	#e74c3c
red-2	#c0392b
white-1	#ecf0f1
white-2	#bdc3c7
light-grey-1	#95a5a6
light-grey-2	#7f8c8d

Checkout the docs for more : https://alpha-dark-ui.netlify.app/alpha/docs.html

To run this app locally clone the project and run index.html file

git clone https://github.com/sohan9819/Alpha-UI.git