DEV Community

Cover image for Announcing Chakra UI Svelte
Jonathan Irhodia
Jonathan Irhodia

Posted on • Updated on

Announcing Chakra UI Svelte


I'm so excited to share what I spent the better part of April building - Chakra UI implementation in svelte. This is an implementation of the popular Chakra UI just as we have for Vue. I'm currently working on proper documentation for it. However, the package follows the Chakra UI React style guide.

What is Chakra UI?

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications. I fell in love with Chakra UI last year when I first tried the framework. Being more of a svelte lover, I was looking for implementation in svelte but didn't find any. So, I set out to create it.

It took me a whole month of testing components and checking style practices. I was also looking into Chakra UI React source. I wanted the implementation to be so closely related to React. And at the moment, I've completed about 13 components.

Release Info

Getting Started

To get started, simply install the package with

pnpm i chakra-ui-svelte
Enter fullscreen mode Exit fullscreen mode

You may optionally install the svelte-icons package. It's the only icon package I've tested so far with chakra-ui-svelte. It's fairly stable and I have the plan of fully supporting it later on.

pnpm i svelte-icons
Enter fullscreen mode Exit fullscreen mode

Sample Application

Let's try building a sample app, shall we?
First, we need to import the ChakraProvider component which handles themes and other global configurations.

import { ChakraProvider } from 'chakra-ui-svelte';
Enter fullscreen mode Exit fullscreen mode

Now we can go on ahead and use the provider to handle some of the stores which chakra-ui-svelte provides by default. and import other packages

  import { Box, Button, ChakraProvider } from 'chakra-ui-svelte';

   <Box>Hello Box</Box>
   <Button> Hello Button </Button>
Enter fullscreen mode Exit fullscreen mode

Styling Components

We can also customize our components just like we do in Chakra Ui React.

  import { Button, Icon } from 'chakra-ui-svelte';
  import FaGithub from "svelte-icons/fa/FaGithub.svelte";
    ariaLabel="Chakra UI on Github"
    <Icon as={FaGithub} />
Enter fullscreen mode Exit fullscreen mode

Final Thoughts?

Sadly, there isn't any proper documentation at the time of this writing. However, a demo is available here. I'd be updating the page with documentation in the coming week.
Please leave feedback and feel free to contribute to the package.

This post first appeared here

Top comments (1)

black_purple profile image
Abderrahman DAKIR ALLAH • Edited

I just started with svelte, and I really liked chakra ui since I use with react, glad to see that there could be an implementation for it.