repository·main·Indexed 23 days ago
https://github.com/untitleduico/reactAn open-source collection of React components built with Tailwind CSS v4.3, React 19.2, TypeScript 5.9, and React Aria. It provides a wide array of UI elements, including avatar base components, background patterns, illustrations, and extensive icon sets for social media, payment methods, and developer integrations.
Untitled UI React is an open-source collection of React components designed for building modern interfaces. It is built using a modern tech stack to ensure performance, type safety, and maintainability.
Core Tech Stack:
Users can use these components by copying and pasting them into their projects to accelerate design and development workflows.
The components included in this open-source repository are licensed under the MIT license, allowing for free use in unlimited commercial projects.
Important Distinction:
The social-icons module provides a collection of individual React components for popular social media platforms. Each component represents a specific brand icon and can be imported directly from the entry point.
Available icons include:
AngelListAppleClubhouseDiscordDribbbleFacebookFigmaGitHubGoogleInstagramLayersLinkedInPinterestRedditSignalSnapchatTelegramTikTokTumblrTwitterXYouTubeThe integration-icons entrypoint provides a collection of specialized icon components representing various developer tools, AI platforms, and frameworks. You can import these icons individually to use them within your UI.
Available icons include:
BoltIconChatGPTIconClaudeIconCursorIconFigmaIconGeminiIconGitHubIconGrokIconLovableIconNextjsIconPerplexityIconReactIconReplitIconTailwindCSSIconV0IconViteIconThe payment-icons foundation provides a collection of individual React components for displaying various payment method logos. You can import these icons directly from the payment icons entrypoint to use them in your checkout or payment settings UI.
Available icons include major credit cards (Visa, Mastercard, Amex), digital wallets (Apple Pay, Google Pay, PayPal, Venmo), cryptocurrencies (Bitcoin, Ethereum), and various regional payment methods (Alipay, Klarna, UPI, etc.).
The Illustration component is a polymorphic wrapper used to render various UI illustrations by specifying a type. It accepts standard HTMLAttributes<HTMLDivElement> and provides specific props for controlling the visual scale and styling of the internal SVG and children.
type: A required key identifying which illustration to render. Supported types are:boxclouddocumentscredit-cardsize: Optional scale of the illustration. Values: 'sm', 'md', or 'lg'.svgClassName: Optional CSS class name to apply directly to the internal SVG element.childrenClassName: Optional CSS class name to apply to the children of the component.div attributes (e.g., className, style, id).The components/base/avatar/base-components entrypoint exports several specialized sub-components used to build or extend Avatar UI elements. These include:
AvatarAddButton: A component for adding new avatars or users.AvatarCompanyIcon: A component for displaying company logos within an avatar context.AvatarOnlineIndicator: A component for showing the online/offline status of a user.VerifiedTick: A component for displaying verification badges.The Illustration component supports the following illustration types via the type prop:
| Type | Component |
|---|---|
box | BoxIllustration |
cloud | CloudIllustration |
documents | DocumentsIllustration |
credit-card | CreditCardIllustration |
The following icons are exported from the payment-icons entrypoint:
AffirmIconAfterpayIconAlipayIconAmazonIconAmexIconApplePayIconAydenIconBancontactIconBinancePayIconBitcoinCashIconBitcoinIconBitpayIconBraintreeIconCashAppPayIconCitadeleIconCoinbaseIconDinersClubIconDiscoverIconEloIconEtheriumIconForbrugsforeningenIconGiropayIconGooglePayIconIdealIconInteracIconJCBIconKlarnaIconLightcoinIconMaestroIconMastercardIconPayoneerIconPayPalIconPaysafeIconQiwiIconRazorpayIconRevolutIconRuPayIconSamsungPayIconSEPAIconShopeePayIconShopPayIconSkrillIconSofortIconStripeIconUnionPayIconUPIIconVenmoIconVerifoneIconVisaIconWebmoneyIconWeChatIconWeChatPayIconWiseIconYandexIconZelleIconZipPayIconBackgroundPatternProps interface defines the configuration for the BackgroundPattern component. It extends standard SVGProps<SVGSVGElement> (excluding size) to allow for full SVG attribute customization.BackgroundPattern component is a wrapper for rendering various decorative SVG background patterns. It allows you to specify a pattern type and a size. It automatically applies pointer-events-none to ensure the pattern does not interfere with user interactions.