aevr/ui

Prerequisites

Next.js 13+ project
Tailwind CSS configured
shadcn/ui initialized

Quick Install

Add any component with one command:

npx shadcn@latest add @aevr/button

Setup Instructions

Setup shadcn/ui (if not already done)

If you haven't set up shadcn/ui in your project yet, run:

terminal

npx shadcn@latest init

Follow the prompts to configure your project. Choose your style, colors, and other preferences.

Configure Custom Registry

Add the aevr registry to your components.json file:

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  },
  "registries": {
    "@aevr": "https://v1.ui.aevr.space/r/{name}.json"
  }
}

Install Registry Dependencies

Install the required dependencies for aevr components:

npm:

npm install class-variance-authority tw-animate-css iconsax-react iso-country-currency @untools/logger

yarn:

yarn add class-variance-authority tw-animate-css iconsax-react iso-country-currency @untools/logger

Add Components

Now you can add any component from the aevr registry:

Add a single component

npx shadcn@latest add @aevr/button

Add multiple components

npx shadcn@latest add @aevr/button @aevr/info-box @aevr/loader @aevr/card

Add utilities

npx shadcn@latest add @aevr/number-formatter

That's it!

Components will be installed to your components/ui/ directory and utilities to utils/. Start using them in your project immediately.

Usage Example

After installation, import and use components in your React components:

app/page.tsx

import { Button } from "@/components/ui/button";
import { InfoBox } from "@/components/ui/info-box";
import { Card, CardGrid } from "@/components/ui/card";
import { formatCurrency } from "@/utils/number-formatter";

export default function Page() {
  const price = formatCurrency(1234.56, { currency: "USD" });
  
  return (
    <div className="p-6">
      <Card
        title="Welcome to aevr/ui!"
        subtitle="Your components are ready to use"
        variant="success"
        
        icon={<Package className="w-5 h-5" />}
        actions={[
          { name: "Get Started", type: "primary", path: "/docs" },
          { name: "View Examples", type: "secondary", path: "/examples" }
        ]}
      >
        <InfoBox 
          type="success"
          description="All aevr components are now available in your project."
        />
        
        <Button variant="primary" className="mt-4">
          Buy for {price}
        </Button>
      </Card>
    </div>
  );
}

Why Choose aevr/ui?

Built with modern development practices and designed for production use.

Easy Integration

Seamless integration with existing shadcn/ui projects

Customizable

Built with CVA for easy customization and theming

Need Help?

Documentation

Check out the shadcn/ui documentation for general guidance on using components

View Docs

Issues & Support

Found a bug or have a feature request? Let us know on GitHub

GitHub Issues