import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
orange:
"border border-input hover:bg-accent hover:text-accent-foreground",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
)
}
)
Button.displayName = "Button"
export { Button, buttonVariants }
Button Group Basic
By Prism UI
Try the interaction, copy the React source files, or download the complete example.
About Button Group Basic
Button Group Basic is an animated React and Tailwind CSS button by Prism UI. Try the interaction, copy the React source, or download the example with creator credit.
- Effects and categories
- Hover effects, Animated
- Using this example
- Copy a TSX file or download the original source and standalone demo. Test keyboard focus, motion and contrast in your own project.
Usage, Tailwind and licensing questions
Read the source files
registry/example/button-group-basic.tsx
"use client";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/prismui/button-group";
import { ArrowLeft, ArrowRight } from "lucide-react";
export default function ButtonGroupBasic() {
return (
<div className="flex min-h-[200px] w-full items-center justify-center">
<ButtonGroup>
<Button variant="outline">
<ArrowLeft className="mr-2 h-4 w-4" />
Previous
</Button>
<Button variant="outline">
Next
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
</ButtonGroup>
</div>
);
}
export const demoSource = `"use client";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/prismui/button-group";
import { ArrowLeft, ArrowRight } from "lucide-react";
export default function ButtonGroupBasic() {
return (
<div className="flex min-h-[200px] w-full items-center justify-center">
<ButtonGroup>
<Button variant="outline">
<ArrowLeft className="mr-2 h-4 w-4" />
Previous
</Button>
<Button variant="outline">
Next
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
</ButtonGroup>
</div>
);
}`;
components/ui/button.tsx
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
orange:
"border border-input hover:bg-accent hover:text-accent-foreground",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
)
}
)
Button.displayName = "Button"
export { Button, buttonVariants }
components/prismui/button-group.tsx
import { cn } from "@/lib/utils";
import { cva, VariantProps } from "class-variance-authority";
import React from "react";
const buttonGroupVariants = cva(
"flex sm:items-center max-sm:gap-1 max-sm:flex-col [&>*:focus-within]:ring-1 [&>*:focus-within]:z-10 [&>*]:ring-offset-0 sm:[&>*:not(:first-child)]:rounded-l-none sm:[&>*:not(:last-child)]:rounded-r-none",
{
variants: {
size: {
default: "[&>*]:h-10 [&>*]:px-4 [&>*]:py-2",
sm: "[&>*]:h-9 [&>*]:rounded-md [&>*]:px-3",
lg: "[&>*]:h-11 [&>*]:rounded-md [&>*]:px-8",
icon: "[&>*]:h-10 [&>*]:w-10",
},
separated: {
true: "[&>*]:outline [&>*]:outline-1 [&>*]:outline-zinc-500 gap-0.5 [&>*:focus-within]:ring-offset-2",
false: "[&>*:focus-within]:ring-offset-1",
},
},
defaultVariants: {
separated: false,
size: "default",
},
}
);
export interface ButtonGroupProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof buttonGroupVariants> {
separated?: boolean;
}
const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
({ children, className, size, separated = false, ...props }, ref) => {
return (
<div
className={cn(buttonGroupVariants({ size, className, separated }))}
ref={ref}
{...props}
>
{children}
</div>
);
}
);
ButtonGroup.displayName = "ButtonGroup";
export { ButtonGroup };
lib/utils.ts
import { siteConfig } from "@/lib/config";
import { type ClassValue, clsx } from "clsx";
import { Metadata } from "next";
import { twMerge } from "tailwind-merge";
import { customAlphabet } from "nanoid";
import ms from "ms";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
export function absoluteUrl(path: string) {
return `${process.env.NEXT_PUBLIC_APP_URL || siteConfig.url}${path}`;
}
export function constructMetadata({
title = siteConfig.name,
description = siteConfig.description,
image = absoluteUrl("/og"),
canonical,
noIndex = false,
...props
}: {
title?: string;
description?: string;
image?: string;
canonical?: string;
noIndex?: boolean;
[key: string]: Metadata[keyof Metadata];
}): Metadata {
return {
title: {
template: "%s | " + siteConfig.name,
default: siteConfig.name,
},
description: description || siteConfig.description,
keywords: siteConfig.keywords,
openGraph: {
title,
description,
url: canonical,
siteName: siteConfig.name,
images: [
{
url: image,
width: 1200,
height: 630,
alt: title,
},
],
type: "website",
locale: "en_US",
},
twitter: {
card: "summary_large_image",
title,
description,
images: [image],
creator: "@codehagen",
site: "@prismui",
},
robots: {
index: !noIndex,
follow: !noIndex,
googleBot: {
index: !noIndex,
follow: !noIndex,
"max-video-preview": -1,
"max-image-preview": "large",
"max-snippet": -1,
},
},
icons: "/favicon.ico",
metadataBase: new URL(siteConfig.url),
alternates: {
canonical: canonical,
},
authors: [
{
name: siteConfig.name,
url: siteConfig.url,
},
],
...props,
};
}
export function formatDate(date: string) {
let currentDate = new Date().getTime();
if (!date.includes("T")) {
date = `${date}T00:00:00`;
}
let targetDate = new Date(date).getTime();
let timeDifference = Math.abs(currentDate - targetDate);
let daysAgo = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
let fullDate = new Date(date).toLocaleString("en-us", {
month: "long",
day: "numeric",
year: "numeric",
});
if (daysAgo < 1) {
return "Today";
} else if (daysAgo < 7) {
return `${fullDate} (${daysAgo}d ago)`;
} else if (daysAgo < 30) {
const weeksAgo = Math.floor(daysAgo / 7);
return `${fullDate} (${weeksAgo}w ago)`;
} else if (daysAgo < 365) {
const monthsAgo = Math.floor(daysAgo / 30);
return `${fullDate} (${monthsAgo}mo ago)`;
} else {
const yearsAgo = Math.floor(daysAgo / 365);
return `${fullDate} (${yearsAgo}y ago)`;
}
}
export const timeAgo = (
timestamp: Date | null,
{
withAgo,
}: {
withAgo?: boolean;
} = {}
): string => {
if (!timestamp) return "Never";
const diff = Date.now() - new Date(timestamp).getTime();
if (diff < 1000) {
// less than 1 second
return "Just now";
} else if (diff > 82800000) {
// more than 23 hours – similar to how Twitter displays timestamps
return new Date(timestamp).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year:
new Date(timestamp).getFullYear() !== new Date().getFullYear()
? "numeric"
: undefined,
});
}
return `${ms(diff)}${withAgo ? " ago" : ""}`;
};
export function nFormatter(num: number, digits?: number) {
if (!num) return "0";
const lookup = [
{ value: 1, symbol: "" },
{ value: 1e3, symbol: "K" },
{ value: 1e6, symbol: "M" },
{ value: 1e9, symbol: "G" },
{ value: 1e12, symbol: "T" },
{ value: 1e15, symbol: "P" },
{ value: 1e18, symbol: "E" },
];
const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
const item = lookup
.slice()
.reverse()
.find(function (item) {
return num >= item.value;
});
return item
? (num / item.value).toFixed(digits || 1).replace(rx, "$1") + item.symbol
: "0";
}
export const nanoid = customAlphabet(
"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
7
); // 7-character random string
interface SWRError extends Error {
status: number;
}
lib/config.tsx
export const BLUR_FADE_DELAY = 0.15;
export const siteConfig = {
name: "Prism UI",
description: "Build better apps faster with Prism UI - Modern React component library with pre-built sections and advanced UI patterns",
url: process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000",
keywords: [
"React Components",
"UI Library",
"Tailwind CSS",
"Next.js",
"shadcn/ui",
"Component Library",
"UI Kit",
"Design System",
"Web Development",
"Frontend Framework"
],
links: {
email: "support@prism.ui",
twitter: "https://twitter.com/prismui",
discord: "https://discord.gg/",
github: "https://github.com/Codehagen/Prismui",
instagram: "https://instagram.com/prismui/",
},
navItems: [
{
href: "/docs",
title: "Docs",
},
{
href: "/components",
title: "Components",
},
{
href: "/pro",
title: "Templates",
},
{
href: "/blog",
title: "Blog",
},
],
header: [
{
href: "/docs",
label: "Docs",
},
{
href: "/components",
label: "Components",
},
{
href: "/pro",
label: "Templates",
},
{
href: "/blog",
label: "Blog",
},
],
};
export type SiteConfig = typeof siteConfig;
demo.tsx
export { default as default } from "@/registry/example/button-group-basic";CSS
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
:root, :host {
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
"Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--color-zinc-500: oklch(55.2% 0.016 285.938);
--spacing: 0.25rem;
--text-sm: 0.875rem;
--text-sm--line-height: calc(1.25 / 0.875);
--font-weight-medium: 500;
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
}
}
@layer base {
*, ::after, ::before, ::backdrop, ::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp, pre {
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(--default-mono-font-variation-settings, normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring:where(:not(iframe)) {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol, ul, menu {
list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}
img, video {
max-width: 100%;
height: auto;
}
button, input, select, optgroup, textarea, ::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
::placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid {
box-shadow: none;
}
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
display: none !important;
}
}
@layer utilities {
.mr-2 {
margin-right: calc(var(--spacing) * 2);
}
.ml-2 {
margin-left: calc(var(--spacing) * 2);
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.h-4 {
height: calc(var(--spacing) * 4);
}
.h-9 {
height: calc(var(--spacing) * 9);
}
.h-10 {
height: calc(var(--spacing) * 10);
}
.h-11 {
height: calc(var(--spacing) * 11);
}
.min-h-\[200px\] {
min-height: 200px;
}
.w-4 {
width: calc(var(--spacing) * 4);
}
.w-10 {
width: calc(var(--spacing) * 10);
}
.w-full {
width: 100%;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.gap-0\.5 {
gap: calc(var(--spacing) * 0.5);
}
.rounded-md {
border-radius: calc(var(--radius) - 2px);
}
.border {
border-style: var(--tw-border-style);
border-width: 1px;
}
.border-input {
border-color: var(--input);
}
.bg-background {
background-color: var(--background);
}
.bg-destructive {
background-color: var(--destructive);
}
.bg-primary {
background-color: var(--primary);
}
.bg-secondary {
background-color: var(--secondary);
}
.px-3 {
padding-inline: calc(var(--spacing) * 3);
}
.px-4 {
padding-inline: calc(var(--spacing) * 4);
}
.px-8 {
padding-inline: calc(var(--spacing) * 8);
}
.py-2 {
padding-block: calc(var(--spacing) * 2);
}
.text-sm {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
.font-medium {
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
}
.whitespace-nowrap {
white-space: nowrap;
}
.text-destructive-foreground {
color: var(--destructive-foreground);
}
.text-primary {
color: var(--primary);
}
.text-primary-foreground {
color: var(--primary-foreground);
}
.text-secondary-foreground {
color: var(--secondary-foreground);
}
.underline-offset-4 {
text-underline-offset: 4px;
}
.ring-offset-background {
--tw-ring-offset-color: var(--background);
}
.outline {
outline-style: var(--tw-outline-style);
outline-width: 1px;
}
.transition-colors {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
.hover\:bg-accent:hover {
background-color: var(--accent);
}
.hover\:bg-destructive\/90:hover {
background-color: var(--destructive);
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-destructive\/90:hover {
background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
}
}
.hover\:bg-primary\/90:hover {
background-color: var(--primary);
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-primary\/90:hover {
background-color: color-mix(in oklab, var(--primary) 90%, transparent);
}
}
.hover\:bg-secondary\/80:hover {
background-color: var(--secondary);
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-secondary\/80:hover {
background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
}
}
.hover\:text-accent-foreground:hover {
color: var(--accent-foreground);
}
.hover\:underline:hover {
text-decoration-line: underline;
}
}
.focus-visible\:ring-2:focus-visible {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus-visible\:ring-ring:focus-visible {
--tw-ring-color: var(--ring);
}
.focus-visible\:ring-offset-2:focus-visible {
--tw-ring-offset-width: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.focus-visible\:outline-none:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.disabled\:pointer-events-none:disabled {
pointer-events: none;
}
.disabled\:opacity-50:disabled {
opacity: 50%;
}
@media (width < 40rem) {
.max-sm\:flex-col {
flex-direction: column;
}
.max-sm\:gap-1 {
gap: var(--spacing);
}
}
@media (width >= 40rem) {
.sm\:items-center {
align-items: center;
}
}
.\[\&\>\*\]\:h-9 > * {
height: calc(var(--spacing) * 9);
}
.\[\&\>\*\]\:h-10 > * {
height: calc(var(--spacing) * 10);
}
.\[\&\>\*\]\:h-11 > * {
height: calc(var(--spacing) * 11);
}
.\[\&\>\*\]\:w-10 > * {
width: calc(var(--spacing) * 10);
}
.\[\&\>\*\]\:rounded-md > * {
border-radius: calc(var(--radius) - 2px);
}
.\[\&\>\*\]\:px-3 > * {
padding-inline: calc(var(--spacing) * 3);
}
.\[\&\>\*\]\:px-4 > * {
padding-inline: calc(var(--spacing) * 4);
}
.\[\&\>\*\]\:px-8 > * {
padding-inline: calc(var(--spacing) * 8);
}
.\[\&\>\*\]\:py-2 > * {
padding-block: calc(var(--spacing) * 2);
}
.\[\&\>\*\]\:ring-offset-0 > * {
--tw-ring-offset-width: 0px;
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.\[\&\>\*\]\:outline > * {
outline-style: var(--tw-outline-style);
outline-width: 1px;
}
.\[\&\>\*\]\:outline-1 > * {
outline-style: var(--tw-outline-style);
outline-width: 1px;
}
.\[\&\>\*\]\:outline-zinc-500 > * {
outline-color: var(--color-zinc-500);
}
.\[\&\>\*\:focus-within\]\:z-10 > :focus-within {
z-index: 10;
}
.\[\&\>\*\:focus-within\]\:ring-1 > :focus-within {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.\[\&\>\*\:focus-within\]\:ring-offset-1 > :focus-within {
--tw-ring-offset-width: 1px;
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.\[\&\>\*\:focus-within\]\:ring-offset-2 > :focus-within {
--tw-ring-offset-width: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
@media (width >= 40rem) {
.sm\:\[\&\>\*\:not\(\:first-child\)\]\:rounded-l-none > :not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.sm\:\[\&\>\*\:not\(\:last-child\)\]\:rounded-r-none > :not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}
:root {
--background: #fff;
--foreground: #111;
--primary: #171717;
--primary-foreground: #fff;
--secondary: #eee;
--secondary-foreground: #171717;
--muted: #eee;
--muted-foreground: #666;
--accent: #eee;
--accent-foreground: #171717;
--border: #ddd;
--input: #ddd;
--ring: #777;
--destructive: #dc2626;
--destructive-foreground: #fff;
--popover: #fff;
--popover-foreground: #111;
--success: #15803d;
--success-foreground: #fff;
--radius: .625rem;
--hairline: 1px;
}
.dark {
--background: #090909;
--foreground: #fafafa;
--primary: #fafafa;
--primary-foreground: #171717;
--secondary: #262626;
--secondary-foreground: #fafafa;
--muted: #262626;
--muted-foreground: #a3a3a3;
--accent: #262626;
--accent-foreground: #fafafa;
--border: #333;
--input: #333;
--popover: #171717;
--popover-foreground: #fafafa;
}
@property --tw-border-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-font-weight {
syntax: "*";
inherits: false;
}
@property --tw-outline-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
syntax: "*";
inherits: false;
}
@property --tw-shadow-alpha {
syntax: "<percentage>";
inherits: false;
initial-value: 100%;
}
@property --tw-inset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
syntax: "*";
inherits: false;
}
@property --tw-inset-shadow-alpha {
syntax: "<percentage>";
inherits: false;
initial-value: 100%;
}
@property --tw-ring-color {
syntax: "*";
inherits: false;
}
@property --tw-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
syntax: "*";
inherits: false;
}
@property --tw-inset-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
syntax: "*";
inherits: false;
}
@property --tw-ring-offset-width {
syntax: "<length>";
inherits: false;
initial-value: 0px;
}
@property --tw-ring-offset-color {
syntax: "*";
inherits: false;
initial-value: #fff;
}
@property --tw-ring-offset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
--tw-border-style: solid;
--tw-font-weight: initial;
--tw-outline-style: solid;
--tw-shadow: 0 0 #0000;
--tw-shadow-color: initial;
--tw-shadow-alpha: 100%;
--tw-inset-shadow: 0 0 #0000;
--tw-inset-shadow-color: initial;
--tw-inset-shadow-alpha: 100%;
--tw-ring-color: initial;
--tw-ring-shadow: 0 0 #0000;
--tw-inset-ring-color: initial;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-inset: initial;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
}
}
}