# Monolith UI > Monolith UI is a highly opinionated, utilitarian React component registry built on shadcn/ui. It enforces an industrial aesthetic with strict 0px/9999px geometry (no soft corners), strict monochromatic palettes, and snappy <150ms motion. Use this index to discover the available documentation pages, markdown mirrors, and registry resources before browsing. ## CRITICAL STYLING RULES FOR AI AGENTS When generating code using components from this library, you MUST strictly adhere to the following design principles. Failure to follow these rules will result in broken layouts and rejected code. # Design System & Visual World ## Core Philosophy This project strictly adheres to a pure, uncompromising **Minimalist (Essentialist)** design language. We prioritize typography, negative space, and content over visible structural boundaries. We completely reject arbitrary styling, intermediate corner radii (e.g., 4px - 12px), and unnecessary ornamentation. The UI must feel like a refined, distraction-free canvas where every element is stripped down to its absolute bare minimum. --- ## ABSOLUTE RULES (MUST DO) *These rules are strict implementation guidelines for AI agents and developers. Any violation of these rules will result in broken aesthetics and rejected code.* ### 1. Shape & Geometry (0px Strict) - **Rule**: All structural UI components (Cards, Inputs, Buttons, Modals, Panels, Layout Containers) **MUST** have a 0px border radius. - **Tailwind**: Always use `rounded-none`. **NEVER** use `rounded`, `rounded-md`, `rounded-lg`, etc. ### 2. Border & Outlines (1px Strict) - **Rule**: Borders and focus rings must be exactly 1px to maintain maximum sharpness and minimalist rigidity. - **Tailwind**: Always use `border` or `ring-1`. **NEVER** use `border-2`, `ring-2`, `ring-offset-2`, etc. - **Rule**: Ban Drop Shadows for structural elements. **NEVER** use `shadow-sm` or `shadow-md` for cards or inputs. Use borders instead. ### 3. Motion & Animation (150ms Strict) - **Rule**: All single-direction transitions and animations MUST be snappy and utilitarian. No single movement may exceed 150ms. - **Tailwind**: Always use `duration-150` (or `duration-75`, `duration-100`). **NEVER** use `duration-200`, `duration-300`, `duration-500` for standard state transitions. - **Easing**: Default to `ease-out` or custom `ease-[cubic-bezier(0.16,1,0.3,1)]`. - **Exception**: Compound keyframe animations (like a 300ms bounce that goes out and back in two 150ms legs) are allowed. ### 4. Interactive Feedback - **Rule**: **NEVER** use `scale` transformations (`active:scale-95`) or `translate` on large structural components (like standard buttons or cards) during hover/active states. - **Rule**: Scale/Translate is ONLY permitted for micro-interactions on small semantic icons (e.g., arrows) or entry/exit modal animations. Rely purely on background color shifts (`hover:bg-muted`) for structural element interactions. --- ## RECOMMENDATIONS (SHOULD DO) *These are design best practices to achieve the pure minimalist aesthetic.* ### 1. Borderless by Default - **Guideline**: Prefer typography, font size contrast, and negative space (padding/margin) to separate content. Avoid drawing unnecessary boxes or borders around elements unless strictly required for input bounding. - **Tailwind**: Use generous padding (e.g., `p-6`, `py-8`) and muted text (`text-muted-foreground`) to establish visual hierarchy without lines. ### 2. Floating Meta-Actions (Geometric Contrast) - **Guideline**: When placing a small, transient utility action (like a "Copy" icon button) *floating* over a structural container, use `9999px` (`rounded-full`) to decouple it visually. - **Why**: The extreme contrast between the 100% sharp structural container (`rounded-none`) and the 100% curved floating button (`rounded-full`) instantly signals to the user that it is a meta-layer overlaid on the content. - **Allowed Exceptions for `rounded-full`**: Status indicators (dots), User avatars, Toggle switch knobs, Micro badges (notification counts). ### 3. Monochromatic Idle State - **Guideline**: The UI should be monochromatic (black/white/grayscale) in its default idle state. - **Guideline**: Reserve accent colors strictly for transient interactions (hover, active, focus) or critical semantic states (danger/success). ### 4. Robust Component Layouts (Absolute & Grid) - **Guideline**: When aligning small UI controls (like icons or steppers) inside flexible inputs, prefer `absolute` positioning or CSS Grid (`grid`) over Flexbox (`flex`) to avoid unexpected height/baseline shifting caused by text layout. ## Docs - Get Started - [Introduction](https://ui.manpuc.me/docs.md): The official component library for the Monolith Design System. - [Installation](https://ui.manpuc.me/docs/installation.md) - Components - [Components](https://ui.manpuc.me/docs/components.md): Browse the strict, industrial components available in the Monolith UI registry. - [Accordion](https://ui.manpuc.me/docs/components/accordion.md): A vertically stacked set of interactive headings that each reveal a section of content. - [Badge](https://ui.manpuc.me/docs/components/badge.md): Compact status labels with solid and dot appearances. - [Breadcrumb](https://ui.manpuc.me/docs/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links. - [Button](https://ui.manpuc.me/docs/components/button.md): A minimal, zero-runtime, pure HTML/Tailwind button enforcing Monolith principles. - [Calendar](https://ui.manpuc.me/docs/components/calendar.md): A strict, minimalist date picker with dropdown navigation. - [Card](https://ui.manpuc.me/docs/components/card.md): A structural container completely stripped of rounding and shadows. - [Checkbox](https://ui.manpuc.me/docs/components/checkbox.md): A strict, minimalist checkbox devoid of rounded corners and shadows, conforming to Monolith standards. - [Command](https://ui.manpuc.me/docs/components/command.md): A strict, minimalist command menu component. - [Copy Button](https://ui.manpuc.me/docs/components/copy-button.md): A utility button that copies text to the clipboard and provides visual feedback. - [Dialog](https://ui.manpuc.me/docs/components/dialog.md): A sharp, minimalist modal window built on Radix UI, conforming to Monolith standards. - [Dropdown menu](https://ui.manpuc.me/docs/components/dropdown-menu.md): Monolith Dropdown menu component. - [Form](https://ui.manpuc.me/docs/components/form.md): Monolith Form component built with react-hook-form and zod. - [Input](https://ui.manpuc.me/docs/components/input.md): A base input primitive matching the Monolith architectural grid. - [Kbd](https://ui.manpuc.me/docs/components/kbd.md): Keyboard shortcuts and keys. - [Label](https://ui.manpuc.me/docs/components/label.md): Renders an accessible label associated with controls. - [Number Input](https://ui.manpuc.me/docs/components/number-input.md): A strict numeric input component with formatting, prefixes, and steppers. - [Pagination](https://ui.manpuc.me/docs/components/pagination.md): Pagination with page navigation, next and previous links. - [Popover](https://ui.manpuc.me/docs/components/popover.md): Displays rich content in a portal, triggered by a button. - [Progress](https://ui.manpuc.me/docs/components/progress.md): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. - [Radio group](https://ui.manpuc.me/docs/components/radio-group.md): Monolith Radio group component. - [Select](https://ui.manpuc.me/docs/components/select.md): Displays a list of options for the user to pick from—triggered by a button. - [Separator](https://ui.manpuc.me/docs/components/separator.md): Visually or semantically separates content. - [Sheet](https://ui.manpuc.me/docs/components/sheet.md): Extends the Dialog component to display content that complements the main view. - [Sidebar](https://ui.manpuc.me/docs/components/sidebar.md): A composable, keyboard accessible, and responsive sidebar component. - [Skeleton](https://ui.manpuc.me/docs/components/skeleton.md): A placeholder for loading content. - [Slider](https://ui.manpuc.me/docs/components/slider.md): A strict, minimalist slider for numerical input. - [Sonner](https://ui.manpuc.me/docs/components/sonner.md): An opinionated toast component for React. - [Spinner](https://ui.manpuc.me/docs/components/spinner.md): Displays a circular loading indicator for transient states and background processing. - [Switch](https://ui.manpuc.me/docs/components/switch.md): A strict, minimalist toggle switch. - [Tabs](https://ui.manpuc.me/docs/components/tabs.md): A set of layered sections of content—known as tab panels—that are displayed one at a time. - [Tag](https://ui.manpuc.me/docs/components/tag.md): A tiny label used to categorize or group items. - [Textarea](https://ui.manpuc.me/docs/components/textarea.md): Monolith Textarea component. - [Tooltip](https://ui.manpuc.me/docs/components/tooltip.md): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. - Foundations - [Design Principles](https://ui.manpuc.me/docs/foundations/design-principles.md): Core philosophy, visual rules, and structural guidelines of Impeccable Components. - [Colors](https://ui.manpuc.me/docs/foundations/colors.md): A strict, utilitarian monochromatic palette. - [Typography](https://ui.manpuc.me/docs/foundations/typography.md): An austere, geometric scale for professional tools. - [Motion](https://ui.manpuc.me/docs/foundations/motion.md): A strict, utilitarian timing language for feedback and transitions. - [Scrollbars](https://ui.manpuc.me/docs/foundations/scrollbars.md): Native scrolling with subtle, macOS-like pointer scrollbars. - Sections ## Machine-readable Resources - [Full documentation](https://ui.manpuc.me/llms-full.txt) - [Homepage markdown](https://ui.manpuc.me/llms.md/content.md) - [OpenAPI description](https://ui.manpuc.me/openapi.json) - [API catalog](https://ui.manpuc.me/.well-known/api-catalog) - [Agent skill](https://ui.manpuc.me/.well-known/agent-skills/site-skill.md) - [shadcn MCP server documentation](https://ui.manpuc.me/docs/mcp)