Git Product home page Git Product logo

alpha-ui's Introduction

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.

alpha

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 #282a36
background-light #44475a #44475a
white #f8f8f2 #f8f8f2
alpha #6272a4 #6272a4
cyan #8be9fd #8be9fd
green #50fa7b #50fa7b
orange #ffb86c #ffb86c
pink #ff79c6 #ff79c6
purple #bd93f9 #bd93f9
red #ff5555 #ff5555
yellow #f1fa8c #f1fa8c

Base Colors

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

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

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

alpha-ui's People

Contributors

sohan9819 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.