This is a TypeScript monorepo containing React component libraries and utilities developed by @geee-be. The monorepo uses pnpm workspaces for package management and includes modern tooling for development, building, and publishing.
Sign in to like and favorite skills
This is a TypeScript monorepo containing React component libraries and utilities developed by @geee-be. The monorepo uses pnpm workspaces for package management and includes modern tooling for development, building, and publishing.
packages/@geee-be/react-twuireact-utilspnpm-workspace.yamlbiome.jsonctsconfig.json.changeset/pnpm installpnpm buildpnpm start:devpnpm lintpnpm lint:biome:fixpnpm -w changesworkspace:*Dialog.TriggerDialogTrigger// RECOMMENDED: Compound component pattern for complex UI elements <Card> <Card.Header> <Card.Title>User Profile</Card.Title> <Card.Description>Manage your account</Card.Description> </Card.Header> <Card.Content> <div className="flex items-center space-x-4"> <Avatar> <Avatar.Image src="/profile.jpg" /> <Avatar.Fallback>JD</Avatar.Fallback> </Avatar> <div> <h3>John Doe</h3> <p className="text-muted-fg">Software Engineer</p> </div> </div> </Card.Content> <Card.Footer> <Dialog> <Dialog.Trigger asChild> <Button>Edit Profile</Button> </Dialog.Trigger> <Dialog.Content> <Dialog.Header> <Dialog.Title>Edit Profile</Dialog.Title> <Dialog.Description>Update your profile information</Dialog.Description> </Dialog.Header> <Dialog.Footer> <Dialog.Close asChild> <Button variant="outline">Cancel</Button> </Dialog.Close> <Button>Save Changes</Button> </Dialog.Footer> </Dialog.Content> </Dialog> </Card.Footer> </Card> // LEGACY: Original form components (backward compatibility - still supported) import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@geee-be/react-twui'; <Card> <CardHeader> <CardTitle>User Profile</CardTitle> <CardDescription>Manage your account</CardDescription> </CardHeader> <CardContent> <UserForm /> </CardContent> <CardFooter> <Button>Save</Button> </CardFooter> </Card> // FLEXIBLE: Mixed patterns are also supported <Card> <Card.Header> <CardTitle>Mixed Pattern</CardTitle> </Card.Header> <CardContent> <Button>Save</Button> </CardContent> </Card> // All 17 compound components available: // Dialog, Sheet, Drawer, DropdownMenu, Card, Avatar, Breadcrumb, Carousel, // ScrollArea, Sidebar, Pagination, Popover, Tooltip, Collapsible, Command, InputOtp, Label
// SSR-safe state management const [theme, setTheme] = useLocalState('theme', 'light'); const isClient = useIsClient(); // Cross-tab communication const [message, postMessage] = useBroadcastChannel('user-channel'); // Responsive behavior const isMobile = useIsMobile(768);
// Component variants with CVA const buttonVariants = cva('base-classes', { variants: { variant: { default: 'bg-primary text-primary-fg', outline: 'border border-input bg-background', }, size: { sm: 'h-9 px-3 text-sm', lg: 'h-11 px-8 text-lg', }, }, }); // CSS custom properties for theming :root { --primary: 220 100% 50%; --primary-fg: 0 0% 100%; }