Getting Started
AI-Assisted Development
Governance
Components
Search for a command to run or a page to navigate to.
Spinners provide visual feedback that the application is working on a task, preventing users from thinking the interface has frozen or become unresponsive. They're particularly useful for short loading states where the duration is unpredictable but expected to be brief. Spinners create a sense of activity and progress even when precise completion information isn't available, helping maintain user confidence during asynchronous operations.
Use spinners for loading states that are expected to complete quickly (under 10 seconds) or when you can't show determinate progress. They work well inline with buttons, in empty states while content loads, or as overlays during form submissions. For longer operations, consider using a progress bar with percentage indicators instead. Spinners should be accompanied by descriptive text when possible to explain what's loading or processing.
import { Spinner } from "@strongtie/design-system/spinner"All components accept standard HTML attributes and React props.
import { Spinner } from "@strongtie/design-system/spinner"
export default function Example() {
return <Spinner>{/* Your content here */}</Spinner>
}Components can be styled using the className prop. The design system uses Tailwind CSS for styling.
CSS classes used by this component:
spinnerEnsure proper accessibility attributes are added when implementing this component.