Chakra UI svelte 👋

Build Accessible Svelte Apps with Speed

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:

$ 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

// page.svelte
<script>
	import { ChakraProvider } from 'chakra-ui-svelte';
	import App from './App.svelte';
</script>

<ChakraProvider>
	<App />
</ChakraProvider>

• 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 to help guide you.

Author

👤 elcharitas

• Website: https://elcharitas.dev
• Twitter: @iamelcharitas
• Github: @elcharitas
• LinkedIn: @elcharitas

Show your support

Give a ⭐️ if this project helped you!