1.0.3 • Published 9 months ago
shadcn-ui-ellipsis v1.0.3
shadcn-ui-ellipsis
A React component that displays an animated ellipsis, customizable with various styles, animations, and options.
Installation
To install the package, use npm or yarn:
npm install shadcn-ui-ellipsis
# or
yarn add shadcn-ui-ellipsisUsage
Import and use the Ellipsis component in your React project:
import React from "react";
import { Ellipsis } from "shadcn-ui-ellipsis";
function App() {
return (
<div>
<h1>Ellipsis Component Example</h1>
<Ellipsis variant="primary" size="lg" maxDots={5} speed={300} />
</div>
);
}
export default App;Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
variant | "default" \| "primary" \| "secondary" \| "destructive" \| "success" \| "warning" \| "ghost" \| "link" | "default" | Sets the color variant of the ellipsis. |
size | "default" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" | "default" | Controls the size of the ellipsis text. |
animation | "default" \| "bounce" \| "pulse" | "default" | Sets the animation style for the ellipsis. |
speed | number | 500 | The speed in milliseconds for the ellipsis animation cycle. |
maxDots | number | 3 | The maximum number of dots displayed before resetting. |
inline | boolean | true | Sets whether the ellipsis is displayed inline or as a block. |
alignment | "start" \| "center" \| "end" | "center" | Aligns the ellipsis content within the container. |
asChild | boolean | false | If true, allows the ellipsis component to inherit the behavior of its parent. |
Example Usages
<Ellipsis variant="success" size="xl" maxDots={4} speed={200} animation="pulse" />
<Ellipsis variant="warning" size="sm" maxDots={2} />
<Ellipsis inline={false} alignment="start" />Customization
You can customize the appearance and behavior of the Ellipsis component using the available props. This makes it adaptable for various use cases, from loading indicators to subtle animations in your UI.
License
This package is licensed under the MIT License. See the LICENSE file for more information.
Contributing
Contributions are welcome! Please read the contributing guidelines for details on how to submit a pull request or open issues.