I've recently embarked on a fun project: launching a new website with a retro neo-brutalist 8-bit style using Astro. Rather than just building the site, I decided to take it a step further by creating a reusable UI component library that's maintainable for the long term.
Introducing AstroBits
Say hello to astrobits.dev! It's still in its early stages, but I'm pretty excited about how it's shaping up. I've created GitHub issues for all the components I plan to add, giving me a clear roadmap for development.
BEM Methodology: A Solid Foundation
One decision I'm particularly happy with was implementing BEM (Block Element Modifier) guidelines for all the styles, enforced through linting rules. If you're not familiar with BEM, it's a naming convention that creates a clear, strict structure for your CSS classes:
-
Block: Standalone entity (like
.card) -
Element: Parts of a block (like
.card__title) -
Modifier: Variations of a block or element (like
.card--featured)
Why is BEM so powerful for a library like this?
- Modularity: Components stay self-contained with no style leakage
- Readability: Anyone can look at a class name and understand its purpose and relationship
- Maintainability: Makes future updates much easier as your codebase grows
- Scalability: Perfect for component libraries that might be used across multiple projects
Project Structure
I've set up a components collection with a clear pattern: each component will have its own documentation page at components/[slug]/index.astro. This will make it easy for anyone using the library to understand how to implement each component.
Open Source and Ready for Contributions
The entire project is MIT licensed and available on GitHub. If you're interested in retro aesthetics or building component libraries with Astro, I'd love your input! What features would make this library most useful to you?
Check out the repo here if you want to contribute or just poke around the code.
I'm particularly interested in feedback on:
- Component ideas that would fit the neo-brutalist 8-bit aesthetic
- Usability improvements for the documentation
- Additional utility features that would make implementation easier
What kind of retro-styled components would you want to see in a library like this?
Top comments (12)
Love the retro neo-brutalist vibe you've got going! I'd be excited to see an old-school modal or popup component with chunky borders and pixel-style animation - think classic adventure game dialogs. Curious if you've thought about adding a basic theme toggler for light/dark 8-bit palettes?
Thank you for the compliments on the vibe!
I'll definitely be adding a modal in the spirit of what you're thinking. Though thick borders are hard with the way the pixel effects work, that might be a bit tricky.
Dark mode probably won't ship for a few more versions.
This is awesome, Nick.
Even, Resume Matcher, Vector Podcast's website is made in Astro.
Let's gooo! Strongly recommend Keystatic if you are looking for a CMS
Pretty cool, I’m all for the 8-bit vibe and docs on every piece just makes it way easier - I’d probably end up building all the buttons first thing
Yeah, that was also what I went after first. Cards were harder since I had to get the pixelated border to go underneath the shadow.
Nice post.
Love the style you're going for!
Thank you!
I appreciate neo-brutalism coming back, I hope it becomes an evergreen style
I like the vision! Keen to see how it progresses.
This is really amazing, well done def want to give it a try.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.