Shadcn/UI - Animated Tabs

Welcome to the Shadcn/UI - Animated Tabs Styles repository! This project is a Next.js application that showcases a modified version of the Shadcn tab component with added animations, providing a smooth and visually appealing user experience.

Table of Contents

• Shadcn/UI - Animated Tabs
  • Table of Contents
  • Introduction
  • Features
  • Installation
    • CLI Installation (Recommended)
    • Manual
  • Usage
  • Contributing
  • License
  • Author
  • Stats
  • Live Preview
  • Star History

Introduction

Shadcn/UI - Animated Tabs is an open-source project that demonstrates how to add animations to the default Shadcn tab component. By integrating animated transitions, the project aims to enhance the user experience with smoother and more engaging tab interactions. The application is built using Next.js, and it includes a theme switcher to dynamically adapt to light and dark themes.

Features

• Animated Tabs: The tab component is enhanced with smooth animations when switching between tabs.
• Dynamic Theming: Tabs adapt seamlessly to the selected theme using Shadcn's CSS variables.
• Next.js Framework: Built with Next.js for server-side rendering and optimized performance.
• Customizable Animations: Easily modify the animations to suit your needs.
• Theme Switching: Includes a theme switcher component to effortlessly toggle between light and dark themes.

Installation

You can install the animated tabs component in two ways:

CLI Installation (Recommended)

1. Make sure you have shadcn/ui set up in your project. If not, follow the official setup guide.

2. Run the following command in your project directory:

npx shadcn@latest add https://shadcn-ui-animated-tabs.vercel.app/r/animated-tabs.json

Manual

1. Make sure you have shadcn/ui set up in your project. If not, follow the official setup guide.

2. Go to registry/animated-tabs/animated-tabs.tsx and copy the code.

3. Paste the code into components/ui/tabs.tsx.

Usage

To use this project, follow these steps:

1. Explore the tabs:

   • Interact with the tabs to see the smooth animations between content transitions.
   • Switch between themes to see how the styles adapt.

2. Modify the animations:

   • Customize the tab animations by modifying the JavaScript in the file located at registry/animated-tabs/animated-tabs.tsx.

3. Integrate into your own project:

   • Use the code and animation styles as a reference or starting point for integrating animated tabs into your own Next.js application.

Contributing

Contributions are welcome! If you have any suggestions, bug reports, or improvements, please feel free to create an issue or submit a pull request.

1. Fork the repository: Click the "Fork" button on the top right corner of this page to create a copy of this repository under your GitHub account.

2. Clone the forked repository:

   git clone https://github.com/list-jonas/shadcn-ui-animated-tabs.git
   cd shadcn-ui-animated-tabs

3. Create a new branch:

   git checkout -b your-branch-name

4. Make your changes: Implement your changes and commit them with descriptive messages.

5. Push your changes:

   git push origin your-branch-name

6. Create a pull request: Go to the original repository and create a pull request with a description of your changes.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Author

Created by Jonas. For more projects and information, visit Jonas' Website.

Stats

Live Preview

Check out the live preview of the site here.

---

Thank you for checking out Shadcn/UI - Animated Tabs Styles! We hope this project serves as a useful reference for adding animations to the Shadcn tab component. If you have any questions or feedback, feel free to reach out. Happy coding!

Star History