repository·main·Indexed 23 days ago
https://github.com/lmsqueezy/wedgesAn open-source React UI library built with the Wedges Design System, Radix primitives, and Tailwind CSS. It provides customizable components with full TypeScript support, including Alert, Avatar, AvatarGroup, Badge, and ButtonGroup.
Wedges is an open-source React UI library and design system. It is built using a combination of Radix UI primitives for accessibility and Tailwind CSS for styling.
Key features include:
ProgressCircle component adheres to the W3C WAI-ARIA progressbar role requirements to ensure screen reader compatibility.Switch component supports all accessibility features of the Radix Switch primitive.When you need more control than the standard Avatar component provides, you can use the sub-components. You must wrap these inner components in Avatar.Root to manage the lifecycle and state of the avatar (such as loading status and fallback visibility).
<Avatar.Root>
<Avatar.Image src="..." alt="..." />
<Avatar.Fallback>Fallback Content</Avatar.Fallback>
<Avatar.Notification />
<Avatar.Status />
</Avatar.Root>DropdownMenu component supports all accessibility features provided by the Radix UI Dropdown Menu primitive, ensuring compliance with WAI-ARIA patterns for keyboard navigation and screen reader support.Checkbox component supports all accessibility features of the Radix Checkbox primitive.Themable colors are semantic colors that adapt based on the active theme (e.g., light or dark). These allow you to build components that automatically switch appearance when the theme changes.
Available themable color classes:
bg-background (applied to <html> by default)bg-foreground (applied to <html> by default)bg-primarybg-secondarybg-destructivebg-surfaceFor more control over the tooltip's structure, lifecycle, and rendering (such as using a custom trigger or a portal), use the exported sub-components. This pattern allows you to compose the tooltip manually.
import { Tooltip } from "@lemonsqueezy/wedges";
<Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger />
<Tooltip.Portal>
<Tooltip.Content>
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</Tooltip.Provider><Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger />
<Tooltip.Portal>
<Tooltip.Content>
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</Tooltip.Provider>Wedges is an open-source React UI library built using the Wedges Design System, Radix primitives, and Tailwind CSS. It provides pre-built, customizable components with full TypeScript support.
To use Wedges in your project, visit the Wedges Docs for detailed installation and component usage instructions.
The Alert component is used to display notification messages to users. It can be customized with different colors, variants, and can be made closable with an onClose callback.
import { Alert } from "@lemonsqueezy/wedges";
<Alert title="Alert title">Alert content</Alert>If you are using pnpm, you must configure the hoisting pattern to ensure Wedges dependencies are accessible at the top level of your node_modules.
Add the following line to your .npmrc file:
public-hoist-pattern[]=*@lmsqueezy/*
After updating .npmrc, run pnpm install to apply the changes.
public-hoist-pattern[]=*@lmsqueezy/*Import the Button component from @lemonsqueezy/wedges to create clickable elements for various actions. By default, it renders as a standard HTML button.
import { Button } from "@lemonsqueezy/wedges";
<Button>Button</Button>