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: 4 months 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 3 years ago)
- Default Branch: dev
- Last Pushed: 2023-06-26T10:09:28.000Z (over 2 years ago)
- Last Synced: 2025-08-21T05:04:09.535Z (4 months ago)
- Topics: chakra-ui, svelte, sveltejs
- Language: TypeScript
- Homepage: https://chakra-ui-svelte.vercel.app
- Size: 1.24 MB
- Stars: 118
- Watchers: 6
- Forks: 10
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Chakra UI `svelte` 👋
## Build Accessible Svelte Apps with Speed
[](https://www.npmjs.com/package/chakra-ui-svelte)
[](#)
[](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!