Froiden UI
Froiden UI
← All Guides
getting-startedinstallationsetupreact

Getting Started with Froiden UI

Learn how to install and use Froiden UI components in your React or HTML project. Copy, paste, and customize production-ready components in minutes.

Froiden·Apr 10, 2026·4 min

Froiden UI provides production-ready components that you can copy and paste directly into your project. No package installation needed — just grab the code and customize.

How It Works

Every component on Froiden UI comes in two flavors:

  • React (TypeScript) — Built with React 19, Tailwind CSS 4, and optionally Framer Motion
  • Vanilla HTML — Pure HTML/CSS/JS with no framework dependency

Using React Components

1. Prerequisites

Make sure your project has these dependencies:

npm install tailwindcss framer-motion lucide-react

2. Copy the Component

Browse to any component page, click the React tab, and copy the code. Paste it into your project:

src/components/ui/typewriter-text.tsx

3. Import and Use

import TypewriterText from "@/components/ui/typewriter-text";
 
export default function Hero() {
  return (
    <TypewriterText
      words={["Build faster.", "Ship sooner.", "Delight users."]}
      className="text-4xl font-bold"
    />
  );
}

That's it. No config files, no provider wrappers, no build steps.

Using HTML Components

Click the HTML tab on any component page. The code includes everything — markup, styles, and scripts — in a single file. Paste it into any HTML page.

Project Structure

We recommend organizing copied components like this:

src/
  components/
    ui/           ← Froiden UI components go here
      typewriter-text.tsx
      magnetic-button.tsx
      particles-background.tsx
    layout/
    pages/

Tailwind CSS Setup

All components use Tailwind CSS utility classes. If you're using Tailwind CSS 4, you're good to go. For Tailwind CSS 3, the classes are fully compatible.

Customization

Every component accepts standard props for customization:

  • className — Add or override Tailwind classes
  • Component-specific props — Colors, sizes, speeds, etc.

Check the Props table on each component page for the full API.

Need Help?