import { Button, Card, DataTable, AdminLayout } from '@voilajsx/uikit';

function Dashboard() {
  return (
    <AdminLayout>
      <Card>
        <Button>Click me</Button>
        <DataTable data={users} />
      </Card>
    </AdminLayout>
  );
}

<AdminLayout>     {/* Sidebar + header for dashboards */}
<AuthLayout>      {/* Login/signup forms */}
<PageLayout>      {/* Marketing pages with header/footer */}
<PopupLayout>     {/* Browser extensions */}
<BlankLayout>     {/* Clean pages */}

<ThemeProvider theme="elegant" mode="dark">
  <App />
</ThemeProvider>

import { ThemeProvider, useTheme } from '@voilajsx/uikit';

function App() {
  return (
    <ThemeProvider theme="elegant" mode="dark">
      <MyApp />
    </ThemeProvider>
  );
}

function ThemeSwitcher() {
  const { theme, setTheme, toggleMode } = useTheme();
  return (
    <div>
      <select onChange={(e) => setTheme(e.target.value)}>
        <option value="base">Base</option>
        <option value="elegant">Elegant</option>
        <option value="metro">Metro</option>
        <option value="studio">Studio</option>
        <option value="vivid">Vivid</option>
      </select>
      <button onClick={toggleMode}>Toggle Dark Mode</button>
    </div>
  );
}

import { Button, Input, Label, Card, Form } from '@voilajsx/uikit';

function LoginForm() {
  return (
    <Card>
      <Form>
        <Label>Email</Label>
        <Input type="email" />
        <Button>Sign In</Button>
      </Form>
    </Card>
  );
}

import { DataTable } from '@voilajsx/uikit';

function UserList() {
  return (
    <DataTable 
      data={users}
      columns={[
        { key: 'name', label: 'Name' },
        { key: 'email', label: 'Email' },
        { key: 'role', label: 'Role' }
      ]}
    />
  );
}

// Admin dashboard
<AdminLayout>
  <AdminLayout.Sidebar navigation={nav} />
  <AdminLayout.Header title="Dashboard" />
  <AdminLayout.Content>
    <DataTable data={users} />
  </AdminLayout.Content>
</AdminLayout>

// Auth pages  
<AuthLayout scheme="hero" imageUrl="/hero.jpg">
  <LoginForm />
</AuthLayout>

// Marketing pages
<PageLayout>
  <PageLayout.Header logo="MyApp" navigation={nav} />
  <PageLayout.Content>
    <Hero />
  </PageLayout.Content>
  <PageLayout.Footer />
</PageLayout>