alfia-ui-library

v0.1.2

Published

a month ago

Lightweight React UI components with a clean, modern aesthetic. Built with Vite and Tailwind.

0High
0Medium
0Low

allfia

Alfia UI Library

Lightweight React UI components with a clean, modern aesthetic. Built with Vite and Tailwind.

Requirement: This library requires Tailwind CSS in the consuming project.

Features

Menu: accessible dropdown menu with optional footer
Modal: centered modal with multiple sizes and dark mode support
Design tokens: documented Tailwind colors/radii for consistent theming

Installation

npm install alfia-ui-library
npm install react react-dom
# Tailwind (if your app doesn't have it yet)
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Quick start

import { Menu, Modal } from 'alfia-ui-library';

export default function App() {
  return (
    <>
      <Menu
        button={<button className="px-3 py-1 rounded-md border">Open</button>}
        items={[
          { label: 'Action 1', onClick: () => console.log('Action 1') },
          { label: 'Delete', danger: true, onClick: () => console.log('Delete') },
        ]}
      />
      <Modal isOpen onClose={() => {}} size="md">
        <div className="text-text1 dark:text-dark-text1">Hello</div>
      </Modal>
    </>
  );
}

Components

Modal

import { Modal } from 'alfia-ui-library';

<Modal isOpen={true} onClose={() => {}} size="md">
  <h2 className="text-lg font-medium text-text1 dark:text-dark-text1">Title</h2>
  <p className="text-text2 dark:text-dark-text2">Body</p>
</Modal>;

isOpen: boolean to control visibility
onClose: function called when backdrop or close button is clicked
size: one of sm | md | lg | xl | full (default md)

Dark mode: add the dark class to your root element (e.g., <html class="dark">) to enable dark theme styles.

Theming with Tailwind

To match the library’s look-and-feel, copy these tokens to your app’s tailwind.config.js:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        bg: '#f9fafb',
        bg2: '#ffffff',
        active: '#e8f0fe',
        text1: '#111827',
        text2: '#6b7280',
        stroke: '#e5e7eb',
        'stroke-hover': '#d1d5db',
        hover: '#f3f4f6',
        'blue-border': '#2563eb',
        'dark-bg': '#000',
        'dark-bg2': '#070707',
        'dark-active': '#181818',
        'dark-text1': '#ffffff',
        'dark-text2': '#9b9b96',
        'dark-stroke': '#1f1f1f',
        'dark-stroke-hover': '#444444',
        'dark-hover': '#181818',
        'dark-blue-border': '#0000cd',
      },
      borderRadius: {
        default: '22px',
        button: '8px',
      },
    },
  },
  plugins: [],
}

Already using Tailwind? Ensure your content globs include your app source so classes aren’t purged.
Not using Tailwind? You can replicate these tokens in plain CSS or add Tailwind and paste the config above.

Tooling

Built with Vite
React as a peer dependency (install react and react-dom in your app)

Path aliases (this repo)

This repository uses an alias @components → src/components for local development. In your own apps, you can create a similar alias if desired.

// vite.config.js
import path from 'path'
export default {
  resolve: { alias: { '@components': path.resolve(__dirname, 'src/components') } }
}

License

MIT

Made by AYMANE MOUTOUSSE · https://github.com/AYMANEMTS

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme