✏️ ITOM UI : Sketchbook Vol. 1

A curated collection of hand-crafted, copy-pasteable Awwwards-level UI components built for learning and experimenting.

🚧 ROAD TO 100 COMPONENTS 🚧

We are currently building towards our goal of 100 high-quality, open-source interactions!

☕ Support a Student Developer!
If you find this Sketchbook useful and want to see me hit the 100+ components milestone, consider leaving a small tip or becoming a sponsor. It genuinely helps cover my student expenses and gives me the motivation to keep releasing high-quality, open-source animations! 💖

---

📓 What is the Sketchbook?

Most UI libraries give you an npm install package that acts like a black box. This is different.

This repository is literally a sketchbook of UI interactions, animations, and components built with Vanilla JavaScript, HTML, CSS, GSAP (and sometimes WebGL/Three.js).

✨ Core Features

• Zero Framework Lock-in: No React, Vue, or Svelte required. It works everywhere.
• Copy-Paste Ready: Every component is isolated. Just copy the HTML, CSS, and JS.
• Awwwards Level: Focused on highly optimized, premium visual effects.
• AI-Friendly: Fully documented codebase designed for AI Assistants (Devin, Cursor, Copilot).

---

✂️ How to use

1. Browse: Open the Live Sketchbook 📖
2. Find: Explore our component categories:
   • 🔘 Buttons & Interactions
   • ⏳ Preloaders & Loaders
   • 🚀 Page Transitions
   • 📜 Scroll Animations
   • 🗺️ Navbars & Menus
3. Copy: Every component has a "Code" view. Just copy the code directly into your project!

---

🏆 Community Showcase

Did you build something awesome using one of the components from this Sketchbook? We want to feature you!

1. Open the Live Sketchbook.
2. Click the Submit button.
3. Fill out the form with a screenshot and link to your live site.
4. If approved, your project will be featured in the official Notebook Showcase for the world to see!

---

🤝 Contributing

We welcome contributions from the community! Whether you want to request a component, report a bug, or submit your own animation.

• Found a bug? Submit a Bug Report.
• Want a new component? Submit a Component Request.
• Want to code? Please read our CONTRIBUTING.md and AGENTS.md before submitting a Pull Request.

---

📐 Local Development

Want to run the sketchbook locally and see how the components are built?

# 1. Clone the repo
git clone https://github.com/ITomPoland/ui-components.git

# 2. Install dependencies (for the Vite dev server)
npm install

# 3. Start drawing!
npm run dev

---

📄 License

This project is licensed under the MIT License. You are free to use these components in personal and commercial projects.

Copy, paste, experiment, and let's learn together! 🚀