https://github.com/nteinert2005/svelte-chakra

A UI Kit for ChakraUI based in Svelte
https://github.com/nteinert2005/svelte-chakra

chakra-ui svelte sveltejs uikit

Last synced: 29 days ago
JSON representation

A UI Kit for ChakraUI based in Svelte

• Host: GitHub
• URL: https://github.com/nteinert2005/svelte-chakra
• Owner: nteinert2005
• Created: 2022-05-01T07:15:34.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-05T08:42:53.000Z (over 2 years ago)
• Last Synced: 2024-04-24T20:28:00.175Z (8 months ago)
• Topics: chakra-ui, svelte, sveltejs, uikit
• Language: Svelte
• Homepage: https://www.npmjs.com/package/chakra-svelte
• Size: 44.9 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](#getting-started)

  - [Adding Svelte Chakra to project](#adding-svelte-chakra-to-project)

- [Adding to Page](#adding-to-a-page)

- [Accessing the theme](#accessing-the-theme-inline)

- [Variants](#theme-variants)

- [Creating Custom Components](#creating-custom-components)

- [List of Components](#list-of-components)

- [Modal Documentation](#modal-documentation)

## Getting Started

To add it to your Svelte project, just use:

```js

npm install svelte-chakra

```

## Adding to a Page

```js

import { Box } from "svelte-chakra";

```

## Accessing the theme (inline)

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

```js

    

```

### Distinctions:

`theme.color.red => default red color`

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

## Theme Variants

```js

     Badge 

     OUtline 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:

```js

    const { bg } = $$restProps;

    import { cssVariables } from '../helpers/cssVariables';

 Some text goes here. 


    div {

        background-color: var(--bg);

    }

```

## 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.

- [x] Box

  - Props: `bg, w, p, color, maxW, mt, mb, ml, mr, borderRadius, overflow, alignItems, justifyContent, display`

- [x] Container

  - Props: `bg, w, p, color, mt, mb, ml, mr, maxW, borderRadius, overflow, alignItems, justifyContent, display, centerContent `

- [x] Button

  - Props: `colorScheme, isDisabled, isFullWidth, fontColor, leftIcon, rightIcon, size `

- [x] Slider

  - Props: `trackColor, progressColor, width, min, max, defaultValue `

- [x] Modal

  - Props: none yet just `` and `` see [Modal Documentation](#modal-documention)

- [x] Badges

  - Props: `colorScheme, size, variant, bgColor`

## Modal Documentation

`Coming Soon`