wunderui-mcp 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/DESIGN.md +2 -2
- package/data/design.json +230 -78
- package/package.json +1 -1
- package/src/index.mjs +4 -2
package/data/DESIGN.md
CHANGED
|
@@ -15,7 +15,7 @@ Core and Pro licence holders (the wunderui-core download from the purchase). Not
|
|
|
15
15
|
|
|
16
16
|
Unzip the wunderui-core download, run `npm install && npm run build` in it once, then in your project: `npm pack <wunderui-core>/packages/react --pack-destination .wunderui` and `npm install ./.wunderui/<the .tgz>`. The wunderui-setup agent skill does all of it.
|
|
17
17
|
|
|
18
|
-
Do not run `npm install @wunderui/react` — the package is not published, the command fails. Free plan: the
|
|
18
|
+
Do not run `npm install @wunderui/react` — the package is not published, the command fails. Free plan: the 76 free components are MIT source at https://github.com/wunder-ui/wunderui — add them with `npx wunderui-cli add <name>` (files, dependencies and styles), or copy components/, lib/ and styles/wunderui.css (each free component in design.json has a sourceRaw URL). Core and Pro components come with a plan (https://wunderui.com/#pricing).
|
|
19
19
|
|
|
20
20
|
Then wire up the styles and import:
|
|
21
21
|
|
|
@@ -653,7 +653,7 @@ on an `animate-in` the same way it works on a `transition`.
|
|
|
653
653
|
|
|
654
654
|
## Component inventory
|
|
655
655
|
|
|
656
|
-
**Plans.** 76 components are **Free** (
|
|
656
|
+
**Plans.** 76 components are **Free** (MIT, source at https://github.com/wunder-ui/wunderui); 125 are **Pro** and need WunderUI Core or Pro — charts, KPI cards, the data grid, the app layout and navigation, AI & agents. On the Free plan, build only with components marked Free and name the Pro component that would do the job better.
|
|
657
657
|
|
|
658
658
|
### Primitives
|
|
659
659
|
|
package/data/design.json
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"available": "Core and Pro licence holders (the wunderui-core download from the purchase). Not on the public npm registry.",
|
|
10
10
|
"package": "Unzip the wunderui-core download, run `npm install && npm run build` in it once, then in your project: `npm pack <wunderui-core>/packages/react --pack-destination .wunderui` and `npm install ./.wunderui/<the .tgz>`. The wunderui-setup agent skill does all of it.",
|
|
11
11
|
"doNot": "Do not run `npm install @wunderui/react` — the package is not published, the command fails.",
|
|
12
|
-
"free": "Free plan: the
|
|
12
|
+
"free": "Free plan: the 76 free components are MIT source at https://github.com/wunder-ui/wunderui — add them with `npx wunderui-cli add <name>` (files, dependencies and styles), or copy components/, lib/ and styles/wunderui.css (each free component in design.json has a sourceRaw URL). Core and Pro components come with a plan (https://wunderui.com/#pricing).",
|
|
13
13
|
"import": "import { Button, Card } from \"@wunderui/react\"",
|
|
14
14
|
"styles": "@import \"@wunderui/react/styles.css\";"
|
|
15
15
|
},
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"pro": 125
|
|
29
29
|
},
|
|
30
30
|
"plans": {
|
|
31
|
-
"free": "Free
|
|
31
|
+
"free": "WunderUI Free: the components with tier \"free\" are open source under the MIT License (https://github.com/wunder-ui/wunderui) — any project, commercial included. Every \"pro\" component needs WunderUI Core or Pro.",
|
|
32
32
|
"core": "WunderUI Core: every component, commercial license.",
|
|
33
33
|
"pro": "WunderUI Pro: everything in Core plus UI block and template source and all agent skills."
|
|
34
34
|
},
|
|
@@ -465,7 +465,9 @@
|
|
|
465
465
|
],
|
|
466
466
|
"props": "function Accordion({ className, ...props }: Accordion.Root.Props): React.JSX.Element;",
|
|
467
467
|
"example": "<Accordion className=\"gap-0\">\n <AccordionItem value=\"profile\" variant=\"divider\">\n <AccordionTrigger icon={<User />} iconVariant=\"plain\" indicatorVariant=\"plus\">\n Profile Settings\n </AccordionTrigger>\n <AccordionContent>Name, avatar and the handle other people see.</AccordionContent>\n </AccordionItem>\n</Accordion>",
|
|
468
|
-
"docs": "https://wunderui.com/components/accordion"
|
|
468
|
+
"docs": "https://wunderui.com/components/accordion",
|
|
469
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/accordion.tsx",
|
|
470
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/accordion.tsx"
|
|
469
471
|
},
|
|
470
472
|
{
|
|
471
473
|
"slug": "avatar",
|
|
@@ -486,7 +488,9 @@
|
|
|
486
488
|
],
|
|
487
489
|
"props": "function Avatar({ className, size, shape, variant, color, ...props }: Avatar.Root.Props & {\n /** Figma Avatar sizes: sm = 24px (2xs), xs = 28px, default = 36px (small), lg = 40px (medium), xl = 44px (large) */\n size?: \"sm\" | \"xs\" | \"default\" | \"lg\" | \"xl\";\n shape?: \"circle\" | \"square\";\n variant?: \"plain\" | \"primary\";\n /** Soft tint for initials avatars; ignored when an image renders. */\n color?: AvatarColor;\n}): React.JSX.Element;\ntype AvatarColor = \"indigo\" | \"blue\" | \"purple\" | \"pink\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"alternative\" | \"grey\";",
|
|
488
490
|
"example": "<Avatar size=\"lg\">\n <AvatarImage src=\"/avatars/03.png\" alt=\"Alina Lorenz\" />\n <AvatarFallback>AL</AvatarFallback>\n</Avatar>\n<Avatar size=\"lg\" variant=\"primary\">\n <AvatarFallback>PM</AvatarFallback>\n</Avatar>",
|
|
489
|
-
"docs": "https://wunderui.com/components/avatar"
|
|
491
|
+
"docs": "https://wunderui.com/components/avatar",
|
|
492
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/avatar.tsx",
|
|
493
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/avatar.tsx"
|
|
490
494
|
},
|
|
491
495
|
{
|
|
492
496
|
"slug": "avatar-group",
|
|
@@ -501,7 +505,9 @@
|
|
|
501
505
|
],
|
|
502
506
|
"props": "function AvatarGroup({ className, children, ...props }: React.ComponentProps<\"div\">): React.JSX.Element;",
|
|
503
507
|
"example": "<AvatarGroup>\n <Avatar><AvatarImage src=\"/avatars/01.png\" alt=\"Alina\" /><AvatarFallback>AL</AvatarFallback></Avatar>\n <Avatar><AvatarImage src=\"/avatars/08.png\" alt=\"Mira\" /><AvatarFallback>MC</AvatarFallback></Avatar>\n <AvatarGroupCount>+3</AvatarGroupCount>\n</AvatarGroup>",
|
|
504
|
-
"docs": "https://wunderui.com/components/avatar-group"
|
|
508
|
+
"docs": "https://wunderui.com/components/avatar-group",
|
|
509
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/avatar.tsx",
|
|
510
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/avatar.tsx"
|
|
505
511
|
},
|
|
506
512
|
{
|
|
507
513
|
"slug": "badge",
|
|
@@ -518,7 +524,9 @@
|
|
|
518
524
|
],
|
|
519
525
|
"props": "function Badge({ className, shape, color, badgeStyle, style, render, ...props }: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants> & {\n color?: BadgeColor;\n badgeStyle?: BadgeStyle;\n}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;\ntype BadgeColor = keyof typeof BADGE_COLORS;\ntype BadgeStyle = \"plain\" | \"light\" | \"light_border\" | \"border_color\" | \"border_grey\" | \"ghost\";",
|
|
520
526
|
"example": "<Badge color=\"green\" badgeStyle=\"light\">Active</Badge>",
|
|
521
|
-
"docs": "https://wunderui.com/components/badge"
|
|
527
|
+
"docs": "https://wunderui.com/components/badge",
|
|
528
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/badge.tsx",
|
|
529
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/badge.tsx"
|
|
522
530
|
},
|
|
523
531
|
{
|
|
524
532
|
"slug": "breadcrumb",
|
|
@@ -537,7 +545,9 @@
|
|
|
537
545
|
],
|
|
538
546
|
"props": "function Breadcrumb({ variant, ...props }: React.ComponentProps<\"nav\"> & {\n variant?: BreadcrumbVariant;\n}): React.JSX.Element;\ntype BreadcrumbVariant = \"plain\" | \"border\" | \"underline\";",
|
|
539
547
|
"example": "import { Home } from \"lucide-react\"\n\n<Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"/\"><Home /></BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n</Breadcrumb>",
|
|
540
|
-
"docs": "https://wunderui.com/components/breadcrumb"
|
|
548
|
+
"docs": "https://wunderui.com/components/breadcrumb",
|
|
549
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/breadcrumb.tsx",
|
|
550
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/breadcrumb.tsx"
|
|
541
551
|
},
|
|
542
552
|
{
|
|
543
553
|
"slug": "button",
|
|
@@ -553,7 +563,9 @@
|
|
|
553
563
|
],
|
|
554
564
|
"props": "function Button({ className, variant, shape, size, ...props }: Button.Props & VariantProps<typeof buttonVariants>): React.JSX.Element;",
|
|
555
565
|
"example": "import { Button } from \"@wunderui/react\"\nimport { Plus } from \"lucide-react\"\n\n// Solid, WCAG AA-safe blue button — the default call to action\n<Button variant=\"primary\" size=\"md\">\n <Plus /> Add item\n</Button>",
|
|
556
|
-
"docs": "https://wunderui.com/components/button"
|
|
566
|
+
"docs": "https://wunderui.com/components/button",
|
|
567
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/button.tsx",
|
|
568
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/button.tsx"
|
|
557
569
|
},
|
|
558
570
|
{
|
|
559
571
|
"slug": "icon-button",
|
|
@@ -568,7 +580,9 @@
|
|
|
568
580
|
],
|
|
569
581
|
"props": "function IconButton({ className, variant, shape, size, ...props }: Button.Props & VariantProps<typeof iconButtonVariants>): React.JSX.Element;",
|
|
570
582
|
"example": "<IconButton variant=\"primary\" shape=\"circle\">\n <Plus />\n</IconButton>",
|
|
571
|
-
"docs": "https://wunderui.com/components/icon-button"
|
|
583
|
+
"docs": "https://wunderui.com/components/icon-button",
|
|
584
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/icon-button.tsx",
|
|
585
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/icon-button.tsx"
|
|
572
586
|
},
|
|
573
587
|
{
|
|
574
588
|
"slug": "button-group",
|
|
@@ -582,7 +596,9 @@
|
|
|
582
596
|
],
|
|
583
597
|
"props": "function ButtonGroup({ shape, className, ...props }: React.ComponentProps<\"div\"> & {\n shape?: ButtonGroupShape;\n}): React.JSX.Element;\ntype ButtonGroupShape = \"rounded\" | \"pill\";",
|
|
584
598
|
"example": "<ButtonGroup>\n <Button variant=\"plain\">Day</Button>\n <Button variant=\"plain\">Week</Button>\n <Button variant=\"plain\">Month</Button>\n</ButtonGroup>",
|
|
585
|
-
"docs": "https://wunderui.com/components/button-group"
|
|
599
|
+
"docs": "https://wunderui.com/components/button-group",
|
|
600
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/button-group.tsx",
|
|
601
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/button-group.tsx"
|
|
586
602
|
},
|
|
587
603
|
{
|
|
588
604
|
"slug": "card",
|
|
@@ -604,7 +620,9 @@
|
|
|
604
620
|
],
|
|
605
621
|
"props": "function Card({ className, size, variant, ...props }: React.ComponentProps<\"div\"> & {\n size?: \"default\" | \"sm\";\n variant?: CardVariant;\n}): React.JSX.Element;\ntype CardVariant = keyof typeof CARD_VARIANT;",
|
|
606
622
|
"example": "<Card>\n <CardHeader>\n <CardTitle>Card title</CardTitle>\n <CardDescription>Supporting text.</CardDescription>\n </CardHeader>\n</Card>",
|
|
607
|
-
"docs": "https://wunderui.com/components/card"
|
|
623
|
+
"docs": "https://wunderui.com/components/card",
|
|
624
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/card.tsx",
|
|
625
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/card.tsx"
|
|
608
626
|
},
|
|
609
627
|
{
|
|
610
628
|
"slug": "checkbox",
|
|
@@ -621,7 +639,9 @@
|
|
|
621
639
|
],
|
|
622
640
|
"props": "function Checkbox({ className, ...props }: Checkbox.Root.Props): React.JSX.Element;",
|
|
623
641
|
"example": "<Checkbox aria-label=\"Example checkbox\" defaultChecked onCheckedChange={setValue} />",
|
|
624
|
-
"docs": "https://wunderui.com/components/checkbox"
|
|
642
|
+
"docs": "https://wunderui.com/components/checkbox",
|
|
643
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/checkbox.tsx",
|
|
644
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/checkbox.tsx"
|
|
625
645
|
},
|
|
626
646
|
{
|
|
627
647
|
"slug": "switch",
|
|
@@ -636,7 +656,9 @@
|
|
|
636
656
|
],
|
|
637
657
|
"props": "function Switch({ className, size, ...props }: Switch.Root.Props & {\n size?: \"sm\" | \"default\";\n}): React.JSX.Element;",
|
|
638
658
|
"example": "<Switch aria-label=\"Example switch\" defaultChecked onCheckedChange={setValue} />",
|
|
639
|
-
"docs": "https://wunderui.com/components/switch"
|
|
659
|
+
"docs": "https://wunderui.com/components/switch",
|
|
660
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/switch.tsx",
|
|
661
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/switch.tsx"
|
|
640
662
|
},
|
|
641
663
|
{
|
|
642
664
|
"slug": "radio-group",
|
|
@@ -651,7 +673,9 @@
|
|
|
651
673
|
],
|
|
652
674
|
"props": "function RadioGroup({ className, ...props }: RadioGroup.Props): React.JSX.Element;",
|
|
653
675
|
"example": "<RadioGroup defaultValue=\"pro\">\n <SelectorItemGroup>\n <SelectorItem title=\"Starter\" description=\"1 project · community support\" control={<RadioGroupItem value=\"starter\" />} />\n <SelectorItem title=\"Pro\" description=\"Unlimited projects · €12 per month\" control={<RadioGroupItem value=\"pro\" />} />\n <SelectorItem title=\"Team\" description=\"Shared libraries · €49 per month\" control={<RadioGroupItem value=\"team\" />} />\n </SelectorItemGroup>\n</RadioGroup>",
|
|
654
|
-
"docs": "https://wunderui.com/components/radio-group"
|
|
676
|
+
"docs": "https://wunderui.com/components/radio-group",
|
|
677
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/radio-group.tsx",
|
|
678
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/radio-group.tsx"
|
|
655
679
|
},
|
|
656
680
|
{
|
|
657
681
|
"slug": "input",
|
|
@@ -667,7 +691,9 @@
|
|
|
667
691
|
],
|
|
668
692
|
"props": "function Input({ className, type, size, ref, onInvalid, onInput, onBlur, ...props }: Omit<React.ComponentProps<\"input\">, \"size\"> & VariantProps<typeof inputVariants>): React.JSX.Element;",
|
|
669
693
|
"example": "<Input size=\"default\" placeholder=\"Email\" />",
|
|
670
|
-
"docs": "https://wunderui.com/components/input"
|
|
694
|
+
"docs": "https://wunderui.com/components/input",
|
|
695
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/input.tsx",
|
|
696
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/input.tsx"
|
|
671
697
|
},
|
|
672
698
|
{
|
|
673
699
|
"slug": "textarea",
|
|
@@ -683,7 +709,9 @@
|
|
|
683
709
|
],
|
|
684
710
|
"props": "function Textarea({ className, size, showCount, maxLength, value, defaultValue, onChange, ...props }: Omit<React.ComponentProps<\"textarea\">, \"size\"> & VariantProps<typeof textareaVariants> & {\n /** Show a \"n/maxLength\" character counter in the bottom-right corner. Requires maxLength. */\n showCount?: boolean;\n}): React.JSX.Element;",
|
|
685
711
|
"example": "<Textarea placeholder=\"Write a message...\" />",
|
|
686
|
-
"docs": "https://wunderui.com/components/textarea"
|
|
712
|
+
"docs": "https://wunderui.com/components/textarea",
|
|
713
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/textarea.tsx",
|
|
714
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/textarea.tsx"
|
|
687
715
|
},
|
|
688
716
|
{
|
|
689
717
|
"slug": "progress",
|
|
@@ -702,7 +730,9 @@
|
|
|
702
730
|
],
|
|
703
731
|
"props": "function Progress({ className, children, value, ...props }: Progress.Root.Props): React.JSX.Element;",
|
|
704
732
|
"example": "<Progress value={65} />",
|
|
705
|
-
"docs": "https://wunderui.com/components/progress"
|
|
733
|
+
"docs": "https://wunderui.com/components/progress",
|
|
734
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/progress.tsx",
|
|
735
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/progress.tsx"
|
|
706
736
|
},
|
|
707
737
|
{
|
|
708
738
|
"slug": "slider",
|
|
@@ -722,7 +752,9 @@
|
|
|
722
752
|
],
|
|
723
753
|
"props": "function Slider({ className, children, value, defaultValue, \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy, ...props }: Slider.Root.Props): React.JSX.Element;",
|
|
724
754
|
"example": "<Slider aria-label=\"Value\" defaultValue={40} onValueChange={setValue} />",
|
|
725
|
-
"docs": "https://wunderui.com/components/slider"
|
|
755
|
+
"docs": "https://wunderui.com/components/slider",
|
|
756
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/slider.tsx",
|
|
757
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/slider.tsx"
|
|
726
758
|
},
|
|
727
759
|
{
|
|
728
760
|
"slug": "pagination",
|
|
@@ -737,7 +769,9 @@
|
|
|
737
769
|
],
|
|
738
770
|
"props": "function Pagination({ page, pageCount, onPageChange, className }: PaginationProps): React.JSX.Element;",
|
|
739
771
|
"example": "<Pagination page={page} pageCount={12} onPageChange={setPage} />",
|
|
740
|
-
"docs": "https://wunderui.com/components/pagination"
|
|
772
|
+
"docs": "https://wunderui.com/components/pagination",
|
|
773
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/pagination.tsx",
|
|
774
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/pagination.tsx"
|
|
741
775
|
},
|
|
742
776
|
{
|
|
743
777
|
"slug": "separator",
|
|
@@ -751,7 +785,9 @@
|
|
|
751
785
|
],
|
|
752
786
|
"props": "function Separator({ className, orientation, dashed, ...props }: Separator.Props & {\n dashed?: boolean;\n}): React.JSX.Element;",
|
|
753
787
|
"example": "<Separator orientation=\"horizontal\" dashed={false} />",
|
|
754
|
-
"docs": "https://wunderui.com/components/separator"
|
|
788
|
+
"docs": "https://wunderui.com/components/separator",
|
|
789
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/separator.tsx",
|
|
790
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/separator.tsx"
|
|
755
791
|
},
|
|
756
792
|
{
|
|
757
793
|
"slug": "divider-with-label",
|
|
@@ -765,7 +801,9 @@
|
|
|
765
801
|
],
|
|
766
802
|
"props": "function DividerWithLabel({ children, className, }: {\n children: ReactNode;\n className?: string;\n}): React.JSX.Element;",
|
|
767
803
|
"example": "<DividerWithLabel>OR</DividerWithLabel>",
|
|
768
|
-
"docs": "https://wunderui.com/components/divider-with-label"
|
|
804
|
+
"docs": "https://wunderui.com/components/divider-with-label",
|
|
805
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/divider-label.tsx",
|
|
806
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/divider-label.tsx"
|
|
769
807
|
},
|
|
770
808
|
{
|
|
771
809
|
"slug": "skeleton",
|
|
@@ -779,7 +817,9 @@
|
|
|
779
817
|
],
|
|
780
818
|
"props": "function Skeleton({ className, variant, ...props }: React.ComponentProps<\"div\"> & VariantProps<typeof skeletonVariants>): React.JSX.Element;",
|
|
781
819
|
"example": "<Skeleton variant=\"title\" />\n<Skeleton variant=\"text\" />",
|
|
782
|
-
"docs": "https://wunderui.com/components/skeleton"
|
|
820
|
+
"docs": "https://wunderui.com/components/skeleton",
|
|
821
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/skeleton.tsx",
|
|
822
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/skeleton.tsx"
|
|
783
823
|
},
|
|
784
824
|
{
|
|
785
825
|
"slug": "tooltip",
|
|
@@ -795,7 +835,9 @@
|
|
|
795
835
|
],
|
|
796
836
|
"props": "function Tooltip({ ...props }: Tooltip.Root.Props): React.JSX.Element;",
|
|
797
837
|
"example": "<Tooltip>\n <TooltipTrigger render={<Button variant=\"plain\" />}>Hover</TooltipTrigger>\n <TooltipContent>Tooltip text</TooltipContent>\n</Tooltip>",
|
|
798
|
-
"docs": "https://wunderui.com/components/tooltip"
|
|
838
|
+
"docs": "https://wunderui.com/components/tooltip",
|
|
839
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/tooltip.tsx",
|
|
840
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/tooltip.tsx"
|
|
799
841
|
},
|
|
800
842
|
{
|
|
801
843
|
"slug": "dialog",
|
|
@@ -819,7 +861,9 @@
|
|
|
819
861
|
],
|
|
820
862
|
"props": "function Dialog({ ...props }: Dialog.Root.Props): React.JSX.Element;",
|
|
821
863
|
"example": "<Dialog>\n <DialogTrigger render={<Button />}>Open</DialogTrigger>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Title</DialogTitle>\n </DialogHeader>\n </DialogContent>\n</Dialog>",
|
|
822
|
-
"docs": "https://wunderui.com/components/dialog"
|
|
864
|
+
"docs": "https://wunderui.com/components/dialog",
|
|
865
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/dialog.tsx",
|
|
866
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/dialog.tsx"
|
|
823
867
|
},
|
|
824
868
|
{
|
|
825
869
|
"slug": "alert-dialog",
|
|
@@ -843,7 +887,9 @@
|
|
|
843
887
|
],
|
|
844
888
|
"props": "function AlertDialog({ ...props }: AlertDialog.Root.Props): React.JSX.Element;",
|
|
845
889
|
"example": "<AlertDialog>\n <AlertDialogTrigger render={<Button />}>Delete account</AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Delete account?</AlertDialogTitle>\n <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Cancel</AlertDialogCancel>\n <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n</AlertDialog>",
|
|
846
|
-
"docs": "https://wunderui.com/components/alert-dialog"
|
|
890
|
+
"docs": "https://wunderui.com/components/alert-dialog",
|
|
891
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/alert-dialog.tsx",
|
|
892
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/alert-dialog.tsx"
|
|
847
893
|
},
|
|
848
894
|
{
|
|
849
895
|
"slug": "collapsible",
|
|
@@ -859,7 +905,9 @@
|
|
|
859
905
|
],
|
|
860
906
|
"props": "function Collapsible({ ...props }: Collapsible.Root.Props): React.JSX.Element;",
|
|
861
907
|
"example": "<Collapsible defaultOpen>\n <CollapsibleTrigger>Show details</CollapsibleTrigger>\n <CollapsibleContent>Lorem ipsum dolor sit amet...</CollapsibleContent>\n</Collapsible>",
|
|
862
|
-
"docs": "https://wunderui.com/components/collapsible"
|
|
908
|
+
"docs": "https://wunderui.com/components/collapsible",
|
|
909
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/collapsible.tsx",
|
|
910
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/collapsible.tsx"
|
|
863
911
|
},
|
|
864
912
|
{
|
|
865
913
|
"slug": "toggle",
|
|
@@ -874,7 +922,9 @@
|
|
|
874
922
|
],
|
|
875
923
|
"props": "function Toggle({ className, size, ...props }: Toggle.Props & VariantProps<typeof toggleVariants>): React.JSX.Element;",
|
|
876
924
|
"example": "<Toggle defaultPressed aria-label=\"Bold\">\n <Bold />\n</Toggle>",
|
|
877
|
-
"docs": "https://wunderui.com/components/toggle"
|
|
925
|
+
"docs": "https://wunderui.com/components/toggle",
|
|
926
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/toggle.tsx",
|
|
927
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/toggle.tsx"
|
|
878
928
|
},
|
|
879
929
|
{
|
|
880
930
|
"slug": "meter",
|
|
@@ -892,7 +942,9 @@
|
|
|
892
942
|
],
|
|
893
943
|
"props": "function Meter({ className, children, value, ...props }: Meter.Root.Props): React.JSX.Element;",
|
|
894
944
|
"example": "<Meter value={72}>\n <MeterLabel>Storage used</MeterLabel>\n <MeterValue />\n</Meter>",
|
|
895
|
-
"docs": "https://wunderui.com/components/meter"
|
|
945
|
+
"docs": "https://wunderui.com/components/meter",
|
|
946
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/meter.tsx",
|
|
947
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/meter.tsx"
|
|
896
948
|
},
|
|
897
949
|
{
|
|
898
950
|
"slug": "kbd",
|
|
@@ -907,7 +959,9 @@
|
|
|
907
959
|
],
|
|
908
960
|
"props": "function Kbd({ className, ...props }: React.ComponentProps<\"kbd\">): React.JSX.Element;",
|
|
909
961
|
"example": "<KbdGroup>\n <Kbd>⌘</Kbd>\n <Kbd>K</Kbd>\n</KbdGroup>",
|
|
910
|
-
"docs": "https://wunderui.com/components/kbd"
|
|
962
|
+
"docs": "https://wunderui.com/components/kbd",
|
|
963
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/kbd.tsx",
|
|
964
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/kbd.tsx"
|
|
911
965
|
},
|
|
912
966
|
{
|
|
913
967
|
"slug": "spinner",
|
|
@@ -921,7 +975,9 @@
|
|
|
921
975
|
],
|
|
922
976
|
"props": "function Spinner({ className, ...props }: React.ComponentProps<\"svg\">): React.JSX.Element;",
|
|
923
977
|
"example": "<Spinner />",
|
|
924
|
-
"docs": "https://wunderui.com/components/spinner"
|
|
978
|
+
"docs": "https://wunderui.com/components/spinner",
|
|
979
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/spinner.tsx",
|
|
980
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/spinner.tsx"
|
|
925
981
|
},
|
|
926
982
|
{
|
|
927
983
|
"slug": "toolbar",
|
|
@@ -939,7 +995,9 @@
|
|
|
939
995
|
],
|
|
940
996
|
"props": "function Toolbar({ className, ...props }: Toolbar.Root.Props): React.JSX.Element;",
|
|
941
997
|
"example": "<Toolbar>\n <ToolbarGroup>\n <ToolbarButton aria-label=\"Bold\"><Bold /></ToolbarButton>\n <ToolbarButton aria-label=\"Italic\"><Italic /></ToolbarButton>\n </ToolbarGroup>\n <ToolbarSeparator />\n</Toolbar>",
|
|
942
|
-
"docs": "https://wunderui.com/components/toolbar"
|
|
998
|
+
"docs": "https://wunderui.com/components/toolbar",
|
|
999
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/toolbar.tsx",
|
|
1000
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/toolbar.tsx"
|
|
943
1001
|
},
|
|
944
1002
|
{
|
|
945
1003
|
"slug": "dropdown-menu",
|
|
@@ -985,7 +1043,9 @@
|
|
|
985
1043
|
],
|
|
986
1044
|
"props": "function HoverCard({ ...props }: PreviewCard.Root.Props): React.JSX.Element;",
|
|
987
1045
|
"example": "<HoverCard>\n <HoverCardTrigger render={<Button />}>@handle</HoverCardTrigger>\n <HoverCardContent>Profile preview</HoverCardContent>\n</HoverCard>",
|
|
988
|
-
"docs": "https://wunderui.com/components/hover-card"
|
|
1046
|
+
"docs": "https://wunderui.com/components/hover-card",
|
|
1047
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/hover-card.tsx",
|
|
1048
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/hover-card.tsx"
|
|
989
1049
|
},
|
|
990
1050
|
{
|
|
991
1051
|
"slug": "popover",
|
|
@@ -1002,7 +1062,9 @@
|
|
|
1002
1062
|
],
|
|
1003
1063
|
"props": "function Popover({ ...props }: Popover.Root.Props): React.JSX.Element;",
|
|
1004
1064
|
"example": "<Popover>\n <PopoverTrigger render={<Button />}>Open</PopoverTrigger>\n <PopoverContent>Content</PopoverContent>\n</Popover>",
|
|
1005
|
-
"docs": "https://wunderui.com/components/popover"
|
|
1065
|
+
"docs": "https://wunderui.com/components/popover",
|
|
1066
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/popover.tsx",
|
|
1067
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/popover.tsx"
|
|
1006
1068
|
},
|
|
1007
1069
|
{
|
|
1008
1070
|
"slug": "table",
|
|
@@ -1041,7 +1103,9 @@
|
|
|
1041
1103
|
],
|
|
1042
1104
|
"props": "function Tabs({ className, orientation, ...props }: Tabs.Root.Props): React.JSX.Element;",
|
|
1043
1105
|
"example": "<Tabs defaultValue=\"day\">\n <TabsList>\n <TabsTrigger value=\"day\">Day</TabsTrigger>\n </TabsList>\n <TabsContent value=\"day\">...</TabsContent>\n</Tabs>",
|
|
1044
|
-
"docs": "https://wunderui.com/components/tabs"
|
|
1106
|
+
"docs": "https://wunderui.com/components/tabs",
|
|
1107
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/tabs.tsx",
|
|
1108
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/tabs.tsx"
|
|
1045
1109
|
},
|
|
1046
1110
|
{
|
|
1047
1111
|
"slug": "area-chart",
|
|
@@ -1242,7 +1306,9 @@
|
|
|
1242
1306
|
],
|
|
1243
1307
|
"props": "function Agenda({ items, className, }: {\n items: AgendaItem[];\n className?: string;\n}): React.JSX.Element;",
|
|
1244
1308
|
"example": "<Agenda items={[{ id, time, title, description, color }]} />",
|
|
1245
|
-
"docs": "https://wunderui.com/components/agenda"
|
|
1309
|
+
"docs": "https://wunderui.com/components/agenda",
|
|
1310
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/agenda.tsx",
|
|
1311
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/agenda.tsx"
|
|
1246
1312
|
},
|
|
1247
1313
|
{
|
|
1248
1314
|
"slug": "action-bar",
|
|
@@ -1256,7 +1322,9 @@
|
|
|
1256
1322
|
],
|
|
1257
1323
|
"props": "function ActionBar({ label, children, className, }: {\n label?: ReactNode;\n children: ReactNode;\n className?: string;\n}): React.JSX.Element;",
|
|
1258
1324
|
"example": "<ActionBar label=\"3 selected\">\n <Button variant=\"plain\" size=\"sm\">Archive</Button>\n</ActionBar>",
|
|
1259
|
-
"docs": "https://wunderui.com/components/action-bar"
|
|
1325
|
+
"docs": "https://wunderui.com/components/action-bar",
|
|
1326
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/action-bar.tsx",
|
|
1327
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/action-bar.tsx"
|
|
1260
1328
|
},
|
|
1261
1329
|
{
|
|
1262
1330
|
"slug": "carousel",
|
|
@@ -1270,7 +1338,9 @@
|
|
|
1270
1338
|
],
|
|
1271
1339
|
"props": "function Carousel({ children, className, label, }: {\n children: React.ReactNode;\n className?: string;\n /** Accessible name of the scrolling region. */\n label?: string;\n}): React.JSX.Element;",
|
|
1272
1340
|
"example": "<Carousel>\n {items.map((item) => <Card key={item.id}>{item.label}</Card>)}\n</Carousel>",
|
|
1273
|
-
"docs": "https://wunderui.com/components/carousel"
|
|
1341
|
+
"docs": "https://wunderui.com/components/carousel",
|
|
1342
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/carousel.tsx",
|
|
1343
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/carousel.tsx"
|
|
1274
1344
|
},
|
|
1275
1345
|
{
|
|
1276
1346
|
"slug": "data-grid",
|
|
@@ -1299,7 +1369,9 @@
|
|
|
1299
1369
|
],
|
|
1300
1370
|
"props": "function EmptyState({ icon, title, description, action, variant, className, }: {\n icon?: ReactNode;\n title: string;\n description?: string;\n action?: ReactNode;\n /** Frame style — mirrors the Figma Empty State \"Style\" variants. */\n variant?: keyof typeof EMPTY_STATE_VARIANTS;\n className?: string;\n}): React.JSX.Element;",
|
|
1301
1371
|
"example": "<EmptyState title=\"No results\" description=\"...\" action={<Button>Reset</Button>} />",
|
|
1302
|
-
"docs": "https://wunderui.com/components/empty-state"
|
|
1372
|
+
"docs": "https://wunderui.com/components/empty-state",
|
|
1373
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/stat-card.tsx",
|
|
1374
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/stat-card.tsx"
|
|
1303
1375
|
},
|
|
1304
1376
|
{
|
|
1305
1377
|
"slug": "file-tree",
|
|
@@ -1314,7 +1386,9 @@
|
|
|
1314
1386
|
],
|
|
1315
1387
|
"props": "function FileTree({ data, className, }: {\n data: FileTreeNode[];\n className?: string;\n}): React.JSX.Element;",
|
|
1316
1388
|
"example": "<FileTree data={[{ id, name, children: [...] }]} />",
|
|
1317
|
-
"docs": "https://wunderui.com/components/file-tree"
|
|
1389
|
+
"docs": "https://wunderui.com/components/file-tree",
|
|
1390
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/file-tree.tsx",
|
|
1391
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/file-tree.tsx"
|
|
1318
1392
|
},
|
|
1319
1393
|
{
|
|
1320
1394
|
"slug": "floating-toc",
|
|
@@ -1328,7 +1402,9 @@
|
|
|
1328
1402
|
],
|
|
1329
1403
|
"props": "function FloatingToc({ items, activeId, onSelect, scrollContainer, className, }: {\n items: TocItem[];\n activeId?: string;\n onSelect?: (id: string) => void;\n /** The element that scrolls the sections, if it is not the page. */\n scrollContainer?: React.RefObject<HTMLElement | null>;\n className?: string;\n}): React.JSX.Element;",
|
|
1330
1404
|
"example": "const articleRef = React.useRef<HTMLDivElement>(null)\n\n<div ref={articleRef} className=\"overflow-y-auto\">\n <section id=\"why\">…</section>\n <section id=\"setup\">…</section>\n</div>\n<FloatingToc\n items={[{ id: \"why\", label: \"Why tokens\" }, { id: \"setup\", label: \"Set up the theme\" }]}\n scrollContainer={articleRef}\n/>",
|
|
1331
|
-
"docs": "https://wunderui.com/components/floating-toc"
|
|
1405
|
+
"docs": "https://wunderui.com/components/floating-toc",
|
|
1406
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/floating-toc.tsx",
|
|
1407
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/floating-toc.tsx"
|
|
1332
1408
|
},
|
|
1333
1409
|
{
|
|
1334
1410
|
"slug": "holo-card",
|
|
@@ -1342,7 +1418,9 @@
|
|
|
1342
1418
|
],
|
|
1343
1419
|
"props": "function HoloCard({ children, className, }: {\n children: React.ReactNode;\n className?: string;\n}): React.JSX.Element;",
|
|
1344
1420
|
"example": "<HoloCard>\n <p>Hover to reveal the spotlight effect.</p>\n</HoloCard>",
|
|
1345
|
-
"docs": "https://wunderui.com/components/holo-card"
|
|
1421
|
+
"docs": "https://wunderui.com/components/holo-card",
|
|
1422
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/holo-card.tsx",
|
|
1423
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/holo-card.tsx"
|
|
1346
1424
|
},
|
|
1347
1425
|
{
|
|
1348
1426
|
"slug": "kanban",
|
|
@@ -1375,7 +1453,9 @@
|
|
|
1375
1453
|
],
|
|
1376
1454
|
"props": "function ItemCard({ icon, title, description, meta, action, className, }: {\n icon?: ReactNode;\n title: ReactNode;\n description?: ReactNode;\n meta?: ReactNode;\n action?: ReactNode;\n className?: string;\n}): React.JSX.Element;",
|
|
1377
1455
|
"example": "<ItemCardGroup>\n <ItemCard icon={<FileText />} title=\"...\" description=\"...\" />\n</ItemCardGroup>",
|
|
1378
|
-
"docs": "https://wunderui.com/components/item-card"
|
|
1456
|
+
"docs": "https://wunderui.com/components/item-card",
|
|
1457
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/item-card.tsx",
|
|
1458
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/item-card.tsx"
|
|
1379
1459
|
},
|
|
1380
1460
|
{
|
|
1381
1461
|
"slug": "kpi",
|
|
@@ -1449,7 +1529,9 @@
|
|
|
1449
1529
|
],
|
|
1450
1530
|
"props": "function Timeline({ items, className, }: {\n items: TimelineItem[];\n className?: string;\n}): React.JSX.Element;",
|
|
1451
1531
|
"example": "<Timeline items={[{ id, title, timestamp, color }]} />",
|
|
1452
|
-
"docs": "https://wunderui.com/components/timeline"
|
|
1532
|
+
"docs": "https://wunderui.com/components/timeline",
|
|
1533
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/timeline.tsx",
|
|
1534
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/timeline.tsx"
|
|
1453
1535
|
},
|
|
1454
1536
|
{
|
|
1455
1537
|
"slug": "widget",
|
|
@@ -1463,7 +1545,9 @@
|
|
|
1463
1545
|
],
|
|
1464
1546
|
"props": "function Widget({ title, description, action, footer, children, className, }: {\n title?: ReactNode;\n description?: ReactNode;\n action?: ReactNode;\n footer?: ReactNode;\n children: ReactNode;\n className?: string;\n}): React.JSX.Element;",
|
|
1465
1547
|
"example": "<Widget title=\"Title\" description=\"...\">\n <YourContent />\n</Widget>",
|
|
1466
|
-
"docs": "https://wunderui.com/components/widget"
|
|
1548
|
+
"docs": "https://wunderui.com/components/widget",
|
|
1549
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/widget.tsx",
|
|
1550
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/widget.tsx"
|
|
1467
1551
|
},
|
|
1468
1552
|
{
|
|
1469
1553
|
"slug": "app-layout",
|
|
@@ -1621,7 +1705,9 @@
|
|
|
1621
1705
|
],
|
|
1622
1706
|
"props": "function NativeSelect({ items, children, ...props }: Select.Root.Props<string>): React.JSX.Element;",
|
|
1623
1707
|
"example": "<NativeSelect value={value} onValueChange={setValue}>\n <NativeSelectTrigger aria-label=\"Choose an option\"><NativeSelectValue /></NativeSelectTrigger>\n <NativeSelectContent>\n <NativeSelectItem value=\"us\">United States</NativeSelectItem>\n </NativeSelectContent>\n</NativeSelect>",
|
|
1624
|
-
"docs": "https://wunderui.com/components/native-select"
|
|
1708
|
+
"docs": "https://wunderui.com/components/native-select",
|
|
1709
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/native-select.tsx",
|
|
1710
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/native-select.tsx"
|
|
1625
1711
|
},
|
|
1626
1712
|
{
|
|
1627
1713
|
"slug": "inline-select",
|
|
@@ -1639,7 +1725,9 @@
|
|
|
1639
1725
|
],
|
|
1640
1726
|
"props": "function InlineSelect({ items, children, ...props }: Select.Root.Props<string>): React.JSX.Element;",
|
|
1641
1727
|
"example": "<InlineSelect defaultValue=\"newest\">\n <InlineSelectTrigger aria-label=\"Choose an option\"><InlineSelectValue /></InlineSelectTrigger>\n <InlineSelectContent>...</InlineSelectContent>\n</InlineSelect>",
|
|
1642
|
-
"docs": "https://wunderui.com/components/inline-select"
|
|
1728
|
+
"docs": "https://wunderui.com/components/inline-select",
|
|
1729
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/inline-select.tsx",
|
|
1730
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/inline-select.tsx"
|
|
1643
1731
|
},
|
|
1644
1732
|
{
|
|
1645
1733
|
"slug": "checkbox-button-group",
|
|
@@ -1653,7 +1741,9 @@
|
|
|
1653
1741
|
],
|
|
1654
1742
|
"props": "function CheckboxButtonGroup<Value extends string>({ className, ...props }: ToggleGroup.Props<Value>): React.JSX.Element;",
|
|
1655
1743
|
"example": "<CheckboxButtonGroup value={value} onValueChange={setValue}>\n <ToggleButton aria-label=\"Bold\" value=\"bold\"><Bold /></ToggleButton>\n</CheckboxButtonGroup>",
|
|
1656
|
-
"docs": "https://wunderui.com/components/checkbox-button-group"
|
|
1744
|
+
"docs": "https://wunderui.com/components/checkbox-button-group",
|
|
1745
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/toggle-button-group.tsx",
|
|
1746
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/toggle-button-group.tsx"
|
|
1657
1747
|
},
|
|
1658
1748
|
{
|
|
1659
1749
|
"slug": "radio-button-group",
|
|
@@ -1667,7 +1757,9 @@
|
|
|
1667
1757
|
],
|
|
1668
1758
|
"props": "function RadioButtonGroup<Value extends string>({ className, ...props }: Omit<ToggleGroup.Props<Value>, \"multiple\">): React.JSX.Element;",
|
|
1669
1759
|
"example": "<RadioButtonGroup value={value} onValueChange={setValue}>\n <ToggleButton aria-label=\"Align left\" value=\"left\"><AlignLeft /></ToggleButton>\n</RadioButtonGroup>",
|
|
1670
|
-
"docs": "https://wunderui.com/components/radio-button-group"
|
|
1760
|
+
"docs": "https://wunderui.com/components/radio-button-group",
|
|
1761
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/toggle-button-group.tsx",
|
|
1762
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/toggle-button-group.tsx"
|
|
1671
1763
|
},
|
|
1672
1764
|
{
|
|
1673
1765
|
"slug": "number-stepper",
|
|
@@ -1681,7 +1773,9 @@
|
|
|
1681
1773
|
],
|
|
1682
1774
|
"props": "function NumberStepper({ value, onValueChange, min, max, step, format, className, ...props }: Omit<React.ComponentProps<\"div\">, \"children\"> & {\n value: number;\n onValueChange: (value: number) => void;\n min?: number;\n max?: number;\n step?: number;\n /** Formats the displayed value, e.g. `(n) => `${n}%`` */\n format?: (value: number) => React.ReactNode;\n className?: string;\n}): React.JSX.Element;",
|
|
1683
1775
|
"example": "<NumberStepper value={value} onValueChange={setValue} min={0} max={10} />",
|
|
1684
|
-
"docs": "https://wunderui.com/components/number-stepper"
|
|
1776
|
+
"docs": "https://wunderui.com/components/number-stepper",
|
|
1777
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/number-stepper.tsx",
|
|
1778
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/number-stepper.tsx"
|
|
1685
1779
|
},
|
|
1686
1780
|
{
|
|
1687
1781
|
"slug": "drop-zone",
|
|
@@ -1695,7 +1789,9 @@
|
|
|
1695
1789
|
],
|
|
1696
1790
|
"props": "function DropZone({ onFiles, accept, hint, className, }: {\n onFiles?: (files: FileList) => void;\n accept?: string;\n /** Line under the prompt. Defaults to the accepted types, or \"Any file type\". State your size limit here. */\n hint?: React.ReactNode;\n className?: string;\n}): React.JSX.Element;",
|
|
1697
1791
|
"example": "<DropZone onFiles={(files) => upload(files)} accept=\"image/*\" />",
|
|
1698
|
-
"docs": "https://wunderui.com/components/drop-zone"
|
|
1792
|
+
"docs": "https://wunderui.com/components/drop-zone",
|
|
1793
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/drop-zone.tsx",
|
|
1794
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/drop-zone.tsx"
|
|
1699
1795
|
},
|
|
1700
1796
|
{
|
|
1701
1797
|
"slug": "rich-text-editor",
|
|
@@ -1711,7 +1807,9 @@
|
|
|
1711
1807
|
],
|
|
1712
1808
|
"props": "function RichTextEditor(props: RichTextEditorProps): React.JSX.Element;",
|
|
1713
1809
|
"example": "<RichTextEditor content={html} onChange={setHtml} placeholder=\"Write something...\" />",
|
|
1714
|
-
"docs": "https://wunderui.com/components/rich-text-editor"
|
|
1810
|
+
"docs": "https://wunderui.com/components/rich-text-editor",
|
|
1811
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/rich-text-editor.tsx",
|
|
1812
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/rich-text-editor.tsx"
|
|
1715
1813
|
},
|
|
1716
1814
|
{
|
|
1717
1815
|
"slug": "color-picker",
|
|
@@ -1727,7 +1825,9 @@
|
|
|
1727
1825
|
],
|
|
1728
1826
|
"props": "function ColorPicker({ variant, value, defaultValue, onValueChange, alpha, defaultAlpha, onAlphaChange, showAlpha, format, defaultFormat, onFormatChange, swatches, defaultSwatches, onSwatchesChange, title, onClose, className, }: ColorPickerProps): React.JSX.Element;",
|
|
1729
1827
|
"example": "<ColorPicker value={hex} onValueChange={setHex} />",
|
|
1730
|
-
"docs": "https://wunderui.com/components/color-picker"
|
|
1828
|
+
"docs": "https://wunderui.com/components/color-picker",
|
|
1829
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/color-picker.tsx",
|
|
1830
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/color-picker.tsx"
|
|
1731
1831
|
},
|
|
1732
1832
|
{
|
|
1733
1833
|
"slug": "cell-color-picker",
|
|
@@ -1741,7 +1841,9 @@
|
|
|
1741
1841
|
],
|
|
1742
1842
|
"props": "function CellColorPicker({ value, onValueChange, }: {\n value: string;\n onValueChange: (value: string) => void;\n}): React.JSX.Element;",
|
|
1743
1843
|
"example": "<CellColorPicker value={color} onValueChange={setColor} />",
|
|
1744
|
-
"docs": "https://wunderui.com/components/cell-color-picker"
|
|
1844
|
+
"docs": "https://wunderui.com/components/cell-color-picker",
|
|
1845
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/table-cells.tsx",
|
|
1846
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/table-cells.tsx"
|
|
1745
1847
|
},
|
|
1746
1848
|
{
|
|
1747
1849
|
"slug": "cell-slider",
|
|
@@ -1755,7 +1857,9 @@
|
|
|
1755
1857
|
],
|
|
1756
1858
|
"props": "function CellSlider({ value, max }: {\n value: number;\n max?: number;\n}): React.JSX.Element;",
|
|
1757
1859
|
"example": "<CellSlider value={68} max={100} />",
|
|
1758
|
-
"docs": "https://wunderui.com/components/cell-slider"
|
|
1860
|
+
"docs": "https://wunderui.com/components/cell-slider",
|
|
1861
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/table-cells.tsx",
|
|
1862
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/table-cells.tsx"
|
|
1759
1863
|
},
|
|
1760
1864
|
{
|
|
1761
1865
|
"slug": "cell-select",
|
|
@@ -1769,7 +1873,9 @@
|
|
|
1769
1873
|
],
|
|
1770
1874
|
"props": "function CellSelect({ value, onValueChange, options, \"aria-label\": ariaLabel, }: {\n value: string;\n onValueChange: (value: string) => void;\n options: string[];\n /** Name for screen readers — a combobox is not named by its current value. */\n \"aria-label\"?: string;\n}): React.JSX.Element;",
|
|
1771
1875
|
"example": "<CellSelect value={value} onValueChange={setValue} options={[\"Active\", \"Paused\"]} />",
|
|
1772
|
-
"docs": "https://wunderui.com/components/cell-select"
|
|
1876
|
+
"docs": "https://wunderui.com/components/cell-select",
|
|
1877
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/table-cells.tsx",
|
|
1878
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/table-cells.tsx"
|
|
1773
1879
|
},
|
|
1774
1880
|
{
|
|
1775
1881
|
"slug": "cell-switch",
|
|
@@ -1783,7 +1889,9 @@
|
|
|
1783
1889
|
],
|
|
1784
1890
|
"props": "function CellSwitch({ checked, onCheckedChange, \"aria-label\": ariaLabel, }: {\n checked: boolean;\n onCheckedChange: (checked: boolean) => void;\n /** Name for screen readers — a cell has no visible label of its own. */\n \"aria-label\"?: string;\n}): React.JSX.Element;",
|
|
1785
1891
|
"example": "<CellSwitch aria-label=\"Example switch\" checked={checked} onCheckedChange={setChecked} />",
|
|
1786
|
-
"docs": "https://wunderui.com/components/cell-switch"
|
|
1892
|
+
"docs": "https://wunderui.com/components/cell-switch",
|
|
1893
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/table-cells.tsx",
|
|
1894
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/table-cells.tsx"
|
|
1787
1895
|
},
|
|
1788
1896
|
{
|
|
1789
1897
|
"slug": "selector-item",
|
|
@@ -1798,7 +1906,9 @@
|
|
|
1798
1906
|
],
|
|
1799
1907
|
"props": "function SelectorItem({ leading, title, description, control, className, }: {\n leading?: ReactNode;\n title: ReactNode;\n description?: ReactNode;\n control: ReactNode;\n className?: string;\n}): React.JSX.Element;",
|
|
1800
1908
|
"example": "<SelectorItem\n leading={<CreditCard />}\n title=\"Mastercard\"\n description=\"Ending in 4242 · expires 08/28\"\n control={<RadioGroupItem value=\"mastercard\" />}\n/>",
|
|
1801
|
-
"docs": "https://wunderui.com/components/selector-item"
|
|
1909
|
+
"docs": "https://wunderui.com/components/selector-item",
|
|
1910
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/selector-item.tsx",
|
|
1911
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/selector-item.tsx"
|
|
1802
1912
|
},
|
|
1803
1913
|
{
|
|
1804
1914
|
"slug": "label",
|
|
@@ -1812,7 +1922,9 @@
|
|
|
1812
1922
|
],
|
|
1813
1923
|
"props": "function Label({ className, ...props }: React.ComponentProps<\"label\">): React.JSX.Element;",
|
|
1814
1924
|
"example": "<Label htmlFor=\"email\">Email</Label>",
|
|
1815
|
-
"docs": "https://wunderui.com/components/label"
|
|
1925
|
+
"docs": "https://wunderui.com/components/label",
|
|
1926
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/label.tsx",
|
|
1927
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/label.tsx"
|
|
1816
1928
|
},
|
|
1817
1929
|
{
|
|
1818
1930
|
"slug": "field",
|
|
@@ -1832,7 +1944,9 @@
|
|
|
1832
1944
|
],
|
|
1833
1945
|
"props": "function Field({ className, ...props }: Field.Root.Props): React.JSX.Element;",
|
|
1834
1946
|
"example": "<Field>\n <FieldLabel>Email</FieldLabel>\n <FieldControl render={<Input type=\"email\" />} />\n <FieldDescription>We'll never share your email.</FieldDescription>\n</Field>",
|
|
1835
|
-
"docs": "https://wunderui.com/components/field"
|
|
1947
|
+
"docs": "https://wunderui.com/components/field",
|
|
1948
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/field.tsx",
|
|
1949
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/field.tsx"
|
|
1836
1950
|
},
|
|
1837
1951
|
{
|
|
1838
1952
|
"slug": "fieldset",
|
|
@@ -1847,7 +1961,9 @@
|
|
|
1847
1961
|
],
|
|
1848
1962
|
"props": "function Fieldset({ className, ...props }: Fieldset.Root.Props): React.JSX.Element;",
|
|
1849
1963
|
"example": "<Fieldset>\n <FieldsetLegend>Shipping address</FieldsetLegend>\n <Field>\n <FieldLabel>Street</FieldLabel>\n <FieldControl render={<Input />} />\n </Field>\n</Fieldset>",
|
|
1850
|
-
"docs": "https://wunderui.com/components/fieldset"
|
|
1964
|
+
"docs": "https://wunderui.com/components/fieldset",
|
|
1965
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/fieldset.tsx",
|
|
1966
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/fieldset.tsx"
|
|
1851
1967
|
},
|
|
1852
1968
|
{
|
|
1853
1969
|
"slug": "form",
|
|
@@ -1862,7 +1978,9 @@
|
|
|
1862
1978
|
],
|
|
1863
1979
|
"props": "function Form({ className, ...props }: Form.Props): React.JSX.Element;",
|
|
1864
1980
|
"example": "<Form onSubmit={handleSubmit}>\n <Field>\n <FieldLabel>Name</FieldLabel>\n <FieldControl render={<Input />} />\n </Field>\n <Button type=\"submit\">Submit</Button>\n</Form>",
|
|
1865
|
-
"docs": "https://wunderui.com/components/form"
|
|
1981
|
+
"docs": "https://wunderui.com/components/form",
|
|
1982
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/form.tsx",
|
|
1983
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/form.tsx"
|
|
1866
1984
|
},
|
|
1867
1985
|
{
|
|
1868
1986
|
"slug": "input-group",
|
|
@@ -1877,7 +1995,9 @@
|
|
|
1877
1995
|
],
|
|
1878
1996
|
"props": "function InputGroup({ className, ...props }: React.ComponentProps<\"div\">): React.JSX.Element;",
|
|
1879
1997
|
"example": "<InputGroup>\n <InputGroupAddon><Mail /></InputGroupAddon>\n <input placeholder=\"you@example.com\" />\n</InputGroup>",
|
|
1880
|
-
"docs": "https://wunderui.com/components/input-group"
|
|
1998
|
+
"docs": "https://wunderui.com/components/input-group",
|
|
1999
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/input-group.tsx",
|
|
2000
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/input-group.tsx"
|
|
1881
2001
|
},
|
|
1882
2002
|
{
|
|
1883
2003
|
"slug": "number-field",
|
|
@@ -1895,7 +2015,9 @@
|
|
|
1895
2015
|
],
|
|
1896
2016
|
"props": "function NumberField({ ...props }: NumberField.Root.Props): React.JSX.Element;",
|
|
1897
2017
|
"example": "<NumberField defaultValue={3} min={0} max={10}>\n <NumberFieldGroup>\n <NumberFieldDecrement />\n <NumberFieldInput />\n <NumberFieldIncrement />\n </NumberFieldGroup>\n</NumberField>",
|
|
1898
|
-
"docs": "https://wunderui.com/components/number-field"
|
|
2018
|
+
"docs": "https://wunderui.com/components/number-field",
|
|
2019
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/number-field.tsx",
|
|
2020
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/number-field.tsx"
|
|
1899
2021
|
},
|
|
1900
2022
|
{
|
|
1901
2023
|
"slug": "otp-field",
|
|
@@ -1910,7 +2032,9 @@
|
|
|
1910
2032
|
],
|
|
1911
2033
|
"props": "function OtpField({ className, ...props }: OTPField.Root.Props): React.JSX.Element;",
|
|
1912
2034
|
"example": "<OtpField length={4}>\n <OtpFieldInput />\n <OtpFieldInput />\n <OtpFieldInput />\n <OtpFieldInput />\n</OtpField>",
|
|
1913
|
-
"docs": "https://wunderui.com/components/otp-field"
|
|
2035
|
+
"docs": "https://wunderui.com/components/otp-field",
|
|
2036
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/otp-field.tsx",
|
|
2037
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/otp-field.tsx"
|
|
1914
2038
|
},
|
|
1915
2039
|
{
|
|
1916
2040
|
"slug": "combobox",
|
|
@@ -1934,7 +2058,9 @@
|
|
|
1934
2058
|
],
|
|
1935
2059
|
"props": "function Combobox(props: Combobox.Root.Props<any, any>): React.JSX.Element;",
|
|
1936
2060
|
"example": "<Combobox items={frameworks} value={value} onValueChange={setValue}>\n <ComboboxInputGroup>\n <ComboboxInput placeholder=\"Search...\" />\n <ComboboxTrigger />\n </ComboboxInputGroup>\n <ComboboxPopup>\n <ComboboxEmpty>No results.</ComboboxEmpty>\n <ComboboxList>\n {(item) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}\n </ComboboxList>\n </ComboboxPopup>\n</Combobox>",
|
|
1937
|
-
"docs": "https://wunderui.com/components/combobox"
|
|
2061
|
+
"docs": "https://wunderui.com/components/combobox",
|
|
2062
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/combobox.tsx",
|
|
2063
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/combobox.tsx"
|
|
1938
2064
|
},
|
|
1939
2065
|
{
|
|
1940
2066
|
"slug": "autocomplete",
|
|
@@ -1955,7 +2081,9 @@
|
|
|
1955
2081
|
],
|
|
1956
2082
|
"props": "function Autocomplete(props: Autocomplete.Root.Props<any>): React.JSX.Element;",
|
|
1957
2083
|
"example": "<Autocomplete items={fruits}>\n <AutocompleteInputGroup>\n <AutocompleteInput placeholder=\"Type a fruit...\" />\n </AutocompleteInputGroup>\n <AutocompletePopup>\n <AutocompleteEmpty>No matches.</AutocompleteEmpty>\n <AutocompleteList>\n {(item) => <AutocompleteItem key={item}>{item}</AutocompleteItem>}\n </AutocompleteList>\n </AutocompletePopup>\n</Autocomplete>",
|
|
1958
|
-
"docs": "https://wunderui.com/components/autocomplete"
|
|
2084
|
+
"docs": "https://wunderui.com/components/autocomplete",
|
|
2085
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/autocomplete.tsx",
|
|
2086
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/autocomplete.tsx"
|
|
1959
2087
|
},
|
|
1960
2088
|
{
|
|
1961
2089
|
"slug": "calendar",
|
|
@@ -1970,7 +2098,9 @@
|
|
|
1970
2098
|
],
|
|
1971
2099
|
"props": "function Calendar({ mode, selected, onSelect, month, defaultMonth, onMonthChange, className }: CalendarProps): React.JSX.Element;",
|
|
1972
2100
|
"example": "<Calendar mode=\"single\" selected={date} onSelect={setDate} />",
|
|
1973
|
-
"docs": "https://wunderui.com/components/calendar"
|
|
2101
|
+
"docs": "https://wunderui.com/components/calendar",
|
|
2102
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/calendar.tsx",
|
|
2103
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/calendar.tsx"
|
|
1974
2104
|
},
|
|
1975
2105
|
{
|
|
1976
2106
|
"slug": "date-picker",
|
|
@@ -1985,7 +2115,9 @@
|
|
|
1985
2115
|
],
|
|
1986
2116
|
"props": "function DatePicker(props: DatePickerProps): React.JSX.Element;",
|
|
1987
2117
|
"example": "<DatePicker value={date} onValueChange={setDate} placeholder=\"Pick a date\" />",
|
|
1988
|
-
"docs": "https://wunderui.com/components/date-picker"
|
|
2118
|
+
"docs": "https://wunderui.com/components/date-picker",
|
|
2119
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/date-picker.tsx",
|
|
2120
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/date-picker.tsx"
|
|
1989
2121
|
},
|
|
1990
2122
|
{
|
|
1991
2123
|
"slug": "chat-message",
|
|
@@ -2655,7 +2787,9 @@
|
|
|
2655
2787
|
],
|
|
2656
2788
|
"props": "function Alert({ variant, size, icon, onClose, className, children, ...props }: React.ComponentProps<\"div\"> & {\n variant?: AlertVariant;\n size?: AlertSize;\n /** Replaces the leading icon (default: a check circle, a warning triangle for negative and warning). `null` hides it. */\n icon?: React.ReactNode;\n onClose?: () => void;\n}): React.JSX.Element;\ntype AlertVariant = \"plain\" | \"positive\" | \"primary\" | \"negative\" | \"warning\";\ntype AlertSize = \"small\" | \"large\";",
|
|
2657
2789
|
"example": "<Alert variant=\"positive\">\n <AlertTitle>Positive</AlertTitle>\n <AlertDescription>Text for notifications here.</AlertDescription>\n</Alert>",
|
|
2658
|
-
"docs": "https://wunderui.com/components/alert"
|
|
2790
|
+
"docs": "https://wunderui.com/components/alert",
|
|
2791
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/alert.tsx",
|
|
2792
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/alert.tsx"
|
|
2659
2793
|
},
|
|
2660
2794
|
{
|
|
2661
2795
|
"slug": "toast",
|
|
@@ -2671,7 +2805,9 @@
|
|
|
2671
2805
|
],
|
|
2672
2806
|
"props": "function ToastProvider({ children, timeout, ...props }: Toast.Provider.Props): React.JSX.Element;",
|
|
2673
2807
|
"example": "import { Toaster, useToast } from \"@wunderui/react\"\n\n// wrap your app once\n<Toaster>{children}</Toaster>\n\n// then anywhere inside it\nconst { add } = useToast()\nadd({ type: \"success\", title: \"Successfully saved\", description: \"Your changes have been saved.\" })",
|
|
2674
|
-
"docs": "https://wunderui.com/components/toast"
|
|
2808
|
+
"docs": "https://wunderui.com/components/toast",
|
|
2809
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/toast.tsx",
|
|
2810
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/toast.tsx"
|
|
2675
2811
|
},
|
|
2676
2812
|
{
|
|
2677
2813
|
"slug": "pull-to-refresh",
|
|
@@ -2685,7 +2821,9 @@
|
|
|
2685
2821
|
],
|
|
2686
2822
|
"props": "function PullToRefresh({ onRefresh, threshold, maxPull, children, className, }: PullToRefreshProps): React.JSX.Element;",
|
|
2687
2823
|
"example": "<PullToRefresh onRefresh={async () => { await refetch() }}>\n <YourCardContent />\n</PullToRefresh>",
|
|
2688
|
-
"docs": "https://wunderui.com/components/pull-to-refresh"
|
|
2824
|
+
"docs": "https://wunderui.com/components/pull-to-refresh",
|
|
2825
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/pull-to-refresh.tsx",
|
|
2826
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/pull-to-refresh.tsx"
|
|
2689
2827
|
},
|
|
2690
2828
|
{
|
|
2691
2829
|
"slug": "rating",
|
|
@@ -2702,7 +2840,9 @@
|
|
|
2702
2840
|
],
|
|
2703
2841
|
"props": "function Rating({ value, onValueChange, max, type, label, readOnly, className, }: {\n value: number;\n onValueChange?: (value: number) => void;\n max?: number;\n type?: RatingType;\n label?: RatingLabel;\n readOnly?: boolean;\n className?: string;\n}): React.JSX.Element;\ntype RatingType = \"stars\" | \"hearts\" | \"emojis\" | \"scale\";\ntype RatingLabel = \"none\" | \"left\" | \"right\" | \"tooltip\";",
|
|
2704
2842
|
"example": "<Rating value={value} onValueChange={setValue} max={5} />",
|
|
2705
|
-
"docs": "https://wunderui.com/components/rating"
|
|
2843
|
+
"docs": "https://wunderui.com/components/rating",
|
|
2844
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/rating.tsx",
|
|
2845
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/rating.tsx"
|
|
2706
2846
|
},
|
|
2707
2847
|
{
|
|
2708
2848
|
"slug": "number-value",
|
|
@@ -2716,7 +2856,9 @@
|
|
|
2716
2856
|
],
|
|
2717
2857
|
"props": "function NumberValue({ value, delta, trend, trendGood, className, }: {\n value: string;\n delta?: string;\n trend?: \"up\" | \"down\";\n trendGood?: boolean;\n className?: string;\n}): React.JSX.Element;",
|
|
2718
2858
|
"example": "<NumberValue value=\"1,204\" delta=\"4.2%\" trend=\"up\" trendGood />",
|
|
2719
|
-
"docs": "https://wunderui.com/components/number-value"
|
|
2859
|
+
"docs": "https://wunderui.com/components/number-value",
|
|
2860
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/number-value.tsx",
|
|
2861
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/number-value.tsx"
|
|
2720
2862
|
},
|
|
2721
2863
|
{
|
|
2722
2864
|
"slug": "trend-chip",
|
|
@@ -2731,7 +2873,9 @@
|
|
|
2731
2873
|
],
|
|
2732
2874
|
"props": "function TrendChip({ value, direction, icon, className, }: {\n value: string;\n /** Figma Trend Chip · Trend; `flat` is the old name for `neutral`. */\n direction?: \"up\" | \"down\" | \"neutral\" | \"flat\";\n /** Figma Trend Chip · Icon; the same glyph turns for `down`. */\n icon?: TrendChipIcon;\n className?: string;\n}): React.JSX.Element;\ntype TrendChipIcon = \"trending\" | \"arrow\" | \"arrow-diagonal\" | \"triangle\" | \"circle-trending\" | \"circle-diagonal\" | \"circle-arrow\";",
|
|
2733
2875
|
"example": "<TrendChip value=\"12.4%\" direction=\"up\" />",
|
|
2734
|
-
"docs": "https://wunderui.com/components/trend-chip"
|
|
2876
|
+
"docs": "https://wunderui.com/components/trend-chip",
|
|
2877
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/trend-chip.tsx",
|
|
2878
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/trend-chip.tsx"
|
|
2735
2879
|
},
|
|
2736
2880
|
{
|
|
2737
2881
|
"slug": "pressable-feedback",
|
|
@@ -2745,7 +2889,9 @@
|
|
|
2745
2889
|
],
|
|
2746
2890
|
"props": "function PressableFeedback({ children, onPress, className, asChild, }: {\n children: React.ReactNode;\n onPress?: () => void;\n className?: string;\n /** Apply the press effect to the child element instead of wrapping it. */\n asChild?: boolean;\n}): React.JSX.Element;",
|
|
2747
2891
|
"example": "<PressableFeedback onPress={handlePress}>{children}</PressableFeedback>",
|
|
2748
|
-
"docs": "https://wunderui.com/components/pressable-feedback"
|
|
2892
|
+
"docs": "https://wunderui.com/components/pressable-feedback",
|
|
2893
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/pressable-feedback.tsx",
|
|
2894
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/pressable-feedback.tsx"
|
|
2749
2895
|
},
|
|
2750
2896
|
{
|
|
2751
2897
|
"slug": "emoji-reaction-button",
|
|
@@ -2759,7 +2905,9 @@
|
|
|
2759
2905
|
],
|
|
2760
2906
|
"props": "function EmojiReactionButton({ emoji, count, active, onToggle, className, }: {\n emoji: string;\n count: number;\n active?: boolean;\n onToggle?: () => void;\n className?: string;\n}): React.JSX.Element;",
|
|
2761
2907
|
"example": "<EmojiReactionButton emoji=\"🔥\" count={12} active={active} onToggle={toggle} />",
|
|
2762
|
-
"docs": "https://wunderui.com/components/emoji-reaction-button"
|
|
2908
|
+
"docs": "https://wunderui.com/components/emoji-reaction-button",
|
|
2909
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/emoji-reaction-button.tsx",
|
|
2910
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/emoji-reaction-button.tsx"
|
|
2763
2911
|
},
|
|
2764
2912
|
{
|
|
2765
2913
|
"slug": "emoji-picker",
|
|
@@ -2773,7 +2921,9 @@
|
|
|
2773
2921
|
],
|
|
2774
2922
|
"props": "function EmojiPicker({ emojis, onSelect, className, }: {\n emojis?: string[];\n onSelect?: (emoji: string) => void;\n className?: string;\n}): React.JSX.Element;",
|
|
2775
2923
|
"example": "<EmojiPicker onSelect={(emoji) => insert(emoji)} />",
|
|
2776
|
-
"docs": "https://wunderui.com/components/emoji-picker"
|
|
2924
|
+
"docs": "https://wunderui.com/components/emoji-picker",
|
|
2925
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/wunderui/emoji-picker.tsx",
|
|
2926
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/wunderui/emoji-picker.tsx"
|
|
2777
2927
|
},
|
|
2778
2928
|
{
|
|
2779
2929
|
"slug": "sheet",
|
|
@@ -2793,7 +2943,9 @@
|
|
|
2793
2943
|
],
|
|
2794
2944
|
"props": "function Sheet({ ...props }: Dialog.Root.Props): React.JSX.Element;",
|
|
2795
2945
|
"example": "<Sheet open={open} onOpenChange={setOpen}>\n <SheetTrigger render={<Button />}>Open</SheetTrigger>\n <SheetContent side=\"right\">...</SheetContent>\n</Sheet>",
|
|
2796
|
-
"docs": "https://wunderui.com/components/sheet"
|
|
2946
|
+
"docs": "https://wunderui.com/components/sheet",
|
|
2947
|
+
"source": "https://github.com/wunder-ui/wunderui/blob/main/components/ui/sheet.tsx",
|
|
2948
|
+
"sourceRaw": "https://raw.githubusercontent.com/wunder-ui/wunderui/main/components/ui/sheet.tsx"
|
|
2797
2949
|
},
|
|
2798
2950
|
{
|
|
2799
2951
|
"slug": "resizable",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "wunderui-mcp",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "MCP server that gives AI coding agents the WunderUI design system: tokens, component props, templates and starters. Works with Claude Code, Cursor, Windsurf, Cline and Codex.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"mcp",
|
package/src/index.mjs
CHANGED
|
@@ -188,7 +188,7 @@ server.registerTool(
|
|
|
188
188
|
inputSchema: {
|
|
189
189
|
category: z.string().optional().describe(`One of: ${design.categories.join(", ")}`),
|
|
190
190
|
query: z.string().optional().describe("Free text, matched against name, description and category"),
|
|
191
|
-
plan: z.enum(["free", "pro"]).optional().describe("Only components of this plan. Free =
|
|
191
|
+
plan: z.enum(["free", "pro"]).optional().describe("Only components of this plan. Free = open source under MIT (github.com/wunder-ui/wunderui); pro needs WunderUI Core or Pro."),
|
|
192
192
|
},
|
|
193
193
|
},
|
|
194
194
|
async ({ category, query, plan }) => {
|
|
@@ -241,7 +241,9 @@ server.registerTool(
|
|
|
241
241
|
title: component.title,
|
|
242
242
|
category: component.category,
|
|
243
243
|
plan: component.tier ?? "pro",
|
|
244
|
-
planNote: (component.tier ?? "pro") === "free" ? "Free
|
|
244
|
+
planNote: (component.tier ?? "pro") === "free" ? "Free: MIT source, any project — fetch it from sourceRaw." : "Needs WunderUI Core or Pro.",
|
|
245
|
+
source: component.source ?? undefined,
|
|
246
|
+
sourceRaw: component.sourceRaw ?? undefined,
|
|
245
247
|
description: component.description,
|
|
246
248
|
import: `import { ${component.exports.slice(0, 4).join(", ")} } from "${design.name}"`,
|
|
247
249
|
exports: component.exports,
|