Archi-ui

Build Exceptional UIs, Faster.

Archi-UI Is a comprehensive and modern UI component library designed to empower developers to build stunning, responsive, and highly accessible user interfaces with speed and confidence. We believe in providing robust, flexible, and beautifully crafted components that seamlessly integrate into any modern web project

Documentation

Detailed API documentation for each component, including available props, their types, default values, and usage examples, is provided on a dedicated documentation site.

Visit Archi-UI documentation to view the full documentation.

Installation

To get started with Archi-ui in your React project, install it via npm:

Installing through NPM

Archi-UI UI is distributed as an NPM package.

Using npm

npm install archi-ui lucide-react

Peer dpendencies

Please note that react and react-dom are peer dependencies, meaning you should ensure they are installed before installing Archi-UI.

"peerDependencies": {
    "react": "^19.1.0",
    "react-dom": "^19.1.0"
  },

Usage

1. Include the Stylesheet First, import the main Archi-ui stylesheet into your application's entry point (e.g., src/main.tsx, src/App.tsx, src/index.tsx or app/layout.jsx):

// src/main.tsx or src/App.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import 'archi-ui/dist/index.css'; // Import the main stylesheet generated by Archi-ui

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

3. Use Components Now you can import and use Archi-ui components in your React application:

import { Button } from 'archi-ui';

export default function Example() {
  return <Button variant="filled">Click Me</Button>;
}

License

This project is licensed under the terms of the MIT licensed.

Author

Vishnu Sangammanavar

GitHub: https://github.com/vishnusangammanavar

Portfolio: https://vishnusangammanavar.github.io/my_portfolio/