🚧 This project is under active development🚧

ASDASC

Another Scalable Design And Stuff, Components

A React component collection built from years of front-end development experience and my journey of learning how to create my own components from scratch.

🔗 Documentation and Demo

What is ASDASC?

ASDASC is my personal exploration into building React components the way I believe they're made and work. It's not about reinventing the wheel, but it's about understanding how the wheel is made and building one that fits my specific needs and preferences.

Features

🎨 Flexible Theming

• Light & Dark modes (and everything in between)
• Color-tone based themes - Life is not just black and white, but filled with colors
• Plenty of colors to choose from - Swatches galore
• Easy to custom colors variables for maximum flexibility

🔧 Three Design Systems

• Rounded corners - For that friendly, modern feel
• Pill/Circle - When you want things smooth and flowing
• Boxed corners - Sharp, clean, and professional

♿ Keyboard Accessibility And Color Contrast

• Keyboard navigation - Tab through everything like a pro
• Color contrast compliance - Text that's actually readable
• Focus management - Visual indicators that make sense

🧩 Developer Experience

• TypeScript support - Because we're not animals
• Customizable components - Tweak everything
• Modular and atomic architecture - Components built from small things to complete components

Why Build My Own Components?

Here's the honest answer:

I wanted to understand how to build components from the ground up. This project is my learning journey:

• Understanding component architecture and patterns
• Implementing proper theming systems
• Building accessibility into components from day one
• Creating flexible APIs that actually make sense
• Learning the intricacies of design systems

ASDASC is my attempt to apply everything I've learned about front-end development into creating components that work the way I think they should.

Run Locally

Clone the project

git clone https://github.com/hilmiha/asdasc-ui.git

Go to the project directory

cd asdasc-ui

Install dependencies

npm install

Start the server

npm run dev

Philosophy

• Learning by building - The best way to understand components is to create them
• Practical implementation - Every feature exists because I needed to figure out how to build it
• Accessibility as education - Learning to build inclusive components from the start
• Personal growth - Each component teaches me something new about React and design systems
• Real-world application - Built while learning, tested by using

Keep in mind: this is my journey of learning how to build components, so expect some experimentation and iteration along the way.

 

---

 

Built with ☕ and the desire to understand how React components actually work under the hood.