Svelte Chakra is an integration tool that allow Svelte developers to be able to use Chakra UI in their code.
- Getting Started
- Adding to Page
- Accessing the theme
- Variants
- Creating Custom Components
- List of Components
- Modal Documentation
To add it to your Svelte project, just use:
npm install svelte-chakra
import { Box } from "svelte-chakra";
<Box bg={theme.colors.black} color={theme.colors.white}>
Adding theme.xxx.xxx
to any props will access the corresponding theme variable inside of theme.js
<Box bg={theme.colors.black}>
theme.color.red => default red color
theme.color.red[300] => red in the shade of 300
<Badge variant={solid}> Badge </Badge>
<Badge variant={outline}> OUtline Badge </Badge>
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>
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
- Props:
- Container
- Props:
bg, w, p, color, mt, mb, ml, mr, maxW, borderRadius, overflow, alignItems, justifyContent, display, centerContent
- Props:
- Button
- Props:
colorScheme, isDisabled, isFullWidth, fontColor, leftIcon, rightIcon, size
- Props:
- Slider
- Props:
trackColor, progressColor, width, min, max, defaultValue
- Props:
- Modal
- Props: none yet just
<ModalHeader>
and<ModalFooter>
see Modal Documentation
- Props: none yet just
- Badges
- Props:
colorScheme, size, variant, bgColor
- Props:
Coming Soon