chakra ui svelte

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

Chakra UI svelte 👋

Build Accessible Svelte Apps with Speed

npm version Documentation 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.


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

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

# or

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

# or

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


To start using the components, please follow these steps:

  • Wrap your application with the ChakraProvider
// page.svelte
	import { ChakraProvider } from 'chakra-ui-svelte';
	import App from './App.svelte';

	<App />
  • 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


Feel like contributing? That's awesome! There's a contributing guide to help guide you.


👤 elcharitas

Show your support

Give a ⭐️ if this project helped you!

Designed and developed by  Jonathan Irhodia  © 2024