@sysifosweb/ui

Sysifos UI

Reusable UI component library for Nuxt projects by SysifosWeb.

No Tailwind CSS required for consumers. Pure CSS design tokens.

Installation

npm install @sysifosweb/ui

Add to your Nuxt config:

export default defineNuxtConfig({
  modules: ['@sysifosweb/ui']
})

That's it. No Tailwind, no plugins, no extra configuration.

Components (40)

Base

• SuiAccordion — Collapsible accordion
• SuiAlert — Inline alert / message
• SuiAvatar — User avatar with fallback
• SuiBadge — Status indicator
• SuiBreadcrumbs — Breadcrumb navigation
• SuiButton — Button with variants (primary, secondary, outline, ghost, destructive)
• SuiCard — Container with optional hover effects
• SuiDivider — Horizontal / vertical divider
• SuiEmptyState — Empty state placeholder
• SuiInput — Text input with error states
• SuiModal — Dialog with overlay and animations
• SuiSelect — Dropdown selector
• SuiSkeleton — Loading skeleton
• SuiTabs — Tabbed panels
• SuiTextarea — Multi-line text input

Layout

• SuiContainer — Responsive container
• SuiFloatingBar — Floating action bar (fixed/static)
• SuiFooter — Footer (default/company variants)
• SuiFooterCompact — Compact footer variant
• SuiFooterMap — Footer with embedded map
• SuiFooterNewsletter — Footer with newsletter signup
• SuiHero — Hero section
• SuiNavbar — Navigation bar (fixed/static)
• SuiPageHeader — Page header
• SuiSection — Page section wrapper

Carousel

• SuiCarousel — Image gallery (default/hero variants)
• SuiLogoCarousel — Infinite logo loop
• SuiMarquee — CSS-based scrolling
• SuiThumbnailCarousel — Thumbnail navigation
• SuiVerticalThumbnailCarousel — Vertical thumbnails

Content

• SuiSectionHeader — Section title/subtitle
• SuiContactForm — Contact form
• SuiServiceCard — Service display
• SuiBlogCard — Blog post card
• SuiCtaBanner — Call-to-action
• SuiSearchBar — Search input
• SuiErrorPage — 404/500 error page
• SuiLoginForm — Login form
• SuiRegisterForm — Registration form
• SuiForgotPasswordForm — Password recovery form

Usage

<template>
  <SuiContainer>
    <SuiButton variant="primary">Click me</SuiButton>
    <SuiInput v-model="email" placeholder="Email" />
    <SuiCard>
      <p>Card content</p>
    </SuiCard>
  </SuiContainer>
</template>

Design Tokens

Customize the look by overriding CSS variables:

:root {
  --ui-primary: #2563eb;
  --ui-primary-foreground: #ffffff;
  --ui-secondary: #64748b;
  --ui-background: #ffffff;
  --ui-foreground: #000000;
  --ui-radius-md: 0.5rem;
  /* ... */
}

Components use --ui-* tokens, so changing the theme is independent of component logic.

Props Reference

SuiButton

SuiInput

SuiCarousel

Development

npm run dev          # Start playground
npm run build        # Build library
npm run build:playground  # Build playground
npm run lint         # Lint
npm run typecheck    # Type check

Architecture

sysifosweb-ui/
├── src/
│   ├── module.ts              # Nuxt module entry
│   └── runtime/
│       ├── assets/css/        # Design tokens (main.css)
│       ├── components/        # Vue components
│       ├── composables/       # Vue composables
│       ├── types/             # TypeScript types
│       └── utils/             # Utilities
├── playground/                # Dev playground (not published)
├── dist/                      # Built output (published)
└── package.json

License

MIT

SysifosWeb — Build once. Reuse everywhere.