Action Swap Roll
beui/action-swap-rollFreeComponent
The next text or icon rolls in from below with blur.
Install it
npx shadcn@latest add https://beui.dev/r/action-swap-roll.jsonSource
1"use client";2// beui.dev/components/motion/action-swap34import {5 ActionSwapButton,6 ActionSwapIcon,7 ActionSwapText,8 type ActionSwapButtonProps,9 type ActionSwapIconProps,10 type ActionSwapTextProps,11} from "./action-swap";1213export type {14 ActionSwapButtonSize,15 ActionSwapButtonVariant,16 ActionSwapItem,17} from "./action-swap";1819export type ActionSwapRollButtonProps = Omit<ActionSwapButtonProps, "animation">;20export type ActionSwapRollTextProps = Omit<ActionSwapTextProps, "animation">;21export type ActionSwapRollIconProps = Omit<ActionSwapIconProps, "animation">;2223export function ActionSwapRollButton(props: ActionSwapRollButtonProps) {24 return <ActionSwapButton {...props} animation="roll" />;25}2627export function ActionSwapRollText(props: ActionSwapRollTextProps) {28 return <ActionSwapText {...props} animation="roll" />;29}3031export function ActionSwapRollIcon(props: ActionSwapRollIconProps) {32 return <ActionSwapIcon {...props} animation="roll" />;33}
What it pulls in
npm packages
Files it writes
More from beui
All 105 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Action Swap Bluraction-swap-blur | beui | Components | Free | 3 deps · 4 files | |
| Action Swap Cascadeaction-swap-cascade | beui | Components | Free | 3 deps · 4 files | |
| Agent Activityagent-activity | beui | Components | Free | 4 deps · 9 files | |
| Agent Loading States Agent Progressagent-progress | beui | Components | Free | 3 deps · 3 files | |
| AI Sidebarai-sidebar | beui | Components | Free | 4 deps · 5 files | |
| Animated Badgeanimated-badge | beui | Components | Free | 4 deps · 3 files | |
| Number Animation Animated Numberanimated-number | beui | Components | Free | 3 deps · 3 files | |
| Animated Sidebaranimated-sidebar | beui | Components | Free | 4 deps · 4 files |
