Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Dialog
- EmptyNew
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input GroupNew
- KbdNew
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- SkeletonNew
- Slider
- SpinnerNew
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Resources
Spinner
An indicator that can be used to show a loading state.
import { Spinner } from "@/components/ui/spinner"
export default function SpinnerDemo() {
return <Spinner />
}
Installation
pnpm dlx shadcn@latest add @coss/spinner
Usage
import { Spinner } from "@/components/ui/spinner"<Spinner />Examples
Input Group
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from "@/components/ui/input-group"
import { Spinner } from "@/components/ui/spinner"
export default function InputGroupLoading() {
return (
<InputGroup>
<InputGroupInput type="search" placeholder="Searching…" disabled />
<InputGroupAddon align="inline-end">
<Spinner />
</InputGroupAddon>
</InputGroup>
)
}
Button
import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"
export default function ButtonLoading() {
return (
<Button disabled>
<Spinner />
Loading...
</Button>
)
}
API Reference
Spinner
Use the Spinner component to display a loading indicator.
| Prop | Type | Default |
|---|---|---|
className | string |
<Spinner />