3b:["$","span","1",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}] 3c:["$","span","2",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"default"}] 3d:["$","span","3",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}] 3e:["$","span","4",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"function"}] 3f:["$","span","5",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}] 40:["$","span","6",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"MotionPressDemo"}] 41:["$","span","7",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"() {"}] 42:["$","span","6",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","1",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"return"}],["$","span","2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" ("}]]}] 43:["$","span","7",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" <"}],["$","span","1",{"style":{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"div"}],["$","span","2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","3",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"className"}],["$","span","4",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","5",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"grid grid-cols-2 gap-x-10 gap-y-4 text-center\""}],["$","span","6",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":">"}]]}] 44:["$","span","8",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" <"}],["$","span","1",{"style":{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"p"}],["$","span","2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","3",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"className"}],["$","span","4",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","5",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"text-xs text-muted-foreground\""}],["$","span","6",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":">Without"}]]}] 45:["$","span","9",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" <"}],["$","span","1",{"style":{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"p"}],["$","span","2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","3",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"className"}],["$","span","4",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","5",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"text-xs text-muted-foreground\""}],["$","span","6",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":">With scale(0.97)"}]]}] 46:["$","span","10",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[]}] 47:["$","span","11",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" <"}],["$","span","1",{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"Button"}],["$","span","2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","3",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"className"}],["$","span","4",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","5",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"active:scale-100!\""}],["$","span","6",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":">Save changes"}]]}] 48:["$","span","12",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" <"}],["$","span","1",{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"Button"}],["$","span","2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":">Save changes"}]]}] 49:["$","span","13",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[]}] 4a:["$","span","14",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" <"}],["$","span","1",{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"Button"}],["$","span","2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","3",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"variant"}],["$","span","4",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","5",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"outline\""}],["$","span","6",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","7",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"className"}],["$","span","8",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","9",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"active:scale-100!\""}],["$","span","10",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":">"}]]}] 4b:["$","span","15",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" <"}],["$","span","1",{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"HeartIcon"}],["$","span","2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","3",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"data-icon"}],["$","span","4",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","5",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"inline-start\""}],["$","span","6",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" />"}]]}] 4c:["$","span","16",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" Like"}]]}] 4d:["$","span","17",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}]]}] 4e:["$","span","18",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" <"}],["$","span","1",{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"Button"}],["$","span","2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","3",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"variant"}],["$","span","4",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","5",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"outline\""}],["$","span","6",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":">"}]]}] 4f:["$","span","19",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" <"}],["$","span","1",{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"HeartIcon"}],["$","span","2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","3",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"data-icon"}],["$","span","4",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","5",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"inline-start\""}],["$","span","6",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" />"}]]}] 50:["$","span","20",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" Like"}]]}] 51:["$","span","21",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}]]}] 52:["$","span","22",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[]}] 53:["$","span","23",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" <"}],["$","span","1",{"style":{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"div"}],["$","span","2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","3",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"className"}],["$","span","4",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","5",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"rounded-xl border bg-card p-4 text-left text-sm shadow-xs select-none\""}],["$","span","6",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":">Card"}]]}] 54:["$","span","24",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" <"}],["$","span","1",{"style":{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"div"}],["$","span","2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}],["$","span","3",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"className"}],["$","span","4",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"="}],["$","span","5",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"\"rounded-xl border bg-card p-4 text-left text-sm shadow-xs transition-transform duration-150 ease-out select-none active:scale-[0.97]\""}],["$","span","6",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":">"}]]}] 55:["$","span","25",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" Card"}]]}] 56:["$","span","26",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}]]}] 57:["$","span","27",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" "}]]}] 58:["$","span","28",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":" )"}]]}] 59:["$","span","29",{"className":"min-h-6 px-4 pr-12 whitespace-pre","children":[["$","span","0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"className":"text-(--shiki-light) dark:text-(--shiki-dark)","children":"}"}]]}]

Property	transform: scale(0.97)
Duration	150ms
Easing	--ease-out
Trigger	:active
Built with	CSS only

Specs#

Guidelines#

Use for

Avoid