Put control back in developers’ hands.

A set of component primitives, actions and utilities that help you build accessible and high quality Svelte applications faster, while providing a great developer experience.

Accessibility

Built with accessibility in mind, that strictly adheres to WAI-ARIA standards. This includes comprehensive support for screen readers, focus management, and keyboard navigation, ensuring that our components are usable and accessible to all users.

Composable

Composition is at the core of everything we build. Everything is designed to offer maximum flexibility and seamless integration with your application's requirements and branding. We focus on providing developers with the tools they need to create custom, user-friendly components that fit seamlessly into their projects.

Customizable

We provide configurable behaviors, interactions, and event listeners, but we don't dictate the DOM structure of your components. This allows you to bring your own styles and transitions, giving you full control over the appearance and functionality of your components.

No trade-offs

Designed to be intuitive and easy to use, without requiring prior experience, knowledge, or taste. We don't introduce any wrapper components or new APIs to learn, so everything will feel natural and familiar. This means that you can focus on building great applications without being bogged down by unnecessary complexity.

Robust

Fully documented, with comprehensive examples, API references, and TypeScript support. Tested across a wide range of devices and browsers to ensure that it is reliable and performs well in a variety of environments. We are committed to providing developers with a high-quality, well-supported library that meets their needs and exceeds their expectations.

SSR

Seamlessly integrates with server-side rendering, eliminating the annoying issue of unstyled content flashing on the page.

Get started GitHub

The challenge

Many companies today are creating their own component libraries and design systems from scratch in order to align with their brand and meet the specific needs of their users. However, building and maintaining these libraries can be resource-intensive and require expertise in areas such as accessibility, keyboard navigation, touch interactions, and browser inconsistencies.

In the Svelte ecosystem, there are limited options available that can be used as the base for building such custom component libraries. Some developers choose to wrap fully styled component libraries such as Material UI, but their components can be difficult to style and customize to fit specific needs.

In recent years, the use of unstyled components (also known as "renderless components") has gained popularity in other ecosystems and has now made its way to Svelte. One example of this approach is Headless UI, which provides wrapper components with <slots> for custom HTML and styles. However, this approach has its drawbacks, as the wrapper components require the use of custom, non-standard methods for actions, transitions, and composition, which may not feel intuitive to Svelte developers.

A better approach

Grail UI introduces a fresh approach to building components in Svelte. Our goal is to provide developers with a comprehensive library of component primitives, actions, and utilities that can serve as the "holy grail" for constructing accessible components, design systems, and applications from the ground up with speed and efficiency. We've put significant effort into decoupling behavior and accessibility from the DOM structure, allowing developers to focus on creating intuitive and user-friendly web experiences.

Grail UI allows developers to retain full control over layout, bindings, and transitions, while providing built-in support for behaviors and accessibility. This means that you can customize the appearance and functionality of your components to meet the needs of your application, while benefiting from the time-saving and user-friendly features of our library.

Svelte is a powerful framework, and we wanted to enhance it rather than detract from it. Grail UI is designed to be lightweight, fast, and easy to compose with other components. We believe that our library represents a new and improved way of building components in Svelte, and we welcome you to try it out and see the difference it can make for your projects.

Start building your design system with Grail UI now.

Go to docs