Skip to content

Getting Started

Welcome to Arc Carousel, a powerful and flexible React library that will help you create stunning, interactive carousels for your web projects. In this guide, we’ll walk you through the steps to get started with the library and have your carousels up and running in no time.


Arc Carousel is a React component library. To use it effectively, you should have a basic understanding of React. If you are new to React, you can refer to the documentation to get started.


Before you can begin using Arc Carousel, you need to install it into your project. You can do this using the package manager of your choice.

Terminal window
npm install arc-carousel


Once you’ve installed Arc Carousel, you can import it into your React application and start using it.

import React from 'react'
import { Carousel } from 'arc-carousel'
import 'arc-carousel/styles.css' // Import the default styles
function MyCarousel() {
return (
<Carousel.Slide>{/* Add your carousel item here */}</Carousel.Slide>
<Carousel.Slide>{/* Add your carousel item here */}</Carousel.Slide>
<Carousel.PrevButton />
<Carousel.Pagination />
<Carousel.NextButton />
export default MyCarousel

Now you have a functional carousel, with minimal styling and mobile support. You can customize it to suit your needs by adding content, styles, and options as needed.

Basic Configuration

Arc Carousel is designed to be very simple to use, so all settings are optional. Here’s an example of the default configuration options:

import React from 'react'
import { Carousel } from 'arc-carousel'
import 'arc-carousel/styles.css'
function MyCarousel() {
return (
// slidesPerPage={{ base: 1, sm: 2, md: 3, lg: 4, xl: 5, '2xl': 6 }} // responsive
onSlideClick={(index: number, event: React.MouseEvent) => {}}
onPageChange={(prevIndex: number, nextIndex: number) => {}}
onPageChangeEnd={(index: number) => {}}
{/* ... */}
export default MyCarousel

API Reference

For more detailed information on how to use and customize Arc Carousel, check out our API Reference.

Get Involved

We welcome contributions and feedback from the community. If you encounter issues, have feature requests, or want to contribute to the development of Arc Carousel, please visit our GitHub repository.

That’s it! You’re all set to create beautiful and accessible carousels with Arc Carousel. If you have any questions or need assistance, don’t hesitate to reach out.

Happy carousel building!