Framework Support

Aki UI works universally across all React-based frameworks without any adapters!

Supported Frameworks

React

16.8+

Standard React support with hooks

✅ SupportedUniversal

Next.js

13.0+

App Router & Pages Router support

✅ SupportedUniversal

Remix

1.0+

SSR & hydration optimized

✅ SupportedUniversal

Gatsby

4.0+

Static generation ready

✅ SupportedUniversal

Vite

4.0+

Hot reload support

✅ SupportedUniversal

CRA

5.0+

Create React App support

✅ SupportedUniversal

Angular

14.0+

React wrapper via Angular Elements

🚧 PlannedUniversal

Universal Compatibility

Aki UI v1.1.4+ supports universal framework compatibility. One simple import works across all React-based frameworks!

🚀 Benefits

• No adapters needed
• Smaller bundle size
• Consistent API
• Better performance
• Easier maintenance

✨ Features

• SSR compatible
• Framework detection
• TypeScript ready
• Hot reload support
• Zero configuration

Universal Usage

The same import works across all frameworks:

import { Button, Card, Input, Badge } from '@akitectio/aki-ui'
import '@akitectio/aki-ui/css'

function App() {
  return (
    <Card>
      <h1>Universal Components <Badge>Works Everywhere!</Badge></h1>
      <Input placeholder="Type something..." />
      <Button variant="primary">Submit</Button>
    </Card>
  )
}

Framework-Specific Examples

Next.js App Router

'use client' // Only for interactive components

import { Button, Card } from '@akitectio/aki-ui'

export default function Page() {
  return (
    <Card>
      <Button>Next.js Component</Button>
    </Card>
  )
}

Remix

import { Button, Card } from '@akitectio/aki-ui'

export default function RemixRoute() {
  return (
    <Card>
      <Button>Remix Component</Button>
    </Card>
  )
}

Gatsby

import { Button, Card } from '@akitectio/aki-ui'

const GatsbyPage = () => (
  <Card>
    <Button>Gatsby Component</Button>
  </Card>
)

export default GatsbyPage

Vite React

import { Button, Card } from '@akitectio/aki-ui'

function App() {
  return (
    <Card>
      <Button>Vite Component</Button>
    </Card>
  )
}

export default App

Angular (Planned)

🔄 Coming Soon: Angular support via React wrapper and Angular Elements.

// Future Angular integration
import { AkiUIModule } from '@akitectio/aki-ui/angular'

@NgModule({
  imports: [AkiUIModule],
  // ...
})
export class AppModule { }

// Or using Angular Elements
import '@akitectio/aki-ui/angular-elements'

// Use in template:
// <aki-button variant="primary">Angular Button</aki-button>

Advanced Features

Framework Detection

Optional framework detection for advanced optimizations:

import { getFrameworkInfo } from '@akitectio/aki-ui'

function MyComponent() {
  const { framework, isSSR } = getFrameworkInfo()
  
  // Optional optimizations based on framework
  if (framework === 'nextjs') {
    // Next.js specific logic
  }
  
  return <div>Running on {framework}</div>
}

Universal Event Handlers

Consistent event handling across all frameworks:

import { createEventHandler } from '@akitectio/aki-ui'

function MyForm() {
  const handleSubmit = createEventHandler((data) => {
    // Works reliably across all frameworks
    console.log('Form submitted:', data)
  })
  
  return <Button onClick={handleSubmit}>Submit</Button>
}

Migration Guide

If you were using adapters before, migration is simple:

❌ Old (with adapters)

import { Button } from '@akitectio/aki-ui/adapters/nextjs'
import { Button } from '@akitectio/aki-ui/adapters/remix'

✅ New (universal)

import { Button } from '@akitectio/aki-ui'

🎉 That's it! Just update your imports and you're done. All component usage stays the same.

Framework Comparison

Framework	Support	Version	Features
React	✅ Full	16.8+	Hooks, Context, Suspense
Next.js	✅ Full	13.0+	App Router, Pages Router, SSR
Remix	✅ Full	1.0+	SSR, Hydration, Nested Routing
Gatsby	✅ Full	4.0+	SSG, Static Queries, GraphQL
Vite	✅ Full	4.0+	HMR, Fast Builds, ESM
Angular	🔄 Planned	14.0+	React Wrapper, Elements