Developer guide · Preview

Build with Icovera.

A single visual language, shared across your React apps. Reusable components, thoughtful defaults, and one predictable theme system. This is a private workspace package, not yet published on npm.

01. Workspace setup

Run the existing Bun monorepo from the repository root. The showcase runs on port 3000, and the additional docs app on port 3001.

bun install
bun run dev

All current UI components live in packages/ui. The package is private while we develop it and can be published later.

02. Import what you need

Import from the workspace package. The shared styles are imported once by the application root layout.

import "@iconical/ui/styles.css";
import { Button, Card, Input, Badge } from "@iconical/ui";

export function Example() {
  return <Card><Button variant="primary">Create project</Button></Card>;
}

03. Use consistent themes

Wrap your application with ThemeProvider and ToastProvider. Theme preferences persist in localStorage. Dark, light, system, accent schemes, and density are supported.

import { ThemeProvider, ToastProvider, ThemeSwitch, SchemeSwitcher } from "@iconical/ui";

<ThemeProvider defaultTheme="dark" defaultScheme="violet">
  <ToastProvider><YourApp /></ToastProvider>
</ThemeProvider>

04. icovera.json

The root JSON file sets defaults for theme, scheme, density, borderless surfaces, rounding and animated transitions. Open Global settings to edit visually and copy a JSON version. Your personal preferences are stored in the browser and will not overwrite the file.

04. Compose your layouts

Use an AppShell with a compound sidebar. App routing and permissions remain owned by your application; Icovera provides the consistent presentation.

import { AppShell, Sidebar, SidebarContent, SidebarGroup, SidebarLink, WorkspaceContent } from "@iconical/ui";

<AppShell>
  <Sidebar>
    <SidebarContent>
      <SidebarGroup label="Workspace">
        <SidebarLink icon="home" href="/" active>Overview</SidebarLink>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <WorkspaceContent>Your page</WorkspaceContent>
</AppShell>

06. Deploy the showcase

Use apps/web as the root directory when deploying to a Next.js-compatible host, or use Turborepo build from the monorepo root to preserve workspace package resolution.

bun install
bun run build

For a hosting provider, keep the install command and monorepo workspace links configured. The app does not require a database or secrets.