ArchUI Component Library

A React 19+ and Tailwind component library designed with architectural blueprint precision.

Storybook Documentation

About

ArchUI is a unique and modern React component library inspired by classical architecture. It provides flexible, themeable UI tokens based on three main architectural orders: Doric, Ionic, and Corinthian. Each order can be customizable and offers your app a whole new appearance once changed.

• Doric: Distinguished by sharp edges, contrasting border colors, a lack of aesthetic details, subtle shadows, and a shorter, sturdier appearance.

• Ionic: Characterized by rounded corners that soften visual edges, generous paddings for comfortable spacing, a borderless design for seamless integration, subtle decorative touches, soft blurred shadows that add depth, and an overall pleasant, graceful appearance.

• Corinthian: Features subtle rounded corners for refined edges, delicate padding that maintains spaciousness, light-gray borders for elegant definition, and rich ornamental details throughout. Expect soft, layered shadows for dimensional depth, gradient backgrounds that add visual sophistication, and a slender, svelte appearance that conveys grace.

Note

ArchUI brings an artistic, outside-the-box perspective inspired by architecture, urbanism, and industrial design to web development. This project is a tribute to early architectural treatises that dictated why and how we should build and engineer structures (apps).

Install

npm install @devtoti/archui-lib

Design guidelines (agents & design-to-code)

This package ships the guidelines/ folder on npm — the same markdown references used to build ArchUI. They are meant for coding agents, Figma Make, and other design-to-code workflows that need authoritative rules (tokens, themes, setup, per-component usage) without opening Storybook.

After install, read them from your project:

node_modules/@devtoti/archui-lib/guidelines/Guidelines.md

Suggested entry path: start at guidelines/Guidelines.md, then follow its reading order (setup.md, colors.md, radii-spacing.md, typography.md, and guidelines/components/*.md for component-specific API and semantics).

Path	Purpose
guidelines/Guidelines.md	Product character, themes, component index, workflows
guidelines/setup.md	ThemeProvider, CSS imports, build setup
guidelines/colors.md	Semantic color tokens and accent customization
guidelines/radii-spacing.md	Radii, spacing, strokes per theme
guidelines/typography.md	Type scale and font families
guidelines/components/*.md	Per-component deep dives — see table in Guidelines.md (Button, Alert, Avatar, Callout, Toast, Heading, Input, LinkItem, Switch, Radio, ThemeProvider)

Point your agent skill, MCP, or Figma Make context at these files so generated UI uses ArchUI components and tokens instead of ad-hoc HTML or hardcoded values.

Usage

import { Button } from "@devtoti/archui-lib";

function App() {
  return (
    <Button
      variant="primary"
      size="md"
      onClick={handleClick}
      label="Welcome to ArchUI!"
    />
  );
}

Library Principles

The causa finis of this library is to offer a new robust and rigorous Design System that offers:

• Granularity
• Functionality
• Elegance

Modular Designs

All ArchUI components are organized within three modular themes. Each theme uses the same set of variables, property names, and a tokenized design system. Easily switch your application's appearance by changing a single class name—the design system ensures the entire UI adapts harmoniously across Doric, Ionic, or Corinthian styles.

---

Blueprint Approach

Our design methodology draws inspiration from architectural blueprints, emphasizing structural proportion and uniqueness. Every component has been crafted with special care and attention to detail, so your interfaces feel deliberate and cohesive.

A11y-Lens

We are committed to inclusive design and ensure ArchUI components conform to WCAG 2.0 standards. Key accessibility features include:

• Text Legibility: Ensured through scalable font sizing and weights
• Color Contrasts: Carefully selected to provide sufficient contrast ratios
• ARIA Attributes: Added to communicate UI semantics to assistive technologies
• Keyboard Navigation: Fully navigable via keyboard inputs
• Responsiveness: Designed for usability across all devices

Resources

• Figma UI Kit
• Documentation (Storybook)
• Package guidelines — node_modules/@devtoti/archui-lib/guidelines/ (see Design guidelines)
• Storybook
• Sandbox (coming soon)
• Examples (coming soon)

---

Project Information

Architect: @devtoti Antonio 'Toti' Ruiz Date: December 2025 Technologies: React, TypeScript, Tailwind, Storybook, Chromatic, ESLint, Prettier
Version v1.1.1

---

Find me at

• Dribbble
• LinkedIn
• FigmaCommunity
• Portfolio