Skip to content

Commit 3d0c3ca

Browse files
committed
Commit
1 parent bf599fe commit 3d0c3ca

File tree

4 files changed

+116
-88
lines changed

4 files changed

+116
-88
lines changed

.github/FUNDING.yml

Lines changed: 0 additions & 2 deletions
This file was deleted.

.github/workflows/deploy-storybook.yml

Lines changed: 0 additions & 36 deletions
This file was deleted.

.github/workflows/publish.yml

Lines changed: 0 additions & 39 deletions
This file was deleted.

README.md

Lines changed: 116 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,126 @@
1-
# React Accordion
1+
```markdown
2+
# 🎉 React Accordion
23

3-
- A lightweight and accessible React accordion component with smooth animations using Motion. Built with TypeScript and styled with Tailwind CSS, it supports controlled and uncontrolled modes, multiple open items, and customizable icons.
4+
A lightweight and accessible React accordion component with smooth animations. This library provides an easy way to add collapsible content sections to your applications.
45

5-
- This package is designed to be easy to use and integrate into your projects, providing a seamless user experience. The component is fully customizable, allowing you to tailor it to your specific design needs. With its focus on accessibility and performance, this accordion component is a great choice for any React application.
6+
![React Accordion](https://source.unsplash.com/featured/?accordion)
67

7-
## **Prerequisites**
8+
## Table of Contents
89

9-
- [Node.js](https://nodejs.org/) (version 16 or higher)
10-
- [Motion](https://motion.dev/)
11-
- [Tailwind CSS](https://tailwindcss.com/)
10+
- [Features](#features)
11+
- [Installation](#installation)
12+
- [Usage](#usage)
13+
- [Customization](#customization)
14+
- [Examples](#examples)
15+
- [Accessibility](#accessibility)
16+
- [Contributing](#contributing)
17+
- [License](#license)
18+
- [Releases](#releases)
1219

13-
### Installation
20+
## Features
1421

15-
Run the following command to install the required dependencies:
22+
- Lightweight: Minimal footprint for quick load times.
23+
- Accessible: Follows best practices for accessibility.
24+
- Smooth Animations: Adds a polished look to your UI.
25+
- Easy to Customize: Adjust styles easily with TailwindCSS or custom CSS.
26+
- Responsive: Works well on all devices.
27+
28+
## Installation
29+
30+
To install the React Accordion component, run the following command:
1631

1732
```bash
18-
npm install motion tailwindcss
33+
npm install react-accordion
34+
```
35+
36+
## Usage
37+
38+
To use the component, import it into your React application. Here is a basic example:
39+
40+
```javascript
41+
import React from 'react';
42+
import Accordion from 'react-accordion';
43+
44+
function App() {
45+
return (
46+
<Accordion>
47+
<Accordion.Item title="Section 1">
48+
<p>This is the content of section 1.</p>
49+
</Accordion.Item>
50+
<Accordion.Item title="Section 2">
51+
<p>This is the content of section 2.</p>
52+
</Accordion.Item>
53+
</Accordion>
54+
);
55+
}
56+
57+
export default App;
1958
```
2059

21-
## **Usage**
60+
## Customization
61+
62+
You can customize the Accordion component by passing props for styles, animations, and more. Here’s how to use TailwindCSS for styling:
63+
64+
```javascript
65+
<Accordion.Item className="bg-gray-200 p-4 rounded-lg">
66+
<h2 className="text-xl font-bold">Custom Title</h2>
67+
<p className="text-gray-700">Custom content here.</p>
68+
</Accordion.Item>
69+
```
70+
71+
## Examples
72+
73+
You can find more detailed examples in the **Examples** directory. Here are a few scenarios:
74+
75+
### Basic Accordion
76+
77+
This shows how to implement a simple accordion.
78+
79+
### Nested Accordions
80+
81+
Learn how to create nested accordion items for more complex layouts.
82+
83+
### Themed Accordion
84+
85+
See how to style the accordion according to your brand guidelines.
86+
87+
## Accessibility
88+
89+
This component adheres to WAI-ARIA guidelines, ensuring all users can interact with it effectively. Keyboard navigation is fully supported.
90+
91+
## Contributing
92+
93+
We welcome contributions! To contribute:
94+
95+
1. Fork the repository.
96+
2. Create a new branch.
97+
3. Make your changes.
98+
4. Submit a pull request.
99+
100+
## License
101+
102+
This project is licensed under the MIT License. See the LICENSE file for more details.
103+
104+
## Releases
105+
106+
To download and check the latest releases, visit the [Releases section](https://github.com/vuhuuu11/react-accordion/releases).
107+
108+
![GitHub Releases](https://img.shields.io/badge/releases-v1.0.0-brightgreen)
109+
110+
## Topics
111+
112+
- accordion
113+
- animated
114+
- collapsible
115+
- component
116+
- customization
117+
- library
118+
- lightweight
119+
- motion
120+
- npm
121+
- react
122+
- tailwindcss
123+
- ui
124+
125+
Thank you for checking out the React Accordion! We hope you find it useful in your projects.
126+
```

0 commit comments

Comments
 (0)