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
  • 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

Follow these steps to set up the project locally:

1. Clone the repository:

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

2. Install dependencies:

   npm install
   # or
   yarn install

3. Run the development server:

   npm run dev
   # or
   yarn dev

4. Open your browser: Navigate to http://localhost:3000 to see the application in action.

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 src/components/ui/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