Chakra UI provides a set of accessible, reusable, and composable Svelte components that make it super easy to create websites and apps.
- 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 (optionally) its peer dependencies:
$ yarn add chakra-ui-svelte svelte-icons
# or
$ npm i chakra-ui-svelte svelte-icons
# or
$ pnpm install chakra-ui-svelte svelte-iconsTo start using the components, please follow these steps:
- Wrap your application with the
ThemeProvider
// page.svelte
<script>
import { ThemeProvider } from 'chakra-ui-svelte';
import App from './App.svelte';
</script>
<ThemeProvider>
<App />
</ThemeProvider>- The provider is essential as it injects generated styles into your svelte app.
The latest release has the following components
- ThemeProvider - 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
- Website: https://elcharitas.dev
- Twitter: @iamelcharitas
- Github: @elcharitas
- LinkedIn: @elcharitas
Give a ⭐️ if this project helped you!