--- title: "Yellowball: Web development component library built in Astro framework for WordPress - ditta" canonical_url: "https://ditta.studio/work/yellowball" last_updated: "2026-05-13T16:15:36.968Z" meta: author: ditta description: "Yellowball approached ditta to prototype and build out the frontend component library for their new design. We collaborated closely with their design team to craft a library that allowed for seamless integration into WordPress." "og:description": "Yellowball approached ditta to prototype and build out the frontend component library for their new design. We collaborated closely with their design team to craft a library that allowed for seamless integration into WordPress." "og:title": "Yellowball: Web development component library built in Astro framework for WordPress" "twitter:title": "Yellowball: Web development component library built in Astro framework for WordPress" --- ![Person holding a smartphone displaying a web design app, with a finger pointing at the screen, against a dark background.](https://a2.storyblok.com/f/284609/3680x2760/18b643468f/yellowball-8.jpg/m/smart/filters:quality(85)) # Yellowball Bespoke websites that captivate and convert. Yellowball approached _**ditta**_ to prototype and build out the frontend component library for their new design. We collaborated closely with their design team to craft a library that allowed for seamless integration into WordPress. ## Dynamically Static Our approach was to build a composable, reusable and highly performant static frontend component library with Astro. Based on their own bespoke designs, they could then expand on this work from within their own dev team. - Web Development - Performance Optimisation - Digital Strategy - Prototyping - UX & UI Design - Technical Architecture - Component Library ![Four people sit around a table in a modern office with plants and hanging lights, engaged in a lively discussion.](https://a2.storyblok.com/f/284609/993x1167/aefd2c9394/yellowball-3.webp/m/1400x1646/smart/filters:quality(85)) ![A group of people having a discussion in a modern meeting space with a neon "Creative Lab" sign and plants in the background.](https://a2.storyblok.com/f/284609/972x642/c24805cf80/yellowball-2.webp/m/1400x924/smart/filters:quality(85)) ### Strategy & planning Yellowball specialise in highly bespoke custom WordPress builds. With their team focused on ongoing client work, they approached Ditta to support the development of their own website project. We proposed creating a scalable component library based on their new design system, giving their team a flexible foundation for future development. A key consideration was ensuring the library would be easy for their internal developers to extend and integrate over time. To achieve this, we planned and built the frontend using Astro — a modern static-site framework focused on performance, maintainability, and flexibility. ![Laptop on a white surface displaying a website with the headline "Design that puts your brand in the spotlight" on a dark background.](https://a2.storyblok.com/f/284609/3680x2760/62db42f75d/yellowball-9.jpg/m/2880x2160/smart/filters:quality(85)) ![Hand holding a smartphone displaying a webpage titled "London's Leading WordPress Agency" with statistics and text.](https://a2.storyblok.com/f/284609/3680x2760/e15c1089f0/yellowball-12.jpg/m/1400x1050/smart/filters:quality(85)) ![Person holding a smartphone displaying a "Meet your team" screen with photos of nine individuals on a green sofa background.](https://a2.storyblok.com/f/284609/3680x2760/100b95edf3/yellowball-6.jpg/m/1400x1050/smart/filters:quality(85)) ![Tablet on a dark surface displaying a bright yellow screen with "the bounce" text and various people images on it.](https://a2.storyblok.com/f/284609/3680x2760/0e8d7c5c60/yellowball-7.jpg/m/2840x2130/smart/filters:quality(85)) ### Production & delivery We developed the website using Astro, creating a modular component library that mirrored Yellowball’s design system and streamlined future development. Each component was built to be reusable, easy to maintain, and flexible enough to support ongoing expansion by their internal team by utilising Tailwind as a source of truth style-guide. The project focused heavily on performance, clean frontend architecture, and creating an efficient developer experience. By combining a statically generated frontend with a carefully structured component approach, we delivered a fast, scalable website that aligned closely with Yellowball’s design standards while remaining simple to evolve over time. ![Computer monitor on desk displaying a webpage titled "New & featured SEO case studies" with case study thumbnails.](https://a2.storyblok.com/f/284609/3680x2760/148346186f/yellowball-10.jpg/m/2840x2130/smart/filters:quality(85)) ![Woman working at a desk with dual monitors in an office with "yellowball" logo on the wall.](https://a2.storyblok.com/f/284609/1194x686/5901e1e896/yellowball-5.png/m/1400x804/smart/filters:quality(85)) ![Person holding a smartphone displaying a web design app, with a finger pointing at the screen, against a dark background.](https://a2.storyblok.com/f/284609/3680x2760/18b643468f/yellowball-8.jpg/m/1400x1050/smart/filters:quality(85)) > Working with _**ditta**_ was a great experience — they quickly aligned with our design thinking while offering thoughtful guidance on the implementation of our component library, in particular with animation and UI refinement. _![David Groombridge](https://a2.storyblok.com/f/284609/800x800/c5832ae8e0/david-groombridge.webp/m/80x80/smart/filters:quality(85))**David Groombridge**Head of Design_ If you like the sound of how we work, we’d love to hear more about your next project. [Say hello](https://ditta.studio/mailto:info@ditta.studio)