A tool for creating box shadows for Tailwind CSS. Offers a variety of pre-designed shadows and a generator for custom shadows. Allows easy copying of CSS styles for integration into projects.
Features
Box Shadow Preview
Provides a curated list of box shadows for Tailwind CSS which can be readily used. Users can click on the boxes to copy styles easily.
Tailwind Box Shadow Generator
A tool that allows users to customize box shadows for Tailwind CSS or vanilla CSS. Users can adjust different parameters such as horizontal and vertical offset, blur radius, and color to create desired box shadows.
Component Library
Browse and use a variety of modern UI components and templates that are easily customizable. Just copy-paste them into your projects.
Tailwind CSS Integration
Seamless integration with Tailwind CSS, allowing you to quickly adopt styles and animations.
Next.js and React Support
Components are compatible with Next.js and React, simplifying integration into projects using these frameworks.
Component Library
Provides a collection of UI components for developers to build applications efficiently with consistent design.
Pre-built Templates
Offers ready-to-use templates that developers can customize, saving time on design and layout.
Interactive Demo
Includes interactive demos allowing users to see components in action before implementing.
Code Examples
Provides code snippets for components, aiding developers in seamless integration.
Customization Options
Allows extensive customization of components to fit specific design needs and preferences.
Responsive Design
Components are designed to be responsive, adapting to different screen sizes and devices.
AI Code Editor
Enhance your coding with an AI-powered editor that provides suggestions and optimizations.
AI-Powered Translation
Automatically translate your site content with high accuracy using AI technology.
Collaborative Email
Work with your team to manage and respond to emails quickly and efficiently.
AI-Led SEO Optimization
Optimize your website’s SEO strategies using AI insights and automated processes.
AI Content Creation
Create content more efficiently with AI-generated ideas and suggestions.
Security Simplification
Manage your website security seamlessly with AI-driven simplicity tools.
AI Product Descriptions
Generate product descriptions automatically to save time and enhance your listings.
Startup Landing Page Template
A simple, clean, modern landing page template for startups, aimed at keeping your users engaged.
AI SaaS Template
A multi-page template focused on AI applications offering SaaS solutions.
Playful Marketing Template
An elegant marketing template with playful colors and creative micro-interactions.
Proactiv Marketing Template
A marketing template designed for SaaS companies, with a focus on social media tools.
Agenibis Agency Template
A template for agencies with a modern design, suitable for showcasing services and team information.
DevPro Portfolio Template
A portfolio template for developers featuring a clean and responsive design, ideal for blogs, projects, and events.
Foxtout Marketing Template
A SaaS marketing template with a clean design, perfect for launching single-page websites.
Sidefolio Portfolio Template
A portfolio template for side projects with a modern tiled layout and touch-enabled slider.
Project Setup
Instructions on creating a new Next.js project with TypeScript and ESLint using the command line.
Install Tailwind CSS
Guidance on installing Tailwind CSS and its dependencies using npm.
Configure Template Paths
Modify the tailwind.config.js file to set up content paths for Tailwind CSS.
Add Tailwind Directives
Instructions on adding the Tailwind CSS directives to the project's global CSS file.
Start Build Process
Steps to initiate the development build process using npm.
Using Tailwind in Components
Example of creating a simple component in Next.js using Tailwind CSS classes to style it.
Install Dependencies
Guide on how to install necessary dependencies using npm including fram-er-motion and clsx.
Add utl File
Instructions on creating a utility file for functions using 'clsx' and 'classnames'. This helps simplify class name management in React components.
Base Tailwind Config File
Details for setting up a base Tailwind CSS configuration file, including importing the flattenColorPalette function and adding necessary plugins.
Next.js 15 and React 19 Framer Motion Fix
Provides changes needed in package.json to address compatibility issues with Framer Motion when using Next.js 15 and React 19.
Init Command
The `init` command initializes configuration and adds dependencies for a new project. It adds configuration files like `tailwind.config.js` and sets up CSS variables for the project.
Add Command
The `add` command is used to add components and dependencies to an existing project. It allows specifying components to integrate into the project.
Monorepo Support
Supports specifying the path to a workspace in a monorepo using the `-c` or `--cwd` option when running the `init` or `add` commands.
Installation via CLI
Allows installation of Aceternity UI components directly from a URL using the CLI, making it easier to incorporate specific components into a project.
3D Card Effect
A card perspective effect where you hover over the card to elevate the elements, utilizing CSS perspective for visual impact.
Preview and Code Toggle
Offers the ability to toggle between a live preview and the source code for the 3D Card Effect demonstration.
Installation via CLI
Quick installation using CLI with a provided command to add the necessary components.
Examples
Provides examples with rotation effects to illustrate how the 3D Card Effect can be applied.
Props Customization
Detailed props list allowing customization such as translation and rotation in different axes, HTML tag choice, and className for both container and items.
3D Animated Pin
A gradient pin that animates on hover, perfect for product links. It provides a visually engaging way to display product information with a hover effect.
Installation Instructions
Provides CLI and manual instructions to install the necessary dependencies and add utility files for setting up the 3D animated pin component.
Code Preview
Allows users to preview and copy the source code of the 3D pin component, which utilizes React and Tailwind CSS for customization.
Props Configuration
Defines customizable properties such as classname, containerClassname, title, href, and children, allowing users to easily configure the component behavior and appearance.
Preview and Code View
Allows users to preview the animated modal component and view the source code to understand its implementation.
Installation Instructions
Provides detailed step-by-step guides for installing necessary dependencies and setting up the component in a coding project.
Props Table
Lists all available props for the component such as ModalProvider, Modal, ModalTrigger, ModalBody, ModalContent, ModalFooter, Overlay, and useOutsideClick, along with their types and descriptions.
Animated Testimonials
A component for displaying testimonials with images and quotes, transitioning automatically or manually between them.
Installation Guide
Provides CLI and manual installation instructions, including dependency installation and file setup.
Props Configuration
Allows customization of the component with props like 'testimonials' (an array of testimonial objects) and 'autoplay' (boolean).
Preview and Code Display
Allows users to preview the component rendering and view or copy the source code for implementation.
Animated Tooltip
A cool tooltip that reveals on hover and follows the mouse pointer. It is customizable and can display an array of items each defined with an id, name, designation, and image.
Carousel Component
Multiple Apple-style cards displayed in a scrolling carousel. Users can see different content by scrolling horizontally.
Card Component
Each card contains an image and text content, designed to be displayed within the carousel. Customizable via props.
Example Usage
Provides example code for how to implement the Carousel and Card components in a project. Includes HTML and custom CSS classes.
Aurora Background
A subtle Aurora or Southern Lights background for your website that adds a gradient effect.
Installation Instructions
Detailed setup instructions are provided for integrating the Aurora Background into a project using CLI and manual methods.
Background Beams
Multiple background beams that follow a path of SVG, suitable for creating a hero section background.