Using shadxn for Component Integration

shadxn is a powerful CLI tool that streamlines the addition of various component types to your project, leveraging the extensive libraries of both shadcn and aceternity. This guide covers the types of components available and how to integrate them into your project effectively.

Component Types in shadxn

shadxn enhances your development workflow by providing access to a diverse set of component types:

• UI Components: The default component type, UI components are reusable interface elements.
• Example Components: These components demonstrate the use of UI components, showcasing best practices and implementation details.
• Page Components: Specifically for Next.js projects, these components represent app route pages, facilitating rapid development of common page layouts.

Adding Components from shadcn

shadxn includes all the default shadcn components and adds two additional component types: example and page.

Adding a Page Component

When adding a page component and specifying the type with -t page, you will be prompted to set the output directory, which defaults to src/app.

shadxn add -t page

To explore available page components, visit ui.shadcn.com.

Integrating Components from aceternity

aceternity components, available through their official website ui.aceternity.com, include UI and example component types. These beautifully crafted components can be seamlessly integrated into your projects with shadxn.

Adding a Component from aceternity

To add the mac-scroll component from aceternity available under shadxn registry, which is used on our homepage, you can use the following command:

shadxn add macbook-scroll -r shadxn

Alternatively, to browse and select from available shadxn components:

shadxn add -r shadxn

You'll be prompted to choose the component you wish to add.

Note on Integration

Some components from aceternity may require additional configuration steps, such as updating your tailwind.config file, to function correctly within your project. shadxn facilitates this by copying the selected component, any other registered component it depends on, and any necessary npm dependencies.

shadxn provides a flexible and efficient way to enhance your projects with a range of components from both shadcn and aceternity. By understanding the types of components available and how to add them to your project, you can leverage shadxn to accelerate your development process and incorporate beautifully designed elements into your applications.