Getting Started

Get up and running with Revolutionary UI Factory in minutes

Prerequisites

Before you begin, make sure you have the following installed:

✓Node.js 18.0 or higher
✓npm 8.0 or higher (or yarn/pnpm)
✓A code editor (we recommend VS Code with our extension)
✓Basic knowledge of your chosen framework (React, Vue, etc.)
✓TypeScript 5.0+ (optional but recommended)

Installation

Install Revolutionary UI Factory using your preferred package manager:

npm install @vladimirdukelic/revolutionary-ui-factory

VS Code Extension

For the best experience, install our VS Code extension "Revolutionary UI Factory" from the marketplace.

Latest Updates (August 2025)

Revolutionary UI Factory v2.0 now supports React 19, Next.js 15 with Turbopack, and Tailwind CSS v4. See the migration guide for upgrade instructions.

View Migration Guide

Basic Setup

Revolutionary UI Factory automatically detects your framework and style system. Simply import and initialize:

import { setup } from '@vladimirdukelic/revolutionary-ui-factory'

// Auto-detects your framework and style system
const ui = setup()

// Or explicitly specify
const ui = setup('react', 'tailwind')

Your First Component

Let's create a data table with 94% less code than traditional approaches:

// Traditional approach: ~800 lines
// Revolutionary UI approach: ~50 lines

const UserTable = ui.createDataTable({
  columns: [
    { id: 'name', header: 'Name', sortable: true },
    { id: 'email', header: 'Email', sortable: true },
    { id: 'role', header: 'Role', filterable: true },
    { id: 'status', header: 'Status', 
      cell: (user) => <StatusBadge status={user.status} /> 
    }
  ],
  data: users,
  features: {
    search: true,
    pagination: true,
    export: true,
    selection: true
  }
})

// That's it! You now have a fully-featured data table

😓

800 lines

Traditional Code

🚀

50 lines

Revolutionary UI

📉

94%

Code Reduction

⏰

~2 hours

Time Saved

Framework Examples

Revolutionary UI Factory works seamlessly with all major frameworks:

import { setup } from '@vladimirdukelic/revolutionary-ui-factory'

const ui = setup('react', 'tailwind')

export default function App() {
  const Dashboard = ui.createDashboard({
    widgets: [
      { type: 'stats', config: statsConfig },
      { type: 'chart', config: chartConfig },
      { type: 'table', config: tableConfig }
    ]
  })
  
  return <Dashboard />
}

<template>
  <Dashboard :widgets="widgets" />
</template>

<script setup>
import { setup } from '@vladimirdukelic/revolutionary-ui-factory'

const ui = setup('vue', 'tailwind')
const Dashboard = ui.createDashboard({ framework: 'vue' })

const widgets = [
  { type: 'stats', config: statsConfig },
  { type: 'chart', config: chartConfig }
]
</script>

import { setup } from '@vladimirdukelic/revolutionary-ui-factory'

const ui = setup('react', 'tailwind')

export default function DashboardPage() {
  const Dashboard = ui.createDashboard({
    widgets: dashboardWidgets,
    layout: 'grid',
    features: {
      realtime: true,
      darkMode: true,
      responsive: true
    }
  })
  
  return (
    <main>
      <Dashboard />
    </main>
  )
}

Next Steps

Now that you've created your first component, explore more possibilities:

🧩

Need Help?

Join our community on Discord or check out our GitHub repository for support and updates.

Join Discord GitHub