); }; export SpinnerSize; `,__src__:"src/registry/default/example/extra-new/spinner/usage/spinner-size.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`import React from "react"; import { Spinner } from "@/components/ui/extension/spinner"; const SpinnerSize = () => { return (

); }; export SpinnerSize; `,__src__:"src/registry/default/example/extra-new/spinner/usage/spinner-size.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" React "}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" { Spinner } "}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/spinner"'}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#DCBDFB"},children:" SpinnerSize"}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" () "}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F47067"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#96D0FF"},children:'"flex items-center gap-3"'}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#8DDB8C"},children:"Spinner"}),(0,e.jsx)(n.span,{style:{color:"#6CB6FF"},children:" size"}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#96D0FF"},children:'"small"'}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#8DDB8C"},children:"Spinner"}),(0,e.jsx)(n.span,{style:{color:"#6CB6FF"},children:" size"}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#96D0FF"},children:'"medium"'}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#8DDB8C"},children:"Spinner"}),(0,e.jsx)(n.span,{style:{color:"#6CB6FF"},children:" size"}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#96D0FF"},children:'"large"'}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" SpinnerSize;"})]})]})})})}),` `,(0,e.jsx)(n.h3,{id:"with-text-and-custom-style",children:"With text and custom style"}),` `,(0,e.jsx)(r,{name:"spinner-with-text",children:(0,e.jsx)(n.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`import React from "react"; import { Spinner } from "@/components/ui/extension/spinner"; const SpinnerWithText = () => { return (

Loading... Loading with custom style

); }; export SpinnerWithText; `,__src__:"src/registry/default/example/extra-new/spinner/usage/spinner-with-text.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`import React from "react"; import { Spinner } from "@/components/ui/extension/spinner"; const SpinnerWithText = () => { return (

Loading... Loading with custom style

); }; export SpinnerWithText; `,__src__:"src/registry/default/example/extra-new/spinner/usage/spinner-with-text.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" React "}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" { Spinner } "}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/spinner"'}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#DCBDFB"},children:" SpinnerWithText"}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" () "}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F47067"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#96D0FF"},children:'"flex items-center gap-3"'}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#8DDB8C"},children:"Spinner"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:">Loading..."})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#8DDB8C"},children:"Spinner"}),(0,e.jsx)(n.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#96D0FF"},children:'"text-red-400"'}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#8DDB8C"},children:"span"}),(0,e.jsx)(n.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#96D0FF"},children:'"text-red-400"'}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:">Loading with custom style"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" SpinnerWithText;"})]})]})})})}),` `,(0,e.jsx)(n.h3,{id:"toggle-spinner",children:"Toggle spinner"}),` `,(0,e.jsx)(r,{name:"spinner-toggle",children:(0,e.jsx)(n.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import React, { useState } from "react"; import { Spinner } from "@/components/ui/extension/spinner"; import { Button } from "@/components/ui/button"; const SpinnerToggle = () => { const [show, setShow] = useState(false); return (

); }; export SpinnerToggle; `,__src__:"src/registry/default/example/extra-new/spinner/usage/spinner-toggle.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`"use client"; import React, { useState } from "react"; import { Spinner } from "@/components/ui/extension/spinner"; import { Button } from "@/components/ui/button"; const SpinnerToggle = () => { const [show, setShow] = useState(false); return (

); }; export SpinnerToggle; `,__src__:"src/registry/default/example/extra-new/spinner/usage/spinner-toggle.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" React, { useState } "}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" { Spinner } "}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/spinner"'}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" { Button } "}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#96D0FF"},children:' "@/components/ui/button"'}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#DCBDFB"},children:" SpinnerToggle"}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" () "}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F47067"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" ["}),(0,e.jsx)(n.span,{style:{color:"#6CB6FF"},children:"show"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#6CB6FF"},children:"setShow"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:"] "}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#DCBDFB"},children:" useState"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#6CB6FF"},children:"false"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F47067"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#96D0FF"},children:'"flex items-center gap-5"'}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#8DDB8C"},children:"Button"}),(0,e.jsx)(n.span,{style:{color:"#6CB6FF"},children:" onClick"}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:"() "}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#DCBDFB"},children:" setShow"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:"(("}),(0,e.jsx)(n.span,{style:{color:"#F69D50"},children:"pre"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:") "}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:" !"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:"pre)"}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:">toggle spinner"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#8DDB8C"},children:"Spinner"}),(0,e.jsx)(n.span,{style:{color:"#6CB6FF"},children:" show"}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:"show"}),(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F47067"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#ADBAC7"},children:" SpinnerToggle;"})]})]})})})}),` `,(0,e.jsx)(n.h2,{id:"api-reference",children:"API Reference"}),` `,(0,e.jsx)(n.h3,{id:"props",children:"Props"}),` `,(0,e.jsx)(n.p,{children:"The SmartDatetimeInput component accepts the following props:"}),` `,(0,e.jsx)(a,{data:[{prop:{value:"value",description:"Selected Value."},type:{value:["Option[]"]},defaultValue:{value:["[]"]}},{prop:{value:"className",description:"Customize the style by adding tailwind."},type:{value:["string"]},defaultValue:{value:[""]}},{prop:{value:"size",description:"Spinner size."},type:{value:["'small' | 'medium' | 'large'"]},defaultValue:{value:["medium"]}},{prop:{value:"show",description:"Visibility of spinner."},type:{value:["boolean"]},defaultValue:{value:["false"]}},{prop:{value:"children",description:"Add custom component or text."},type:{value:["React.ReactNode"]},defaultValue:{value:[""]}}]})]})}function u(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(C,{...l})}):C(l)}function s(l,n){throw new Error("Expected "+(n?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return v(b);})(); ;return Component;

value	Option[]	[]
`className`	`string`
`size`	`'small' \| 'medium' \| 'large'`	`medium`
`show`	`boolean`	`false`
`children`	`React.ReactNode`

Spinner

Installation

Run the following command

Usage

Size

With text and custom style

Toggle spinner

API Reference

Props

Table of Content

Github