Shadcn Animated Tabs is an open-source project that demonstrates how to add animations to the default Shadcn tab component.
| Frontend | Next.js |
| Platform Usage | Cross-Platform |
| - | CLI |
| Programming Languages | TypeScript |
| - | TypeScript |
| Styling | Tailwind Css |
| - | Tailwind Css |
| Use Case | Proof of Concept |
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.
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.
You can install the animated tabs component in two ways:
Make sure you have shadcn/ui set up in your project. If not, follow the official setup guide.
Run the following command in your project directory:
npx shadcn@latest add https://shadcn-ui-animated-tabs.vercel.app/r/animated-tabs.json
Make sure you have shadcn/ui set up in your project. If not, follow the official setup guide.
Go to registry/animated-tabs/animated-tabs.tsx and copy the code.
Paste the code into components/ui/tabs.tsx.
To use this project, follow these steps:
Explore the tabs:
Modify the animations:
registry/animated-tabs/animated-tabs.tsx.Integrate into your own project:
Contributions are welcome! If you have any suggestions, bug reports, or improvements, please feel free to create an issue or submit a pull request.
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.
Clone the forked repository:
git clone https://github.com/list-jonas/shadcn-ui-animated-tabs.git
cd shadcn-ui-animated-tabs
Create a new branch:
git checkout -b your-branch-name
Make your changes: Implement your changes and commit them with descriptive messages.
Push your changes:
git push origin your-branch-name
Create a pull request: Go to the original repository and create a pull request with a description of your changes.
This project is licensed under the MIT License. See the LICENSE file for more details.
Created by Jonas. For more projects and information, visit Jonas' Website.
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!
Ready to turn your projects into opportunities and build your future? Let’s get started!
Get Started
