Implement slide-based navigation in Zag.js apps with a reusable Carousel component.
npx skills add https://github.com/TechsioCZ/new-engine --skill carousel-usage
Please help me install this Agent Skill. Skill: carousel-usage Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/carousel-usage Command: npx skills add https://github.com/TechsioCZ/new-engine --skill carousel-usage
Carousel usage enables developers to implement slide-based navigation in Zag.js-backed apps using the @techsio/ui-kit Carousel, providing a consistent user experience with built-in controls, indicators, and responsive sizing.
Import the Carousel from @techsio/ui-kit/molecules/carousel and render it with your slides data to enable slide-based navigation.
High-intent search queries and answers about installing and using this skill.
To add a carousel in a Zag.js React app, import the reusable Carousel component from your UI kit and render it with your slides data. It provides built-in slide navigation controls, indicators, and responsive sizing for a consistent user experience.
A Zag.js carousel component supports customizable props including slideCount, size, aspectRatio, objectFit, controlPosition, orientation, loop, autoplay, slidesPerPage, and slidesPerMove. These props allow you to control layout, behavior, and visual presentation.
Yes, you can enable autoplay and thumbnail navigation in a React carousel. The component supports an optional autoplay feature, and best practices recommend using a Gallery component to handle thumbnail rendering alongside the main slides.
The best way to structure slide data for a React UI kit carousel is to separate your slides data from the rendering logic. This pattern ensures clean component architecture and makes it easier to maintain and update the carousel content.
Yes, the Zag.js carousel supports responsive sizing through customizable size and aspectRatio props. You can also use the objectFit prop to control how your slide content scales and fits within the defined dimensions.
TechsioCZRender labeled single or multiple selects with Zag.js in React apps.
Lev-itConvert JSON specifications into interactive terminal UIs with data binding.
TechsioCZRender image galleries with synchronized thumbnails and carousel for React/Next.js apps.
TechsioCZStandardize Zag.js-based compound UI components across React projects.
