JSPM

  • Created
  • Published
  • Downloads 7
  • Score
    100M100P100Q56695F
  • License ISC

Package Exports

  • my-animated-components
  • my-animated-components/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (my-animated-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

My Animated Components

A comprehensive React component library with built-in animations and customization options.

Documentation

For detailed documentation and examples, visit the official documentation.

Features

  • 🎨 Customizable colors and sizes
  • 🌟 Built-in animations using Framer Motion
  • 📱 Responsive design
  • 🎭 Accessible components
  • 🧩 Easy to use and integrate

Installation

Install the package using npm:

npm install my-animated-components

Or using yarn:

yarn add my-animated-components

Usage

Import the components you need in your React application:

import { Button, Card, Modal } from 'my-animated-components';

Then use them in your components:

function MyComponent() {
  return (
    <Card>
      <h2>Welcome to My App</h2>
      <Button color="primary" motionVariant="fadeIn">
        Click me!
      </Button>
    </Card>
  );
}

Available Components

  • Accordion
  • Alert
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Card (with CardBody, CardFooter, CardHeader)
  • Checkbox
  • Container
  • Dropdown
  • FileUpload
  • Flex
  • Grid
  • Heading
  • IconButton
  • Input
  • List (with ListItem)
  • Modal (with ModalBody, ModalFooter, ModalHeader)
  • NavItem
  • Navbar
  • Offcanvas (with OffcanvasBody, OffcanvasHeader)
  • Pagination
  • ProgressBar
  • Radio
  • RangeSlider
  • Select
  • Skeleton
  • Slider
  • Stepper
  • Switch
  • Table (with TableBody, TableCell, TableHead, TableRow)
  • Tabs
  • Text
  • Textarea
  • Tooltip

Customization

Most components accept props for customization, including:

  • color: Choose from 'primary', 'secondary', 'success', 'danger', 'warning', 'info'
  • size: Usually 'xs', 'sm', 'md', 'lg', 'xl'
  • motionVariant: Animation variant (e.g., 'fadeIn', 'slideUp', 'zoomIn')

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.