Installation

Follow these steps to install Altech UI in a React project, even if this is your first UI library.

Prerequisites

Node.js 18+ installed
A React project (Next.js, Vite, or Create React App)
One package manager: npm, pnpm, or yarn

Install package

Code

npm i @altech-ui/react

Or:

Code

pnpm add @altech-ui/react
# or
yarn add @altech-ui/react

Import styles

Import styles once in your app entry/root file.

Next.js (App Router):

Code

import "@altech-ui/react/styles.css"

Full example (place this in your root app/layout.tsx file):

Code

import "@altech-ui/react/styles.css"
import type { ReactNode } from "react"
 
export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Vite / CRA:

Code

import "@altech-ui/react/styles.css"

Use your first component

Code

import { Button } from "@altech-ui/react"
 
export default function Example() {
  return <Button variant="primary">Hello Altech UI</Button>
}

Full beginner example (copy-paste)

Code

import "@altech-ui/react/styles.css"
import { Button, Input, Card, CardHeader, CardContent } from "@altech-ui/react"
 
export default function App() {
  return (
    <div style={{ maxWidth: 420, margin: "40px auto" }}>
      <Card>
        <CardHeader>Sign in</CardHeader>
        <CardContent className="space-y-3">
          <Input label="Email" placeholder="you@example.com" />
          <Button variant="primary" fullWidth>
            Continue
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}

Common issues

Styles are not applied: make sure @altech-ui/react/styles.css is imported exactly once in root entry/layout.
Component import error: check package is installed in the same project (npm ls @altech-ui/react).
TypeScript red underline: restart dev server and editor TypeScript service after install.

Install the package

Run npm i @altech-ui/react (or pnpm add / yarn add).

Import styles once

Import @altech-ui/react/styles.css in app/layout.tsx or src/main.tsx.

Render your first component

Import Button and render it in any page/component.

Run your app

Start dev server and verify styles + component behavior.