Spinner

An indicator that can be used to show a loading state.

@react.component
let make = () =>
  <div className="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">

Installation

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Spinner
Copy

Usage

Copy<Spinner />

Customization

You can replace the default spinner icon with any other icon by editing the Spinner component.

@react.component
let make = () =>
  <div className="flex items-center gap-4">

Copy@module("tailwind-merge")
external cn: (string, option<string>) => string = "twMerge"
 
@react.component
let make = (~className=?, ~dataIcon=?, ~dataSlot=?) => {
  <LoaderIcon
    ?dataIcon
    ?dataSlot
    role="status"
    ariaLabel="Loading"
    className={cn("size-4 animate-spin", className)}
  />
}
 

Examples

Size

Use the size-* utility class to change the size of the spinner.

@react.component
let make = () =>
  <div className="flex items-center gap-6">

Button

Add a spinner to a button to indicate a loading state. Remember to use the dataIcon=InlineStart prop to add the spinner to the start of the button and the dataIcon=InlineEnd prop to add the spinner to the end of the button.

@react.component
let make = () =>
  <div className="flex flex-col items-center gap-4">

Badge

Add a spinner to a badge to indicate a loading state. Remember to use the dataIcon=InlineStart prop to add the spinner to the start of the badge and the dataIcon=InlineEnd prop to add the spinner to the end of the badge.

@react.component
let make = () =>
  <div className="flex items-center gap-4 [--radius:1.2rem]">

Input Group

@react.component
let make = () =>
  <div className="flex w-full max-w-md flex-col gap-4">

Empty

@react.component
let make = () =>
  <Empty className="w-full">