Skip to content

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

License

Notifications You must be signed in to change notification settings

elcharitas/chakra-ui-svelte

Repository files navigation

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.

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

Show your support

Give a ⭐️ if this project helped you!