Build Beautiful UIs with Aki UI
A modern, accessible, and customizable React component library built with TypeScript and Tailwind CSS. Create stunning user interfaces with AI-powered development tools, LLM integration, and Model Context Protocol (MCP) support.
npm install @akitectio/aki-uiExperience Aki UI Components
See how our components adapt to your theme and look great in both light and dark modes. Currently viewing in light mode.
Buttons
Badges
Alerts
Theme Colors
Interactive
🎨 Fully Customizable Theming
Aki UI comes with a complete theming system. Customize colors, spacing, shadows, and more to match your brand perfectly.
⚡ Responsive Layout System
Aki UI provides powerful Grid, Stack, and Breakpoint components for creating responsive layouts that adapt beautifully to any screen size.
📱 Responsive Grid System
Col 1
Mobile: 1 col
Tablet: 2 cols
Desktop: 3-4 cols
Col 2
Responsive
Grid Layout
Auto-adapts
Col 3
Flexible
Spacing
Perfect gaps
Col 4
Modern
Design
Beautiful UI
📚 Stack Layout System
Vertical Stack
Horizontal Stack
🔄 Responsive Breakpoints
🔍 Resize your browser window to see how layouts adapt at different breakpoints
🔍 Live Breakpoint Monitor
💡 Resize your browser window to see breakpoints change in real-time
Grid System
Powerful responsive grid with flexible columns, gaps, and auto-fit capabilities.
Stack Layouts
Simple and intuitive stack components for vertical and horizontal layouts.
Breakpoints
Smart responsive design with built-in breakpoint utilities and hooks.
🔧 Easy Implementation
// Grid Layout
<Grid cols={{ base: 1, md: 2, lg: 3 }} gap={6}>
<Card>Item 1</Card>
<Card>Item 2</Card>
<Card>Item 3</Card>
</Grid>
// Stack Layout
<Stack direction="vertical" spacing={4}>
<Button>Action 1</Button>
<Button>Action 2</Button>
</Stack>
// Responsive Hooks
const isMobile = useBreakpoint('md', 'down');
const isDesktop = useBreakpoint('lg', 'up');One Import.
All Frameworks.
Aki UI works universally across all React-based frameworks without any adapters. No more framework-specific imports or configurations.
import { Button,Card,Input } from '@akitectio/aki-ui'
// Works in React, Next.js, Remix, Gatsby, Vite, CRA!
function App() {
return (
<Card>
<Button>Universal Component</Button>
</Card>
)
}Supercharge Your Development with AI & LLM Integration
Aki UI is the first component library designed for the AI era. Build faster with LLM-powered code generation, Model Context Protocol (MCP) support, and AI-friendly component APIs.
LLM-Optimized Components
Every component is designed with clear, descriptive APIs that LLMs understand perfectly. Generate complex UIs with simple natural language prompts.
Model Context Protocol (MCP)
Built-in MCP server support enables AI assistants to directly interact with Aki UI, providing real-time component generation and customization.
AI Code Generation
Integrated AI tools and prompts help you generate forms, layouts, and complex components with intelligent defaults and best practices.
// Generated with: "Create a user profile card"
import { Card, Avatar, Button } from '@akitectio/aki-ui'
export function UserProfile({ user }) {
return (
<Card className="p-6">
<div className="flex items-center space-x-4">
<Avatar src={user.avatar} alt={user.name} />
<div>
<h3 className="font-semibold">{user.name}</h3>
<p className="text-gray-600">{user.role}</p>
</div>
</div>
<Button className="mt-4 w-full">
View Profile
</Button>
</Card>
)
}Why Choose Aki UI?
Built with modern technologies and best practices for exceptional developer experience.
TypeScript First
Built with TypeScript for excellent developer experience and type safety.
Accessible
WCAG 2.1 compliant components with proper ARIA attributes and keyboard navigation.
Customizable
Flexible theming system with Tailwind CSS integration for easy customization.
🤖 LLM Integration
AI-optimized components with clear APIs that work perfectly with Large Language Models.
⚡ MCP Support
Built-in Model Context Protocol server for seamless AI assistant integration.
Dark Mode
Built-in dark mode support with seamless theme switching capabilities.
Performance
Tree-shakable components with optimized bundle size and minimal runtime overhead.
Well Documented
Comprehensive documentation with examples, API references, and best practices.
Ready to get started?
Install Aki UI and start building beautiful interfaces today.