X-UI LogoX-UI

Getting Started

Get up and running with X-UI in minutes. A modern, beautiful component library for React.

Installation

Install X-UI and its peer dependencies using your preferred package manager.

bash
# npm
npm install @xdev-asia/x-ui-react

# pnpm
pnpm add @xdev-asia/x-ui-react

# yarn
yarn add @xdev-asia/x-ui-react

Setup ThemeProvider

Wrap your application with ThemeProvider to enable theming and dark mode support.

tsx
import { ThemeProvider } from '@xdev-asia/x-ui-react';

export default function App({ children }) {
    return (
        <ThemeProvider defaultTheme="dark">
            {children}
        </ThemeProvider>
    );
}

Usage

Import and use components directly in your application.

tsx
import { Button, Card, Input } from '@xdev-asia/x-ui-react';

function MyComponent() {
    return (
        <Card>
            <Input placeholder="Enter your email" />
            <Button variant="solid" size="md">
                Subscribe
            </Button>
        </Card>
    );
}

Key Features

  • 🌓

    Dark/Light Mode

    Built-in theme support with automatic persistence

  • ✨

    Glassmorphism

    Modern liquid glass design system

  • 📱

    Responsive

    Works on all screen sizes

  • 🎯

    TypeScript

    Full TypeScript support with complete types

  • ♿

    Accessible

    WAI-ARIA compliant components