💠 SGX4U UI 💠

Accessible, efficient and customizable components to start your own project. Use this to build any project of any scale.

⚜️ Table of Contents

• Overview
• Links
• Features
• Requirements
• Installation
• Quick Start
• CLI Usage
• Theming and Customization
• Contributing
• Versioning and Changelog

💎 Overview

@sgx4u/ui is a transparent, TypeScript-first React component library, designed to be fully readable, extendable, and production-ready. The main goal with this UI library is raw code accessibility, so that there is nothing hidden from the developer.

@sgx4u/ui focuses on:

• No hidden abstractions: You install real source code, not a black-box design system.
• Scalability: Suitable for small prototypes and large-scale applications alike.
• Consistency: Opinionated defaults that still stay easy to customize.
• Developer experience: A CLI that lets you add and inspect components quickly.

🔗 Links

• SGX4U UI Docs ‐ Package documentation and component examples.

Features

• Accessible by default: Components are built with proper semantics, ARIA attributes, accessibility, and keyboard interactions in mind.
• TypeScript-first: Fully typed APIs with explicit, predictable props for each component.
• Tailwind CSS-based: Utility classes by default, with clear escape hatches for customization.
• CLI-driven: Use the sgx4u-ui CLI to initialize projects, inspect components, and add new building blocks.
• Animation-ready: Subtle, CSS-only animations are included to keep interfaces feeling smooth and responsive.
• Composable primitives: Focus on primitives like button, dialog, tabs, and text that compose into more advanced UIs.

Requirements

• Node.js: >= 22.0.0.
• Package manager: pnpm is recommended for the best experience.
• Library & Framework: React.js 19+, Next.js 16+.
• Styling: Tailwind CSS 4+ configured in your project.

💡Installation

npm install @sgx4u/ui       # npm
yarn add @sgx4u/ui          # yarn
pnpm add @sgx4u/ui          # pnpm

Quick Start

1. Initialize SGX4U UI in your project.

   pnpm dlx @sgx4u/ui@latest init

2. Add components in your project.

   pnpm dlx @sgx4u/ui@latest add button

3. Start your dev server (for example, with Next.js or Vite) and verify the component renders and behaves as expected.

🚀 CLI Commands

# Initialize SGX4U UI in your project
pnpm dlx @sgx4u/ui@latest init

# Install a component
pnpm dlx @sgx4u/ui@latest add <component-name>

# Show available components
pnpm dlx @sgx4u/ui@latest list

# Show information about a component
pnpm dlx @sgx4u/ui@latest info

# Show configuration
pnpm dlx @sgx4u/ui@latest config

# Show this help information
pnpm dlx @sgx4u/ui@latest help

Theming and Customization

@sgx4u/ui is designed to be themed and adapted to your design system.

• Tailwind tokens: Extend your Tailwind configuration to align colors, spacing, and typography with your brand.
• Component overrides: Because the source is fully accessible, you can copy and adapt components to your own conventions.
• Utility-first styling: Use Tailwind utility classes to quickly adjust layout, spacing, and appearance without sacrificing consistency.

For detailed theming guidance, see the docs in https://ui.sgx4u.com/docs/styling.

Versioning and Changelog

This project follows Semantic Versioning. All notable changes are documented in CHANGELOG.md.