Provider
To correctly use Sara UI you must set up the Provider at the root of your application:
+src/routes/+layout.svelte
<script lang="ts">
import { SaraProvider, type SaraProviderConfig } from "saraui"
//optionally you can configure Sara by providing a valid config value:
const config: SaraProviderConfig = {
loader: "ring",
notification: {
icons: {
success: "i-mdi-check-circle-outline",
info: "i-mdi-information-slap-circle-outline",
warning: "i-mdi-warning",
error: "i-mdi-close-circle-outline"
},
transition: {
direction: "left-to-right",
distance: {
sm: { right: "2", top: "4" }
}
}
}
}
</script>
<SaraProvider {config}>
<slot></slot>
</SaraProvider>Sara is built on top of the Tailwind's default config. You can extend it, but Sara won't
get the new classes.
Props
config?:
SaraProviderConfig
Types
SaraProviderConfig
{
loader?: LoaderProps
notification?: NotificationConfig
}LoaderProps
{
option: "spinner" | "dots" | "ring" | "ball" | "bars" | "infinity"
color?: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "error"
}NotificationConfig
{
icons?: NotificationIcons
transition?: NotificationTransition
}NotificationIcons
{
success: SizedIcon | IconClassString
info: SizedIcon | IconClassString
warning: SizedIcon | IconClassString
error: SizedIcon | IconClassString
}NotificationTransition
{
direction: NotificationDirectionString | "left-to-right" | "right-to-left"
distance: NotificationBreakpointDistance
}NotificationBreakpointDirection
{
sm?: "left-to-right" | "right-to-left"
md?: "left-to-right" | "right-to-left"
lg?: "left-to-right" | "right-to-left"
xl?: "left-to-right" | "right-to-left"
}NotificationBreakpointDistance
{
sm?: //any posible default spacing value from Tailwind
md?: //any posible default spacing value from Tailwind
lg?: //any posible default spacing value from Tailwind
xl?: //any posible default spacing value from Tailwind
}