Setup

Prerequisites

• Node.js 18 or higher
• Next.js 13+ (App Router recommended)
• Tailwind CSS v4 configured in your project
• shadcn/ui initialized (npx shadcn@latest init)

If you haven't set up shadcn/ui yet, run:

For detailed setup instructions, configuration options, and troubleshooting, refer to the shadcn/ui documentation.

Install a component

Use the shadcn CLI to install any Satisium UI component:

The CLI will:

1. Prompt you to confirm the component.
2. Copy the component source into components/satisium-ui/.
3. Copy any required demo or utility files into your project.
4. Auto-detect and install missing dependencies.

Install a specific variant

Some components have multiple variants (e.g., velocity-strips-image, velocity-strips-video). Install them individually:

Dependencies by component type

The CLI handles most dependencies automatically. If you need to install them manually, the requirements depend on the component category:

WebGL components (Image Effects, some Carousels)

Components built with Three.js require additional packages:

Scroll-driven components (Text Reveals, most Carousels)

Components using GSAP ScrollTrigger require:

Components with no extra dependencies

Components like Wind Trail and Pendulum Trail require no extra dependencies beyond React.

Where files go

After installation, your project will have:

Verify the installation

Import the component in any page or component and render it:

If you see the component render with its default animation, you're ready.

Troubleshooting

• "Module not found: three" — Install the Three.js dependencies manually (see above).
• "Module not found: gsap" — Install GSAP for text-reveal and carousel components.
• Tailwind classes not applying — Ensure you're on Tailwind CSS v4 with @tailwindcss/postcss.
• Fonts or icons missing — Some demos use @hugeicons/react for loading fallbacks. Install it if a demo references it.

Next steps

• Browse Components to find what you need.
• Read How to use for prop references and styling.