Complete Component Showcase: UI Library Demonstration

Welcome to the comprehensive showcase of all UI components available in the weird.cloud design system! This post demonstrates every component with live examples, implementation details, and usage patterns.

Navigation & Layout Components

Breadcrumbs Navigation

The Breadcrumbs component provides hierarchical navigation for improved user experience and SEO. It automatically handles the visual styling and accessibility attributes.

Example Implementation:

<Breadcrumbs items={[
  { title: "Home", href: "/" },
  { title: "Blog", href: "/blog" },
  { title: "Current Page", href: "/blog/current" }
]} />

Features:

• Automatic separator injection
• Accessible navigation markup
• Responsive design
• SEO-friendly structured data

Table of Contents

The TableOfContents component generates navigable anchor links from a list of headings, perfect for long-form content.

Props Interface:

• headings: Array of { title: string, id: string, level: number }
• Supports multiple heading levels with automatic indentation
• Generates accessible navigation markup

Usage Pattern:

<TableOfContents headings={[
  { title: "Section 1", id: "section-1", level: 2 },
  { title: "Subsection 1.1", id: "subsection-1-1", level: 3 }
]} />

Content Components

Callout Alerts

Callout components highlight important information with semantic styling. Three variants are available:

Implementation:

<Callout type="note">Your informational content here</Callout>
<Callout type="warning">Your warning content here</Callout>
<Callout type="danger">Your critical content here</Callout>

FAQ Sections

The FAQBlock component renders collapsible question-and-answer sections using native HTML <details> elements for optimal accessibility and performance.

Frequently Asked Questions

How do I customize the styling of components?

All components use Tailwind CSS classes and can be customized through the className prop or by modifying the component source directly.

Are these components server-side rendering compatible?

Most components are SSR-compatible. Interactive components that use hooks or event handlers require the 'use client' directive in Next.js.

Can I use these components outside of Next.js?

Yes! The components are built with standard React patterns and can be adapted for any React application with minimal modifications.

Interactive Components

Terminal Tooltips

The TerminalTooltip component provides retro-styled hover information with a distinctive brutalist terminal aesthetic.

Example: Hover over this interactive text to see the tooltip in action.

Features:

• Position-aware tooltip placement
• Retro terminal styling with green text and border effects
• Responsive positioning
• Custom drop shadow and glow effects

UI Form Components

Buttons

The Button component provides multiple variants and sizes for different use cases:

Available Variants:

• default: Primary action button with filled background
• destructive: For dangerous actions (delete, remove, etc.)
• outline: Subtle button with border styling
• secondary: Less prominent than primary
• ghost: Minimal styling for subtle actions
• link: Text-only button styled as a link

Inputs and Labels

Form inputs and labels work together to create accessible form experiences:

Features:

• Automatic focus states and accessibility
• Responsive design with consistent sizing
• Proper form validation styling
• Support for all HTML input types

Advanced UI Components

Cards

Cards provide a flexible container for grouping related content:

Card Components:

• Card: Main container with rounded borders and shadow
• CardHeader: Top section for titles and descriptions
• CardTitle: Primary heading within the header
• CardDescription: Subtitle or additional context
• CardContent: Main content area
• CardFooter: Bottom section for actions or metadata

Dialogs and Modals

Dialog components create modal overlays for important interactions:

Features:

• Automatic focus management
• Keyboard navigation (ESC to close)
• Click-outside-to-close functionality
• Accessible markup with proper ARIA attributes
• Smooth animations and transitions

Popovers

Popovers display contextual information without taking over the entire screen:

Use Cases:

• Contextual help and tooltips
• Action menus and dropdowns
• Form field explanations
• Additional options that don't warrant a full modal

Emoji Picker

The emoji picker provides a searchable interface for emoji selection:

Features:

• Full emoji database with search functionality
• Keyboard navigation support
• Category-based organization
• Responsive design for mobile and desktop
• Integration with form inputs and text areas

Implementation Notes

All components follow these principles:

1. Accessibility First: Built on Radix UI primitives with proper ARIA attributes
2. TypeScript Support: Full type safety with exported interfaces
3. Customizable: Extensive className prop support for styling overrides
4. Performance: Optimized for both client and server-side rendering
5. Responsive: Mobile-first design approach with Tailwind CSS

Component Integration Patterns

These components are designed to work together seamlessly. Here are some common patterns:

• Form Layouts: Combine Label, Input, Button, and Callout for complete form experiences
• Content Hierarchy: Use Breadcrumbs, TableOfContents, and FAQBlock for structured content
• Interactive Experiences: Layer Dialog, Popover, and TerminalTooltip for rich user interactions
• Content Presentation: Leverage Card components with embedded buttons and callouts

The brutalist design aesthetic of weird.cloud is maintained across all components while ensuring modern usability and accessibility standards.