A library of accessible component primitives, actions and utilities for Svelte.
Overview
Grail UI is a component library for building Svelte applications. It provides a set of component primitives, actions, and utilities to help developers build accessible and high-quality applications quickly. Grail UI can be used as the base for a design system and component library or can be adopted gradually within an existing application.
Features
- Accessible: Grail UI prioritizes accessibility to ensure that applications built with it are usable for all users.
- Composable: The component primitives in Grail UI can be easily combined and composed to create complex user interfaces.
- Unstyled: Grail UI provides unstyled components, allowing developers to customize the appearance to match their application’s design.
- Uncontrolled: The components in Grail UI are uncontrolled, meaning they manage their own state internally.
- Tiny: Grail UI is designed to be lightweight and has a small footprint, minimizing the performance impact on applications.
- Tree shakeable: Grail UI is tree shakeable, allowing unused components to be automatically removed from the final bundle.
- Fully typed: Grail UI is fully typed, providing comprehensive type definitions for easy integration with TypeScript.
- SSR Friendly: Grail UI supports server-side rendering, ensuring that applications built with it can be rendered on the server.
Installation
To install Grail UI, follow these steps:
- Install Grail UI using npm:
- Import the required components into your Svelte application:
import { Button, Card, Input } from 'grail-ui';
- Use the imported components in your Svelte templates:
<Button>Click me</Button>
<Card>
<Input placeholder="Enter your name" />
</Card>
Summary
Grail UI is a component library for building accessible and high-quality Svelte applications. It offers a range of features such as composable and uncontrolled components, tree shakeability, and SSR support. Grail UI prioritizes developer experience and ease of use, with straightforward APIs and well-documented code. It is fully customizable and can be used as the base for a design system or integrated gradually into an existing application.
