{children}
svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3",
className,
)}
{...props}
/>
);
}
function AlertDescription({
className,
...props
}: React.ComponentProps<"div">) {
return (
);
}
function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
return (
);
}
export { Alert, AlertTitle, AlertDescription, AlertAction };
```
### alert.variants.ts
```ts
import { cva } from "class-variance-authority";
import { cn } from "cn"
const alertBase = cn(
"group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
);
const alertConfig = {
variants: {
variant: {
default: "bg-card text-card-foreground",
destructive:
"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
},
},
compoundVariants: [],
defaultVariants: {
variant: "default",
},
} as const;
export const alertCva = cva(alertBase, {
...alertConfig,
compoundVariants: [...alertConfig.compoundVariants],
});
// Export the variant variants
export const ALERT_VARIANTS = Object.keys(
alertConfig.variants.variant,
) as (keyof typeof alertConfig.variants.variant)[];
export const alertVariants = alertCva;
```
## Usage
Use alerts for status messages, warnings, and important callouts.
```tsx
import {
Alert,
AlertAction,
AlertDescription,
AlertTitle,
} from "@/components/alert/alert";
export function Example() {
return (
Heads up!
You can add components and dependencies to your app using the CLI.
);
}
```
Pass `variant="destructive"` for error-style callouts. Compose an icon as a child of `Alert` for
leading indicators, and use `AlertAction` for a corner action.
---
URL: https://reactdocs.canceydejean.dev/components/alert-dialog.md
A modal dialog that interrupts the user with important content and expects a response.
# Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
## Installation
```bash
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/alert-dialog.json
```
[Registry JSON](https://reactdocs.canceydejean.dev/r/alert-dialog.json)
## Preview
```tsx
import { Button } from "@/components/ui/button";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog/alert-dialog";
export function Preview() {
return (
Are you absolutely sure?
This action cannot be undone. This will permanently delete your account and remove your
data from our servers.
Cancel
Continue
);
}
```
## Source
### alert-dialog.tsx
```tsx
"use client";
import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { cn } from "cn";
function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
return
);
}
function AlertDialogHeader({
className,
...props
}: React.ComponentProps<"div">) {
return (
);
}
function AlertDialogFooter({
className,
...props
}: React.ComponentProps<"div">) {
return (
);
}
function AlertDialogMedia({
className,
...props
}: React.ComponentProps<"div">) {
return (
);
}
function AlertDialogTitle({
className,
...props
}: React.ComponentProps) {
return (
) {
return (
) {
return (
);
}
function AlertDialogCancel({
className,
variant = "outline",
size = "default",
...props
}: AlertDialogPrimitive.Close.Props &
Pick, "variant" | "size">) {
return (
Are you absolutely sure?
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
Cancel
Continue
);
}
```
Pass `size="sm"` on `AlertDialogContent` for a compact layout. Add `AlertDialogMedia` for a leading
icon in the header.
---
URL: https://reactdocs.canceydejean.dev/components/aspect-ratio.md
Displays content within a desired aspect ratio.
# Aspect Ratio
Displays content within a desired aspect ratio.
## Installation
```bash
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/aspect-ratio.json
```
[Registry JSON](https://reactdocs.canceydejean.dev/r/aspect-ratio.json)
## Preview
```tsx
import { AspectRatio } from "@/components/ui/aspect-ratio/aspect-ratio";
export function Preview() {
return (
);
}
```
## Source
### aspect-ratio.tsx
```tsx
import type * as React from "react";
import { cn } from "cn";
function AspectRatio({
ratio,
className,
style,
...props
}: React.ComponentProps<"div"> & { ratio: number }) {
const aspectStyle: React.CSSProperties & { "--ratio": number } = {
...style,
"--ratio": ratio,
};
return (
);
}
export { AspectRatio };
```
## Usage
Use aspect ratio to constrain media and placeholders so layout does not shift as content loads.
```tsx
import { AspectRatio } from "@/components/aspect-ratio/aspect-ratio";
export function Example() {
return (
);
}
```
Pass `ratio` as a number (for example `16 / 9`, `1`, or `4 / 3`).
---
URL: https://reactdocs.canceydejean.dev/components/attachment.md
Displays a file or image attachment with media, metadata, upload state, and actions.
# Attachment
Displays a file or image attachment with media, metadata, upload state, and actions.
## Installation
```bash
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/attachment.json
```
[Registry JSON](https://reactdocs.canceydejean.dev/r/attachment.json)
## Preview
```tsx
import { IconFileText, IconX } from "@tabler/icons-react";
import {
Attachment,
AttachmentAction,
AttachmentActions,
AttachmentContent,
AttachmentDescription,
AttachmentMedia,
AttachmentTitle,
} from "@/components/ui/attachment/attachment";
export function Preview() {
return (
sales-dashboard.pdf
PDF · 2.4 MB
);
}
```
## Source
### attachment.tsx
```tsx
import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import { type VariantProps } from "class-variance-authority";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { cn } from "cn";
import {
attachmentMediaVariants,
attachmentVariants,
} from "./attachment.variants";
function Attachment({
className,
state = "done",
size = "default",
orientation = "horizontal",
...props
}: React.ComponentProps<"div"> &
VariantProps & {
state?: "idle" | "uploading" | "processing" | "error" | "done";
}) {
return (
);
}
function AttachmentMedia({
className,
variant = "icon",
...props
}: React.ComponentProps<"div"> & VariantProps) {
return (
);
}
function AttachmentContent({
className,
...props
}: React.ComponentProps<"div">) {
return (
);
}
function AttachmentTitle({
className,
...props
}: React.ComponentProps<"span">) {
return (
);
}
function AttachmentDescription({
className,
...props
}: React.ComponentProps<"span">) {
return (
);
}
function AttachmentActions({
className,
...props
}: React.ComponentProps<"div">) {
return (
);
}
function AttachmentAction({
className,
variant,
size = "icon-xs",
...props
}: React.ComponentProps) {
return (
);
}
function AttachmentTrigger({
className,
render,
type,
...props
}: useRender.ComponentProps<"button">) {
return useRender({
defaultTagName: "button",
props: mergeProps<"button">(
{
type: render ? type : (type ?? "button"),
className: cn("absolute inset-0 z-10 outline-none", className),
},
props,
),
render,
state: {
slot: "attachment-trigger",
},
});
}
function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
);
}
export {
Attachment,
AttachmentGroup,
AttachmentMedia,
AttachmentContent,
AttachmentTitle,
AttachmentDescription,
AttachmentActions,
AttachmentAction,
AttachmentTrigger,
};
```
### attachment.variants.ts
```ts
import { cva } from "class-variance-authority";
import { cn } from "cn"
const attachmentBase = cn(
"group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
);
const attachmentConfig = {
variants: {
size: {
default:
"gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1",
},
orientation: {
horizontal: "min-w-40 items-center",
vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30",
},
},
compoundVariants: [],
defaultVariants: {},
} as const;
export const attachmentCva = cva(attachmentBase, {
...attachmentConfig,
compoundVariants: [...attachmentConfig.compoundVariants],
});
// Export the size variants
export const ATTACHMENT_SIZES = Object.keys(
attachmentConfig.variants.size,
) as (keyof typeof attachmentConfig.variants.size)[];
// Export the orientation variants
export const ATTACHMENT_ORIENTATIONS = Object.keys(
attachmentConfig.variants.orientation,
) as (keyof typeof attachmentConfig.variants.orientation)[];
export const attachmentVariants = attachmentCva;
const attachmentMediaBase = cn(
"relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
);
const attachmentMediaConfig = {
variants: {
variant: {
icon: "",
image:
"opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover",
},
},
compoundVariants: [],
defaultVariants: {
variant: "icon",
},
} as const;
export const attachmentMediaCva = cva(attachmentMediaBase, {
...attachmentMediaConfig,
compoundVariants: [...attachmentMediaConfig.compoundVariants],
});
// Export the media variant variants
export const ATTACHMENT_MEDIA_VARIANTS = Object.keys(
attachmentMediaConfig.variants.variant,
) as (keyof typeof attachmentMediaConfig.variants.variant)[];
export const attachmentMediaVariants = attachmentMediaCva;
```
## Usage
Use attachments for files and images in chat composers, message threads, and upload lists.
```tsx
import {
Attachment,
AttachmentAction,
AttachmentActions,
AttachmentContent,
AttachmentDescription,
AttachmentMedia,
AttachmentTitle,
} from "@/components/attachment/attachment";
export function Example() {
return (
sales-dashboard.pdf
PDF · 2.4 MB
);
}
```
Supports `state` (`idle`, `uploading`, `processing`, `error`, `done`), `size` (`default`,
`sm`, `xs`), and `orientation` (`horizontal`, `vertical`). Wrap multiple items in
`AttachmentGroup` for a scrollable row. Requires `shimmer` and `scroll-fade` utilities from
`shadcn/tailwind.css` (or this registry's shimmer / scroll-fade items) for progress and group
edge fade.
---
URL: https://reactdocs.canceydejean.dev/components/avatar.md
An image element with a fallback for representing the user.
# Avatar
An image element with a fallback for representing the user.
## Installation
```bash
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/avatar.json
```
[Registry JSON](https://reactdocs.canceydejean.dev/r/avatar.json)
## Preview
```tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar/avatar";
export function Preview() {
return (
CN
);
}
```
## Source
### avatar.tsx
```tsx
"use client";
import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
import * as React from "react";
import { cn } from "cn";
function Avatar({
className,
size = "default",
...props
}: AvatarPrimitive.Root.Props & {
size?: "default" | "sm" | "lg";
}) {
return (
svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
className,
)}
{...props}
/>
);
}
export {
Avatar,
AvatarImage,
AvatarFallback,
AvatarGroup,
AvatarGroupCount,
AvatarBadge,
};
```
## Usage
Use avatars for user photos, initials, status badges, and stacked groups.
```tsx
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/avatar/avatar";
export function Example() {
return (
CN
);
}
```
Pass `size` (`sm`, `default`, `lg`) on the root. Compose `AvatarBadge` for status
indicators, and `AvatarGroup` / `AvatarGroupCount` for overlapping stacks.
---
URL: https://reactdocs.canceydejean.dev/components/badge.md
Displays a badge or a component that looks like a badge.
# Badge
Displays a badge or a component that looks like a badge.
## Installation
```bash
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/badge.json
```
[Registry JSON](https://reactdocs.canceydejean.dev/r/badge.json)
## Preview
```tsx
import { Badge } from "@/components/ui/badge/badge";
export function Preview() {
return Badge ;
}
```
## Source
### badge.tsx
```tsx
import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import { type VariantProps } from "class-variance-authority";
import { cn } from "cn"
import { badgeVariants } from "./badge.variants";
function Badge({
className,
variant = "default",
render,
...props
}: useRender.ComponentProps<"span"> & VariantProps) {
return useRender({
defaultTagName: "span",
props: mergeProps<"span">(
{
className: cn(badgeVariants({ variant }), className),
},
props,
),
render,
state: {
slot: "badge",
variant,
},
});
}
export { Badge, badgeVariants };
```
### badge.variants.ts
```ts
import { cva } from "class-variance-authority";
import { cn } from "cn"
const badgeBase = cn(
"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
);
const badgeConfig = {
variants: {
variant: {
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
destructive:
"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
link: "text-primary underline-offset-4 hover:underline",
},
},
compoundVariants: [],
defaultVariants: {
variant: "default",
},
} as const;
export const badgeCva = cva(badgeBase, {
...badgeConfig,
compoundVariants: [...badgeConfig.compoundVariants],
});
// Export the variant variants
export const BADGE_VARIANTS = Object.keys(
badgeConfig.variants.variant,
) as (keyof typeof badgeConfig.variants.variant)[];
export const badgeVariants = badgeCva;
```
## Usage
Use badges for status, counts, labels, and compact metadata.
```tsx
import { Badge } from "@/components/badge/badge";
export function Example() {
return Badge ;
}
```
Variants: `default`, `secondary`, `destructive`, `outline`, `ghost`, and `link`. Render as a link
with `render={}`.
---
URL: https://reactdocs.canceydejean.dev/components/breadcrumb.md
Displays the path to the current resource using a hierarchy of links.
# Breadcrumb
Displays the path to the current resource using a hierarchy of links.
## Installation
```bash
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/breadcrumb.json
```
[Registry JSON](https://reactdocs.canceydejean.dev/r/breadcrumb.json)
## Preview
```tsx
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb/breadcrumb";
export function Preview() {
return (
Home
Components
Breadcrumb
);
}
```
## Source
### breadcrumb.tsx
```tsx
import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import { IconChevronRight, IconDots } from "@tabler/icons-react";
import * as React from "react";
import { cn } from "cn";
function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
return (
);
}
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
return (
Home
Components
Breadcrumb
);
}
```
Compose `BreadcrumbEllipsis` for collapsed middle segments. Pass a custom child to
`BreadcrumbSeparator` for an alternate divider, or use `render` on `BreadcrumbLink` for router
links.
---
URL: https://reactdocs.canceydejean.dev/components/bubble.md
Colored message surfaces for chat and conversation UIs, with optional reactions.
# Bubble
Colored message surfaces for chat and conversation UIs, with optional reactions.
## Installation
```bash
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/bubble.json
```
[Registry JSON](https://reactdocs.canceydejean.dev/r/bubble.json)
## Preview
```tsx
import { Bubble, BubbleContent, BubbleGroup } from "@/components/ui/bubble/bubble";
export function Preview() {
return (
How can I help you today?
Summarize the design review notes.
);
}
```
## Source
### bubble.tsx
```tsx
import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import { type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "cn";
import { bubbleReactionsVariants, bubbleVariants } from "./bubble.variants";
function BubbleGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
);
}
function Bubble({
variant = "default",
align = "start",
className,
...props
}: React.ComponentProps<"div"> &
VariantProps & {
align?: "start" | "end";
}) {
return (
);
}
function BubbleContent({
className,
render,
...props
}: useRender.ComponentProps<"div">) {
return useRender({
defaultTagName: "div",
props: mergeProps<"div">(
{
className: cn(
"w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50",
className,
),
},
props,
),
render,
state: {
slot: "bubble-content",
},
});
}
function BubbleReactions({
side = "bottom",
align = "end",
className,
...props
}: React.ComponentProps<"div"> & {
align?: "start" | "end";
side?: "top" | "bottom";
}) {
return (
);
}
export { BubbleGroup, Bubble, BubbleContent, BubbleReactions };
```
### bubble.variants.ts
```ts
import { cva } from "class-variance-authority";
import { cn } from "cn"
const bubbleBase = cn(
"group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
);
const bubbleConfig = {
variants: {
variant: {
default:
"*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
secondary:
"*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
muted:
"*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
tinted:
"*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
outline:
"*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
ghost:
"border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
destructive:
"*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30",
},
},
compoundVariants: [],
defaultVariants: {
variant: "default",
},
} as const;
export const bubbleCva = cva(bubbleBase, {
...bubbleConfig,
compoundVariants: [...bubbleConfig.compoundVariants],
});
// Export the variant variants
export const BUBBLE_VARIANTS = Object.keys(
bubbleConfig.variants.variant,
) as (keyof typeof bubbleConfig.variants.variant)[];
export const bubbleVariants = bubbleCva;
const bubbleReactionsBase = cn(
"absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
);
const bubbleReactionsConfig = {
variants: {
side: {
top: "top-0 -translate-y-3/4",
bottom: "bottom-0 translate-y-3/4",
},
align: {
start: "left-3",
end: "right-3",
},
},
compoundVariants: [],
defaultVariants: {
side: "bottom",
align: "end",
},
} as const;
export const bubbleReactionsCva = cva(bubbleReactionsBase, {
...bubbleReactionsConfig,
compoundVariants: [...bubbleReactionsConfig.compoundVariants],
});
// Export the side variants
export const BUBBLE_REACTION_SIDES = Object.keys(
bubbleReactionsConfig.variants.side,
) as (keyof typeof bubbleReactionsConfig.variants.side)[];
// Export the align variants
export const BUBBLE_REACTION_ALIGNS = Object.keys(
bubbleReactionsConfig.variants.align,
) as (keyof typeof bubbleReactionsConfig.variants.align)[];
export const bubbleReactionsVariants = bubbleReactionsCva;
```
## Usage
Use bubble for message text surfaces in chat threads. Pair with `Message` for full rows when you
install the message component.
```tsx
import {
Bubble,
BubbleContent,
BubbleGroup,
BubbleReactions,
} from "@/components/bubble/bubble";
export function Example() {
return (
How can I help you today?
Summarize the design review notes.
👍 2
);
}
```
Variants: `default`, `secondary`, `muted`, `tinted`, `outline`, `ghost`, `destructive`. Align with
`align` (`start` | `end`). Position reactions via `BubbleReactions` `side` and `align`.
---
URL: https://reactdocs.canceydejean.dev/components/button.md
A polymorphic button with variants, sizes, icons, and a CTA group helper.
# Button
A polymorphic button with variants, sizes, icons, and a CTA group helper.
## Installation
```bash
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/button.json
```
[Registry JSON](https://reactdocs.canceydejean.dev/r/button.json)
## Preview
```tsx
import { Button, ButtonCTAGroup } from "@/components/ui/button/button";
import { BUTTON_VARIANTS } from "@/components/ui/button/button.variants";
export function Preview() {
return (
{BUTTON_VARIANTS.map((variant) => (
))}
);
}
```
## Source
### button.tsx
```tsx
import { cn } from "cn";
import type { ButtonProps } from "./button.types";
import { buttonVariants } from "./button.variants";
function ButtonCTAGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
);
}
function Button({
as,
variant = "primary",
size = "md",
fullWidth,
icon,
className,
...props
}: ButtonProps) {
const Component = (as || "button") as React.ComponentType<
Record
>;
return (
;
export type ButtonProps = {
/** The component to render the button as */
as?: T;
/** The variant of the button */
variant?: ButtonVariantProps["variant"];
/** Whether the button has an icon */
icon?: boolean;
/** The size of the button */
size?: ButtonVariantProps["size"];
/** Whether the button is full width */
fullWidth?: boolean;
} & React.ComponentPropsWithoutRef; // Great for polymorphic "as"
```
### button.variants.ts
```ts
import { cva } from "class-variance-authority";
import { cn } from "cn";
const buttonBase = cn(
"group relative inline-flex shrink-0 items-center justify-center gap-2 rounded-md border border-transparent leading-none font-medium whitespace-nowrap",
"transition-smooth active:not-disabled:scale-95",
"hover:no-underline",
"disabled:pointer-events-none disabled:opacity-50",
"focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:outline-none",
"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
);
const buttonConfig = {
variants: {
variant: {
primary: "bg-primary text-primary-foreground hover:bg-primary/80",
outline:
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
secondary:
"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
ghost:
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
destructive:
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
},
icon: {
true: "p-0 rounded-full",
},
size: {
sm: "h-8 px-3 text-12",
md: "h-9 px-4 text-14",
lg: "h-10 px-6 text-16",
"icon-sm": "size-8 [&_svg]:size-3.5",
"icon-md": "size-9 [&_svg]:size-4",
"icon-lg": "size-10 [&_svg]:size-4.5",
},
fullWidth: {
true: "w-full",
},
},
compoundVariants: [
{
variant: "primary",
className: "text-white",
},
{
variant: "destructive",
className: "text-destructive",
},
],
defaultVariants: {
variant: "primary",
size: "md",
},
} as const;
export const buttonCva = cva(buttonBase, {
...buttonConfig,
compoundVariants: [...buttonConfig.compoundVariants],
});
// Export the variant variants
export const BUTTON_VARIANTS = Object.keys(
buttonConfig.variants.variant,
) as (keyof typeof buttonConfig.variants.variant)[];
// Export the size variants
export const BUTTON_SIZES = Object.keys(
buttonConfig.variants.size,
) as (keyof typeof buttonConfig.variants.size)[];
export const buttonVariants = buttonCva;
```
## Usage
Use the button for primary actions, secondary actions, links, and icon-only controls. Pair related
actions with `ButtonCTAGroup`.
```tsx
import { Button, ButtonCTAGroup } from "@/components/button/button";
export function Example() {
return (
);
}
```
---
URL: https://reactdocs.canceydejean.dev/components/button-group.md
A container that groups related buttons with shared borders and orientation.
# Button Group
A container that groups related buttons with shared borders and orientation.
## Installation
```bash
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/button-group.json
```
[Registry JSON](https://reactdocs.canceydejean.dev/r/button-group.json)
## Preview
```tsx
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group/button-group";
export function Preview() {
return (
);
}
```
## Source
### button-group.tsx
```tsx
import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import { type VariantProps } from "class-variance-authority";
import type * as React from "react";
import { Separator } from "@/components/ui/separator";
import { cn } from "cn";
import { buttonGroupVariants } from "./button-group.variants";
function ButtonGroup({
className,
orientation,
...props
}: React.ComponentProps<"div"> & VariantProps) {
return (
);
}
function ButtonGroupText({
className,
render,
...props
}: useRender.ComponentProps<"div">) {
return useRender({
defaultTagName: "div",
props: mergeProps<"div">(
{
className: cn(
"flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
className,
),
},
props,
),
render,
state: {
slot: "button-group-text",
},
});
}
function ButtonGroupSeparator({
className,
orientation = "vertical",
...props
}: React.ComponentProps) {
return (
);
}
```
Set `orientation="vertical"` for a stacked group. Use `ButtonGroupText` for a label segment and
`ButtonGroupSeparator` between sections.
---
URL: https://reactdocs.canceydejean.dev/components/calendar.md
A date field component that allows users to enter and edit dates.
# Calendar
A date field component that allows users to enter and edit dates.
## Installation
```bash
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/calendar.json
```
[Registry JSON](https://reactdocs.canceydejean.dev/r/calendar.json)
## Preview
```tsx
import * as React from "react";
import { Calendar } from "@/components/ui/calendar/calendar";
export function Preview() {
const [date, setDate] = React.useState(new Date());
return (
& {
buttonVariant?: React.ComponentProps["variant"];
}) {
const defaultClassNames = getDefaultClassNames();
return (
svg]:rotate-180`,
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
className,
)}
captionLayout={captionLayout}
locale={locale}
formatters={{
formatMonthDropdown: (date) =>
date.toLocaleString(locale?.code, { month: "short" }),
...formatters,
}}
classNames={{
root: cn("w-fit", defaultClassNames.root),
months: cn(
"relative flex flex-col gap-4 md:flex-row",
defaultClassNames.months,
),
month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
nav: cn(
"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
defaultClassNames.nav,
),
button_previous: cn(
buttonVariants({ variant: buttonVariant }),
"size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
defaultClassNames.button_previous,
),
button_next: cn(
buttonVariants({ variant: buttonVariant }),
"size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
defaultClassNames.button_next,
),
month_caption: cn(
"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
defaultClassNames.month_caption,
),
dropdowns: cn(
"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
defaultClassNames.dropdowns,
),
dropdown_root: cn(
"relative rounded-(--cell-radius)",
defaultClassNames.dropdown_root,
),
dropdown: cn(
"absolute inset-0 bg-popover opacity-0",
defaultClassNames.dropdown,
),
caption_label: cn(
"font-medium select-none",
captionLayout === "label"
? "text-sm"
: "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
defaultClassNames.caption_label,
),
month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
weekdays: cn("flex", defaultClassNames.weekdays),
weekday: cn(
"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
defaultClassNames.weekday,
),
week: cn("mt-2 flex w-full", defaultClassNames.week),
week_number_header: cn(
"w-(--cell-size) select-none",
defaultClassNames.week_number_header,
),
week_number: cn(
"text-[0.8rem] text-muted-foreground select-none",
defaultClassNames.week_number,
),
day: cn(
"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
props.showWeekNumber
? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
: "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
defaultClassNames.day,
),
range_start: cn(
"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
defaultClassNames.range_start,
),
range_middle: cn("rounded-none", defaultClassNames.range_middle),
range_end: cn(
"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
defaultClassNames.range_end,
),
today: cn(
"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
defaultClassNames.today,
),
outside: cn(
"text-muted-foreground aria-selected:text-muted-foreground",
defaultClassNames.outside,
),
disabled: cn(
"text-muted-foreground opacity-50",
defaultClassNames.disabled,
),
hidden: cn("invisible", defaultClassNames.hidden),
...classNames,
}}
components={{
Root: ({ className: rootClassName, rootRef, ...rootProps }) => {
return (
);
},
Chevron: ({
className: chevronClassName,
orientation,
...chevronProps
}) => {
if (orientation === "left") {
return (
);
},
...components,
}}
{...props}
/>
);
}
function CalendarDayButton({
className,
day,
modifiers,
locale,
...props
}: React.ComponentProps & { locale?: Partial }) {
const defaultClassNames = getDefaultClassNames();
const ref = React.useRef(null);
React.useEffect(() => {
if (modifiers.focused) ref.current?.focus();
}, [modifiers.focused]);
return (
{children}