Chakra-svelte NPM

Svelte Chakra (v0.1.1)

Svelte Chakra is an integration tool that allow Svelte developers to be able to use Chakra UI in their code.

Getting Started

To add it to your Svelte project, just use:

npm install svelte-chakra

Adding to a Page

import { Box } from "svelte-chakra";

<Box bg={theme.colors.black} color={theme.colors.white}>

Accessing the theme (inline)

Adding theme.xxx.xxx to any props will access the corresponding theme variable inside of theme.js

    <Box bg={theme.colors.black}>

Distinctions:

theme.color.red => default red color theme.color.red[300] => red in the shade of 300

Theme Variants

    <Badge variant={solid}> Badge </Badge>
    <Badge variant={outline}> OUtline Badge </Badge>

Creating Custom Components

Using cssVariables and use:cssVariables you can easily create custom components on the fly.

Inside of ../helpers is a file called cssVariables.js, and to use it:

<script>
    const { bg } = $$restProps;
    import { cssVariables } from '../helpers/cssVariables';
</script>

<div use:cssVariables={{bg}}> Some text goes here. </div>

<style>
    div {
        background-color: var(--bg);
    }
</style>

List of Components (so far)

Here is a running list of the features that are done or in the works. Below each component is a list of all the available props you can use to customize it.

Box
- Props: bg, w, p, color, maxW, mt, mb, ml, mr, borderRadius, overflow, alignItems, justifyContent, display
Container
- Props: bg, w, p, color, mt, mb, ml, mr, maxW, borderRadius, overflow, alignItems, justifyContent, display, centerContent
Button
- Props: colorScheme, isDisabled, isFullWidth, fontColor, leftIcon, rightIcon, size
Slider
- Props: trackColor, progressColor, width, min, max, defaultValue
Modal
- Props: none yet just <ModalHeader> and <ModalFooter> see Modal Documentation
Badges
- Props: colorScheme, size, variant, bgColor