https://github.com/elcharitas/chakra-ui-svelte

⚡️ Simple, Modular & Accessible UI Components for your Svelte Applications
https://github.com/elcharitas/chakra-ui-svelte

chakra-ui svelte sveltejs

Last synced: 6 days ago
JSON representation

⚡️ Simple, Modular & Accessible UI Components for your Svelte Applications

• Host: GitHub
• URL: https://github.com/elcharitas/chakra-ui-svelte
• Owner: elcharitas
• License: mit
• Created: 2022-04-11T15:20:35.000Z (over 2 years ago)
• Default Branch: dev
• Last Pushed: 2023-06-26T10:09:28.000Z (over 1 year ago)
• Last Synced: 2024-09-18T14:55:02.871Z (15 days ago)
• Topics: chakra-ui, svelte, sveltejs
• Language: TypeScript
• Homepage: https://chakra-ui-svelte.vercel.app
• Size: 1.24 MB
• Stars: 111
• Watchers: 6
• Forks: 10
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

        


    



# Chakra UI `svelte` 👋

## Build Accessible Svelte Apps with Speed

[![npm version](https://badge.fury.io/js/chakra-ui-svelte.svg)](https://www.npmjs.com/package/chakra-ui-svelte)

[![Documentation](https://img.shields.io/badge/documentation-yes-brightgreen.svg)](#)

[![iamelcharitas](https://img.shields.io/twitter/follow/iamelcharitas.svg?style=)](https://twitter.com/iamelcharitas)

Chakra UI provides a set of accessible, reusable, and composable Svelte components that make it super easy to create websites and apps.

## Features 🚀

- Ease of Styling: Chakra UI contains a set of layout components like Box and Stack that make it easy to style your components by passing props.

- Flexible & composable: Chakra UI components are built to be adaptable and extended.

- Accessible. Chakra UI components follow the WAI-ARIA guidelines specifications and have the right aria-\* attributes.

- Out the box support for Dark Mode 😍: Most components in Chakra UI are dark mode compatible.

## Installation

To use Chakra UI components, all you need to do is install the `chakra-ui-svelte` package and its peer dependencies:

```sh

$ yarn add chakra-ui-svelte @emotion/css

# or

$ npm i chakra-ui-svelte @emotion/css

# or

$ pnpm install chakra-ui-svelte @emotion/css

```

## Usage

To start using the components, please follow these steps:

- Wrap your application with the `ChakraProvider`

```html

// page.svelte

	import { ChakraProvider } from 'chakra-ui-svelte';

	import App from './App.svelte';

	

```

- The provider is essential as it injects generated styles into your svelte app.

## Supported Components

The latest release has the following components

- ChakraProvider - Which should wrap all other components

- Box - The Basic component upon which every other component is built on

- Icon

- Logo

- Text

- VisuallyHidden

- Button

- IconButton

- RippleButton

- Flex

- Stack

- HStack

- VStack

- Spinner

- Loader

Complete Documentation would be available soon

## Contributing

Feel like contributing? That's awesome! There's a [contributing guide](./CONTRIBUTING.md) to help guide you.

## Author

👤 **elcharitas**

- Website: https://elcharitas.dev

- Twitter: [@iamelcharitas](https://twitter.com/iamelcharitas)

- Github: [@elcharitas](https://github.com/elcharitas)

- LinkedIn: [@elcharitas](https://linkedin.com/in/elcharitas)

## Show your support

Give a ⭐️ if this project helped you!