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.

Table of Contents

• Getting Started
  • Adding Svelte Chakra to project
• Adding to Page
• Accessing the theme
• Variants
• Creating Custom Components
• List of Components
• Modal Documentation

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

Modal Documentation

Coming Soon