# Write on Hive, Read Everywhere! Hello, dear Hive community! ꙮ Even though it's only been about a week since [my last post](https://blog.dev.openhive.network/hive-139531/@mtyszczak/hi-ve-everyone), I've missed you all so much! 🤗 Recently, our dev team had a productive chat with @crimsonclad and @gtg about Hive components that users can embed on their websites. So, I got busy trying to bring these ideas to life as quickly as I could! 🏃 ![img1.png](https://images.hive.blog/DQmYMwGJVN58EbpT5RPddsSh8tZcRK9KHPjcLuu6jNYXSmW/img1.png) ## 📖 User Stories We began by asking simple questions 🤔 about which components are essential and how they should be used, and we got immediate answers! - I want to **embed Hive posts** 🧩 on my website - I want my visitors to **view comments** 🗪 - I want my visitors to be able to **❤️ like & 💬 comment** on the content I create - I want to display a paginated list of the **latest posts by tag** 📚 - I want to show details of my **Hive account** 👦 - I want to display my **witness details** 👀 ![img2.png](https://images.hive.blog/DQmUkRJCBrBmQ1zYJAwDF6e7eoBvW6s84JmV3WgDuBsh24w/img2.png) ## 📊 Check Out the Components! ### Witness ```html ``` ![img3.png](https://images.hive.blog/DQmSrkbu7pCVpgiVfCPMBGvyBaNgk6cW2UAdD6EWA51w42X/img3.png) ### Post ```html ``` ![img4.png](https://images.hive.blog/DQmfN7ufSamd9GvFP3b7Y6Py9ix1TtgTAqsrXqTY2bVzrRg/img4.png) ### Comments ```html ``` ![img5.png](https://images.hive.blog/DQmNMze5vfPhXy2gykvtQU2RrSG76u6hycFCXHfEPD8kojR/img5.png) ### Posts by Tag ```html ``` ![img6.png](https://images.hive.blog/DQmXLz7KdmwYcVGrxLrUqcdZESZBMrGCYkgjyvDv4tzjtGE/img6.png) ## 💻 Sample Website Thanks to @gtg, you can see these components [in action](https://gtg.openhive.network/5bb236) 💥 Feel free to explore the source code of the website (visit: `view-source:https://gtg.openhive.network/5bb236`). It's impressively simple! ♻️ ## 📱 Mobile Users Welcome! No worries! The components are fully responsive! ⚡ ![img7.png](https://images.hive.blog/DQmcGoPbnekagshgHdLxLU98LH1pMY1WLTiCGCnXXmrayFY/img7.png) No need to adjust settings. They automatically adapt to the viewport! 😊 ## 🔍 How to Use Them? I created a [quick start guide](https://github.com/mtyszczak/hive-components?tab=readme-ov-file#-quick-start) 🧠 in my repository. TL;DR: ```html

``` ## 🧛🏻‍♀️ For Night Owls Introducing the ✨ **dark theme** ✨: ![img8.png](https://images.hive.blog/DQmdAAobQMwVS4qFNLvSrVFnqr7iHda2t6ErwZefWTf3yxn/img8.png) Just set the `theme="dark"` attribute on any component and you're good to go! 💪 ## 🎨 Want More Colors? Customize your communities and websites with just a few lines of CSS! 🤩 ```css hive-comments { --hive-on-surface: blue; } ``` And here are the results: 👇 ![img9.png](https://images.hive.blog/DQmVeRbsM31kshvF8LXXRauRMVfjdSYKHWRJTCvhMhTZKvJ/img9.png) ## 📈 Need More Components? Great! I love your spirit! 👻 You can request a new component by [creating an issue](https://github.com/mtyszczak/hive-components/issues/new) 💡 or suggest edits by [opening a pull request](https://github.com/mtyszczak/hive-components/pulls) 🛠️ ## 💾 Component Sizes I understand not everyone has super-fast internet 📟 So, I worked to make the components as compact as possible! ⬇️ | Name | Size | |------|------| | Lit core | 7 kB | | Hive Witness | 19 kB | | Hive Post | 29.3 kB | | Hive Comments | 46.9 kB | | Hive Tag | 50.2 kB | | Hive internals | 640 kB | And remember, these script sizes are not gzipped yet! They are cached by browsers and executed only once per page load, on demand! 🤯 ## 💲 Pricing Just kidding 🤣 It's completely 🆓 🗽 Feel free to visit [the repository](https://github.com/mtyszczak/hive-components) to contribute or use the components via CDN, thanks to @gtg 🧙‍♂️ ## 🌟 Future Plans I have a [few ideas](https://github.com/mtyszczak/hive-components/issues) in mind, and there are areas I can improve, but we did it! 📣 MVP is on board! 💎 I strongly encourage you to use the Hive components! 🖼️ --- Images from private archive & chatgpt.com