Radix Svelte

Overview:

Radix Svelte is a community-led Svelte port of Radix UI Primitives, a set of unstyled and accessible components for building design systems and web apps. While not endorsed or affiliated with Radix UI/WorkOS, Radix Svelte aims to provide similar functionality for the Svelte ecosystem. It offers tree-shakeable components, TypeScript and SvelteKit support, adherence to WAI-ARIA guidelines, examples and documentation, and a focus on accessibility, extensibility, quality, and consistency.

Features:

• Tree-shakeable components: Components with individual parts that can be styled separately.
• Typescript and SvelteKit support: Out-of-the-box support for TypeScript and SvelteKit.
• Strict adherence to WAI-ARIA guidelines: Ensures accessibility for all users.
• Easy to use examples and documentation: Simplifies the usage and integration of the components.
• High emphasis on accessibility, extensibility, quality, and consistency: Provides a robust and reliable foundation for building web apps.

Installation:

To use Radix Svelte, follow these steps:

1. Install the radix-svelte package using your preferred package manager.
2. Import the components into your code.
3. Start using the components in your Svelte project.

Here is an example of how to import and use the components:

import { Button, Card, Modal } from 'radix-svelte';

// Use the components in your Svelte code
<Button>Click me</Button>
<Card>{/* Card content */}</Card>
<Modal>{/* Modal content */}</Modal>

Summary:

Radix Svelte is a community-led Svelte port of Radix UI Primitives, offering accessible and unstyled components for building web apps. It provides tree-shakeable components, TypeScript and SvelteKit support, adherence to WAI-ARIA guidelines, and examples/documentation. Radix Svelte aims to enhance the Svelte ecosystem and improve the experience of building with Svelte. Contributions are encouraged, and the project has an active community on Discord. The roadmap includes a list of components and their statuses, showcasing the progress of the project.