āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/ibelick/motion-primitives/installation/page ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
export const metadata = { title: 'Installation - Motion-Primitives', description: 'How to install Motion-Primitives in your project.', };
import CodeBlock from '@/components/website/code-block';
<Step>Install Tailwind CSS</Step>
Components are styled using Tailwind CSS. Follow the official installation guide to add it to your project.
<Step>Install Motion</Step>
Components are animated using Motion.
<CodeBlock code={npm install motion} lang='bash' className='h-[52px]' />
<Step>Add the utility helper</Step>
Create a lib/utils.ts file to manage Tailwind CSS classes:
<Step>Install icons</Step>
Add Lucide React icons:
<CodeBlock code={npm install lucide-react} lang='bash' className='h-[52px]' />
<Step>That's it</Step>
You can now start adding components to your project.
<InstallationCli value='text-effect' />The command above will add the Text Effect component to your project. You can then import it anywhere in your project.
You can also choose manual installation and copy the code from the components page.
</Steps>ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā