Octagon-ui NPM

Octagon UI

Libraries.io dependency status for latest release NPM Version

Octagon UI is a modern and customizable React component library for building responsive and accessible web applications.

Installation

Install the library using npm:

npm install octagon-ui

For more info you can take a look at our Official Documentation

Usage

To ensure that the components from octagon-ui are styled correctly, you need to import the globals.css file in your main App component. This file typically contains global styles that are necessary for the UI components to render properly.

Here's how you can update your App component to include the globals.css import:

import React from 'react';
import { Button, Card, Modal, Input, Dropdown, Tooltip, Navbar, Sidebar } from 'octagon-ui';
import './globals.css'; // Import the global styles

function App() {
    return (
        {/* Your code */}
    );
}

export default App;

Import the components you need and start building your UI:

import { Navbar, Sidebar } from 'octagon-ui';

function Home() {
    return (
        <>
            <Navbar
                brand={<h2>Home</h2>}
            >
                <NavItem>Blog</NavItem>
                <NavItem active={true}>Guide</NavItem>
            />
            <main>
                <Container center>
                   <Card>
                    Hello Octagon-UI
                    </Card>
                </Container>
            </main>
        </>
    );
}