Welcome to Platform UI

platform UI is a comprehensive collection of beautifully designed, accessible, and customizable React components. Built with shadcn/ui compatibility and featuring a registry system, it provides everything you need to build modern web applications.

Features

• 🎨 Beautiful Design: Modern, clean, and beautiful components out of the box
• ♿ Accessible: Built with accessibility in mind using Radix UI primitives
• 🎯 TypeScript: Full TypeScript support with comprehensive type definitions
• ⚡ Performance: Optimized for performance with tree-shaking support
• 🎭 Animations: Smooth animations powered by Framer Motion
• 🛠️ Customizable: Easy to customize and extend to match your design system
• 📱 Responsive: Mobile-first approach with responsive design patterns
• 🔗 Registry System: Components installation via shadcn CLI

Quick Start

Get up and running with Platform UI using the familiar shadcn CLI:

1# Install individual components using shadcn CLI
2pnpm dlx shadcn@latest add "https://platform-ui.southguild.tech/r/animated-button"
3
4# Components will be installed to components/platform-ui/

Component Library

Explore our comprehensive component library:

Enhanced Components

• Animated Button - Enhanced buttons with advanced animations

Layout & Navigation

• Accordion - Collapsible content sections
• Tabs - Organize content in tabs
• Dialog - Modal dialogs and overlays

Form Elements

• Button - Interactive buttons
• Input - Text input fields
• Checkbox - Checkbox inputs
• Select - Dropdown selections

Display

• Card - Flexible content containers
• Badge - Small status and label indicators
• Avatar - User profile pictures

Installation Examples

1# Install Accordion Component
2pnpm dlx shadcn@latest add "https://platform-ui.southguild.tech/r/accordion"
3
4# Install utility functions
5pnpm dlx shadcn@latest add "https://platform-ui.southguild.tech/r/utils"

Philosophy

Platform UI follows these core principles:

1. Developer Experience: Easy to use, well-documented, and TypeScript-first
2. Accessibility: WCAG 2.1 compliant components by default
3. Customization: Flexible theming and styling options
4. Performance: Lightweight and optimized for production
5. Modern: Uses the latest React patterns and best practices

Community

Join our growing community:

• GitHub: Contribute to the project and report issues
• Discord: Get help and discuss with other developers
• Twitter: Stay updated with the latest news and updates

Ready to build something amazing? Start with our installation guide or explore the component library.