Announcing Chakra UI Svelte

Jonathan Irhodia — Sat, 07 May 2022 10:28:40 +0000

Introduction

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

Current Stable Prerelease Version: 0.0.2-next.2
Github
NPM
Demo Website

Getting Started

To get started, simply install the package with

pnpm i chakra-ui-svelte

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

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';

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

<script>
  import { Box, Button, ChakraProvider } from 'chakra-ui-svelte';
</script>

<ChakraProvider>
   <Box>Hello Box</Box>
   <Button> Hello Button </Button>
</ChakraProvider>

Styling Components

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

<script>
  import { Button, Icon } from 'chakra-ui-svelte';
  import FaGithub from "svelte-icons/fa/FaGithub.svelte";
</script>
<Button
    as="a"
    p="0"
    mx="3"
    size="xs"
    bg="transparent"
    href={"https://github.com/elcharitas/chakra-ui-svelte"}
    target="_blank"
    rel="noreferrer"
    ariaLabel="Chakra UI on Github"
    variant="ghost"
>
    <Icon as={FaGithub} />
</Button>

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

Lovenotes - MongoDB Hackathon Submission

Jonathan Irhodia — Fri, 14 Jan 2022 02:41:58 +0000

Overview of My Submission

This project is my entry for the MongoDB hackathon. It's a fairly simple idea i came up with while thinking of the day of love coming up soon #Feb14 :D.

This project allows for lovers to openly declare their affections for and to each other. It uses MongoDB Atlas to save the data and mongodb native drivers to read the data.

Basically, a new love note is created by a user and sent to another. The love note is then automatically deleted thereafter.

This is a React app project hosted on Vercel
The design was created using Chakra UI
This project was created with create react app
The project uses Node.js native drivers for MongoDB
The source code is hosted on github at elcharitas/mongodb-hackathon

Submission Category: Choose Your Own Adventure

Link to Code

elcharitas / mongodb-hackathon

Lovenotes allows lovers to connect through virtual love letters ❤️

Lovenotes - MongoDB Hackathon Submission

This project was bootstrapped with Create React App designed using the effluent Chakra UI and powered by MongoDB.

This project is my entry for the MongoDB hackathon It's a fairly simple idea i came up with while thinking of the day of love coming up soon #Feb14 :D.

This project allows for lovers to openly declare their affections for and to each other. It uses MongoDB Atlas to save the data and mongodb native drivers to read the data.

This is a React app project hosted on Vercel
This project was designed using Chakra UI
This project was created with create react app
The project uses Node.js native drivers for MongoDB
The source code is hosted on github at elcharitas/mongodb-hackathon
Music in this app is "Me You I" a song I love so much by the cavemen

Submission Category: Choose Your Own Adventure

…

View on GitHub

Additional Resources / Info

Demo can be found here: https://mongodb-hackathon.vercel.app

Forem: Jonathan Irhodia

Announcing Chakra UI Svelte

Introduction

What is Chakra UI?

Release Info

Getting Started

Sample Application

Styling Components

Final Thoughts?

Lovenotes - MongoDB Hackathon Submission

Overview of My Submission

Submission Category: Choose Your Own Adventure

Link to Code

elcharitas / mongodb-hackathon

Lovenotes allows lovers to connect through virtual love letters ❤️

Lovenotes - MongoDB Hackathon Submission

Submission Category: Choose Your Own Adventure

Additional Resources / Info

Screenshots