+
+ Name
+
-
+
+ Cancel
+
Save changes
),
+ Scrollable: (
+
+
+ Scrollable Content
+
+
+
+ Scrollable Content
+
+ This is a dialog with scrollable content.
+
+
+
+
+ Lorem Ipsum
+
+ {Array.from({ length: 10 }).map((_, index) => (
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+ enim ad minim veniam, quis nostrud exercitation ullamco laboris
+ nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+ in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+ sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ ))}
+
+
+ ),
+ StickyFooter: (
+
+
+ Sticky Footer
+
+
+
+ Scrollable Content
+
+ This is a dialog with scrollable content.
+
+
+
+
+ Lorem Ipsum
+
+ {Array.from({ length: 10 }).map((_, index) => (
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+ enim ad minim veniam, quis nostrud exercitation ullamco laboris
+ nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+ in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+ sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ ))}
+
+
+ Close
+
+
+
+
+ ),
},
};
diff --git a/src/app/demo/[name]/ui/drawer-default.tsx b/src/app/demo/[name]/ui/drawer-default.tsx
new file mode 100644
index 00000000..390f33cf
--- /dev/null
+++ b/src/app/demo/[name]/ui/drawer-default.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import * as React from "react";
+import { Minus, Plus } from "lucide-react"
+import { Bar, BarChart, ResponsiveContainer } from "recharts";
+
+import { Button } from "@/components/ui/button";
+import {
+ Drawer,
+ DrawerClose,
+ DrawerContent,
+ DrawerDescription,
+ DrawerFooter,
+ DrawerHeader,
+ DrawerTitle,
+ DrawerTrigger,
+} from "@/components/ui/drawer";
+
+const data = [
+ {
+ goal: 400,
+ },
+ {
+ goal: 300,
+ },
+ {
+ goal: 200,
+ },
+ {
+ goal: 300,
+ },
+ {
+ goal: 200,
+ },
+ {
+ goal: 278,
+ },
+ {
+ goal: 189,
+ },
+ {
+ goal: 239,
+ },
+ {
+ goal: 300,
+ },
+ {
+ goal: 200,
+ },
+ {
+ goal: 278,
+ },
+ {
+ goal: 189,
+ },
+ {
+ goal: 349,
+ },
+]
+
+export function DrawerDefault() {
+ const [goal, setGoal] = React.useState(350);
+
+ const onClick = React.useCallback((adjustment: number) => {
+ setGoal((prevGoal) => Math.max(200, Math.min(400, prevGoal + adjustment)))
+ }, []);
+
+ return (
+
+
+ Open Drawer
+
+
+
+
+ Move Goal
+ Set your daily activity goal.
+
+
+
+
onClick(-10)}
+ disabled={goal <= 200}
+ >
+ Decrease
+
+
+
+ {goal}
+
+
+ Calories/day
+
+
+
onClick(10)}
+ disabled={goal >= 400}
+ >
+ Increase
+
+
+
+
+
+
+
+
+
+
+ Submit
+
+ Cancel
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/demo/[name]/ui/drawer-direction.tsx b/src/app/demo/[name]/ui/drawer-direction.tsx
new file mode 100644
index 00000000..e115fa09
--- /dev/null
+++ b/src/app/demo/[name]/ui/drawer-direction.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+ Drawer,
+ DrawerClose,
+ DrawerContent,
+ DrawerDescription,
+ DrawerFooter,
+ DrawerHeader,
+ DrawerTitle,
+ DrawerTrigger,
+} from "@/components/ui/drawer";
+
+const directions = ["top", "right", "bottom", "left"] as const;
+
+export function DrawerDirections() {
+ return (
+
+ {directions.map((direction) => (
+
+
+
+ {direction}
+
+
+
+
+ Move Goal
+
+ Set your daily activity goal.
+
+
+
+ {Array.from({ length: 10 }).map((_, index) => (
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+ do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+ irure dolor in reprehenderit in voluptate velit esse cillum
+ dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+ cupidatat non proident, sunt in culpa qui officia deserunt
+ mollit anim id est laborum.
+
+ ))}
+
+ Submit
+
+ Cancel
+
+
+
+
+ ))}
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/demo/[name]/ui/drawer-scrollable.tsx b/src/app/demo/[name]/ui/drawer-scrollable.tsx
new file mode 100644
index 00000000..bd83169e
--- /dev/null
+++ b/src/app/demo/[name]/ui/drawer-scrollable.tsx
@@ -0,0 +1,52 @@
+
+"use client";
+
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+ Drawer,
+ DrawerClose,
+ DrawerContent,
+ DrawerDescription,
+ DrawerFooter,
+ DrawerHeader,
+ DrawerTitle,
+ DrawerTrigger,
+} from "@/components/ui/drawer";
+
+export function DrawerScrollableContent() {
+ return (
+
+
+ Scrollable Content
+
+
+
+ Move Goal
+ Set your daily activity goal.
+
+
+
Lorem Ipsum
+ {Array.from({ length: 10 }).map((_, index) => (
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+ enim ad minim veniam, quis nostrud exercitation ullamco laboris
+ nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+ sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ ))}
+
+ Submit
+
+ Cancel
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/demo/[name]/ui/drawer.tsx b/src/app/demo/[name]/ui/drawer.tsx
new file mode 100644
index 00000000..74a21b95
--- /dev/null
+++ b/src/app/demo/[name]/ui/drawer.tsx
@@ -0,0 +1,21 @@
+import { DrawerDefault } from "./drawer-default";
+import { DrawerScrollableContent } from "./drawer-scrollable";
+import { DrawerDirections } from "./drawer-direction";
+
+
+export const drawer = {
+ name: "drawer",
+ components: {
+ Default: (
+
+ ),
+ ScrollableDrawer: (
+
+ ),
+ DrawerDirections: (
+
+ )
+ }
+};
+
+
diff --git a/src/app/demo/[name]/ui/dropdown-menu.tsx b/src/app/demo/[name]/ui/dropdown-menu.tsx
index b3c7d708..406855d5 100644
--- a/src/app/demo/[name]/ui/dropdown-menu.tsx
+++ b/src/app/demo/[name]/ui/dropdown-menu.tsx
@@ -1,123 +1,20 @@
import {
- Cloud,
- CreditCard,
- Github,
- Keyboard,
- LifeBuoy,
- LogOut,
- Mail,
- MessageSquare,
- Plus,
- PlusCircle,
- Settings,
- User,
- Users,
-} from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuGroup,
- DropdownMenuItem,
- DropdownMenuLabel,
- DropdownMenuPortal,
- DropdownMenuSeparator,
- DropdownMenuShortcut,
- DropdownMenuSub,
- DropdownMenuSubContent,
- DropdownMenuSubTrigger,
- DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+ DropdownMenuAvatarOnly,
+ DropdownMenuCheckboxes,
+ DropdownMenuIconColor,
+ DropdownMenuRadioGroupDemo,
+ DropdownMenuSimple,
+ DropdownMenuWithAvatar,
+} from "./dropdownMenu-options";
export const dropdownMenu = {
name: "dropdown-menu",
components: {
- Default: (
-
-
- Open
-
-
- My Account
-
-
- Profile
- ⇧⌘P
-
-
- Billing
- ⌘B
-
-
- Settings
- ⌘S
-
-
- Keyboard shortcuts
- ⌘K
-
-
-
-
- Team
-
-
- New Team
- ⌘+T
-
-
-
-
- Invite users
-
-
-
-
- Email
-
-
- Message
-
-
- More...
-
-
-
-
-
- GitHub
-
-
- Support
-
-
- API
-
-
- Log out
- ⇧⌘Q
-
-
-
- ),
+ Default:
,
+ DropdownMenuCheckboxes:
,
+ DropdownMenuRadioGroupDemo:
,
+ DropdownMenuWithAvatar:
,
+ DropdownMenuAvatarOnly:
,
+ DropdownMenuIconColor:
,
},
};
diff --git a/src/app/demo/[name]/ui/dropdownMenu-options.tsx b/src/app/demo/[name]/ui/dropdownMenu-options.tsx
new file mode 100644
index 00000000..762a7c68
--- /dev/null
+++ b/src/app/demo/[name]/ui/dropdownMenu-options.tsx
@@ -0,0 +1,364 @@
+"use client";
+
+import * as React from "react";
+import {
+ mdiAccount,
+ mdiBell,
+ mdiChevronDown,
+ mdiCreditCard,
+ mdiLogout,
+ mdiDotsHorizontal,
+ mdiPencil,
+ mdiCog,
+ mdiShare,
+ mdiStar,
+ mdiDelete,
+ mdiCheck,
+} from "@mdi/js";
+import Icon from "@mdi/react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuPortal,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+function DropdownMenuSimple() {
+ return (
+
+
+
+ Open
+
+
+
+ My Account
+
+
+ Profile
+ ⇧⌘P
+
+
+ Billing
+ ⌘B
+
+
+ Settings
+ ⌘S
+
+
+ Keyboard shortcuts
+ ⌘K
+
+
+
+ Team
+
+ Invite users
+
+
+ Email
+ Message
+ More...
+
+
+
+
+ New Team
+ ⌘+T
+
+
+ GitHub
+ Support
+ API
+
+ Log out
+ ⇧⌘Q
+
+
+
+ );
+}
+
+function DropdownMenuCheckboxes() {
+ const [showStatusBar, setShowStatusBar] = React.useState(true);
+ const [showActivityBar, setShowActivityBar] = React.useState(false);
+ const [showPanel, setShowPanel] = React.useState(false);
+
+ return (
+
+
+
+ Checkboxes
+
+
+
+
+ Account
+
+
+
+
+
+
+
+
+ Appearance
+
+ Status Bar
+
+
+ Activity Bar
+
+
+ Panel
+
+
+
+
+
+
+
+
+ );
+}
+
+function DropdownMenuRadioGroupDemo() {
+ const [position, setPosition] = React.useState("bottom");
+
+ return (
+
+
+
+ Radio Group
+
+
+
+ Panel Position
+
+
+ Top
+ Bottom
+
+ Right
+
+
+
+
+
+ );
+}
+
+function DropdownMenuWithAvatar() {
+ return (
+
+
+
+
+ CN
+
+
+ shadcn
+
+ shadcn@example.com
+
+
+
+
+
+
+
+
+ CN
+
+
+ shadcn
+
+ shadcn@example.com
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function DropdownMenuAvatarOnly() {
+ return (
+
+
+
+
+ LR
+
+
+
+
+
+
+
+ LR
+
+
+ leerob
+
+ leerob@example.com
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function DropdownMenuIconColor() {
+ return (
+
+
+
+ Toggle menu
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export {
+ DropdownMenuSimple,
+ DropdownMenuCheckboxes,
+ DropdownMenuRadioGroupDemo,
+ DropdownMenuWithAvatar,
+ DropdownMenuAvatarOnly,
+ DropdownMenuIconColor,
+};
diff --git a/src/app/demo/[name]/ui/forms/data.ts b/src/app/demo/[name]/ui/forms/data.ts
new file mode 100644
index 00000000..d3f7c574
--- /dev/null
+++ b/src/app/demo/[name]/ui/forms/data.ts
@@ -0,0 +1,39 @@
+import * as zod from "zod";
+
+export const defaultValues: FormDataType = {
+ firstName: "John",
+ middleName: "",
+ lastName: "",
+};
+
+export type FieldDataType = {
+ id: string;
+ label: string;
+ helptext?: string;
+ required?: boolean;
+};
+
+export const data: FieldDataType[] = [
+ {
+ id: "firstName",
+ label: "Firstname",
+ },
+ {
+ id: "middleName",
+ label: "Middlename",
+ },
+ {
+ id: "lastName",
+ label: "Surname",
+ required: true,
+ helptext: "This is your family name",
+ },
+];
+
+export const schema = zod.object({
+ firstName: zod.string().max(12),
+ middleName: zod.string().max(12).optional(),
+ lastName: zod.string().max(12).nonempty({ message: "Last name is required" }),
+});
+
+export type FormDataType = zod.infer
;
diff --git a/src/app/demo/[name]/ui/forms/form.tsx b/src/app/demo/[name]/ui/forms/form.tsx
new file mode 100644
index 00000000..37b1c406
--- /dev/null
+++ b/src/app/demo/[name]/ui/forms/form.tsx
@@ -0,0 +1,20 @@
+import TanstackFormWrapper from "./tanstack/FormWrapper";
+import ReactHookFormWrapper from "./reacthookform/FormWrapper";
+
+export const form = {
+ name: "form",
+ components: {
+ ReactHookForm: (
+ <>
+ React Hook Form
+ Tanstack Form
+
+ form.reset()}
+ disabled={!isDirty || isSubmitting}
+ >
+ Cancel
+
+
+ {isSubmitting ? "Submitting..." : "Submit"}
+
+
+ );
+};
+export default FormControls;
diff --git a/src/app/demo/[name]/ui/forms/reacthookform/FormField.tsx b/src/app/demo/[name]/ui/forms/reacthookform/FormField.tsx
new file mode 100644
index 00000000..7137ab12
--- /dev/null
+++ b/src/app/demo/[name]/ui/forms/reacthookform/FormField.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import * as React from "react";
+
+import { Input } from "@/components/ui/input";
+import {
+ FormDescription,
+ FormField as ReactFormField,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+import { FieldDataType } from "../data";
+
+const FormField = ({ label, id, helptext, required }: FieldDataType) => {
+ return (
+ {
+ return (
+
+
+ {label}
+ {required && * }
+
+
+
{
+ field.field.onChange(e.target.value);
+ }}
+ />
+
+
+ {helptext}
+
+
+
+
({
+ defaultValues: defaultValues,
+ resolver: zodResolver(schema),
+ mode: "onSubmit",
+ });
+
+ const handleSubmit = async () => {
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+ };
+
+ return (
+
+
+ );
+};
+
+export default FormWrapper;
diff --git a/src/app/demo/[name]/ui/forms/tanstack/FormControls.tsx b/src/app/demo/[name]/ui/forms/tanstack/FormControls.tsx
new file mode 100644
index 00000000..5aeb3ab1
--- /dev/null
+++ b/src/app/demo/[name]/ui/forms/tanstack/FormControls.tsx
@@ -0,0 +1,29 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { useFormContext } from "@/components/ui/tanstack-form";
+
+const FormControls = () => {
+ const form = useFormContext();
+ return (
+ [state.isDirty, state.isSubmitting]}
+ children={([isDirty, isSubmitting]) => (
+
+ form.reset()}
+ disabled={!isDirty || isSubmitting}
+ >
+ Cancel
+
+
+ {isSubmitting ? "Submitting..." : "Submit"}
+
+
+ )}
+ />
+ );
+};
+export default FormControls;
diff --git a/src/app/demo/[name]/ui/forms/tanstack/FormField.tsx b/src/app/demo/[name]/ui/forms/tanstack/FormField.tsx
new file mode 100644
index 00000000..aae9ca00
--- /dev/null
+++ b/src/app/demo/[name]/ui/forms/tanstack/FormField.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import * as React from "react";
+
+import { Input } from "@/components/ui/input";
+import { FormType, useFormContext } from "@/components/ui/tanstack-form";
+import { FieldDataType, FormDataType } from "../data";
+
+const FormField = ({ label, id, helptext }: FieldDataType) => {
+ const form = useFormContext() as unknown as FormType;
+
+ return (
+ {
+ return (
+
+ {label}
+
+
+
+ {helptext}
+
+
+
+ );
+ }}
+ />
+ );
+};
+
+export default FormField;
diff --git a/src/app/demo/[name]/ui/forms/tanstack/FormWrapper.tsx b/src/app/demo/[name]/ui/forms/tanstack/FormWrapper.tsx
new file mode 100644
index 00000000..6c95c076
--- /dev/null
+++ b/src/app/demo/[name]/ui/forms/tanstack/FormWrapper.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import * as React from "react";
+
+import { useAppForm } from "@/components/ui/tanstack-form";
+import FormField from "./FormField";
+import FormControls from "./FormControls";
+import { data, defaultValues, schema } from "../data";
+
+const TanstackFormWrapper = () => {
+ const form = useAppForm({
+ defaultValues: defaultValues,
+ onSubmit: async () => {
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+ },
+ validators: {
+ onSubmit: schema,
+ },
+ });
+
+ return (
+
+
+
+ );
+};
+
+export default TanstackFormWrapper;
diff --git a/src/app/demo/[name]/ui/hover-card.tsx b/src/app/demo/[name]/ui/hover-card.tsx
new file mode 100644
index 00000000..e1bfcd58
--- /dev/null
+++ b/src/app/demo/[name]/ui/hover-card.tsx
@@ -0,0 +1,46 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+ HoverCard,
+ HoverCardContent,
+ HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { mdiCalendar } from "@mdi/js";
+import Icon from "@mdi/react";
+
+export const hoverCard = {
+ name: "hover-card",
+ components: {
+ Default: (
+
+
+ @nextjs
+
+
+
+
+ VC
+
+
+
@nextjs
+
+ The React Framework – created and maintained by @vercel.
+
+
+
+ Joined December 2021
+
+
+
+
+
+ ),
+ },
+};
diff --git a/src/app/demo/[name]/ui/input.tsx b/src/app/demo/[name]/ui/input.tsx
index 929ab9b2..3db93214 100644
--- a/src/app/demo/[name]/ui/input.tsx
+++ b/src/app/demo/[name]/ui/input.tsx
@@ -1,29 +1,31 @@
-import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
export const input = {
name: "input",
components: {
- Default:
-
Label
-
+ Email: (
+
+
),
- WithButton: (
-
-
-
Button
+ Text: (
+
+
+ ),
+ Password: (
+
+
),
-
File: (
-
-
File
-
+
+
+ ),
+ Disabled: (
+
+
),
},
diff --git a/src/app/demo/[name]/ui/inputOtp.tsx b/src/app/demo/[name]/ui/inputOtp.tsx
new file mode 100644
index 00000000..66c04366
--- /dev/null
+++ b/src/app/demo/[name]/ui/inputOtp.tsx
@@ -0,0 +1,57 @@
+import { Label } from "@/components/ui/label";
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@/components/ui/inputOtp";
+
+export const inputOtp = {
+ name: "inputOtp",
+ components: {
+ Default: (
+
+ Simple
+
+
+
+
+
+
+
+ ),
+ Pattern: (
+
+ Digits Only
+
+
+
+
+
+ ),
+ // With Spacing
+ WithSpacing: (
+
+ With Spacing
+
+
+
+
+
+ ),
+
+ },
+};
+
\ No newline at end of file
diff --git a/src/app/demo/[name]/ui/label.tsx b/src/app/demo/[name]/ui/label.tsx
new file mode 100644
index 00000000..d6167d24
--- /dev/null
+++ b/src/app/demo/[name]/ui/label.tsx
@@ -0,0 +1,14 @@
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+
+export const label = {
+ name: "label",
+ components: {
+ Default: (
+
+ Accept terms and conditions
+
+ ),
+ },
+};
diff --git a/src/app/demo/[name]/ui/line-chart.tsx b/src/app/demo/[name]/ui/line-chart.tsx
new file mode 100644
index 00000000..85217653
--- /dev/null
+++ b/src/app/demo/[name]/ui/line-chart.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { TrendingUp } from "lucide-react";
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
+
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import {
+ ChartConfig,
+ ChartContainer,
+ ChartTooltip,
+ ChartTooltipContent,
+} from "@/components/ui/chart";
+
+export const description = "A multiple line chart";
+
+const chartData = [
+ { month: "January", desktop: 186, mobile: 80 },
+ { month: "February", desktop: 305, mobile: 200 },
+ { month: "March", desktop: 237, mobile: 120 },
+ { month: "April", desktop: 73, mobile: 190 },
+ { month: "May", desktop: 209, mobile: 130 },
+ { month: "June", desktop: 214, mobile: 140 },
+];
+
+const chartConfig = {
+ desktop: {
+ label: "Desktop",
+ color: "var(--chart-1)",
+ },
+ mobile: {
+ label: "Mobile",
+ color: "var(--chart-2)",
+ },
+} satisfies ChartConfig;
+
+export function LineChartComponent() {
+ return (
+
+
+ Line Chart - Multiple
+ January - June 2024
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+
+
+ );
+}
diff --git a/src/app/demo/[name]/ui/menu-bar.tsx b/src/app/demo/[name]/ui/menu-bar.tsx
index 9a37025b..2d1bf409 100644
--- a/src/app/demo/[name]/ui/menu-bar.tsx
+++ b/src/app/demo/[name]/ui/menu-bar.tsx
@@ -2,6 +2,7 @@ import {
Menubar,
MenubarCheckboxItem,
MenubarContent,
+ MenubarGroup,
MenubarItem,
MenubarMenu,
MenubarRadioGroup,
@@ -13,98 +14,123 @@ import {
MenubarSubTrigger,
MenubarTrigger,
} from "@/components/ui/menubar";
+import { HelpCircleIcon, SettingsIcon, Trash2Icon } from "lucide-react";
export const menuBar = {
name: "menu-bar",
components: {
Default: (
-
-
- File
-
-
- New Tab ⌘T
-
-
- New Window ⌘N
-
- New Incognito Window
-
- Share
-
- Email link
- Messages
- Notes
-
-
-
- Print... ⌘P
-
-
-
-
- Edit
-
-
- Undo ⌘Z
-
-
- Redo ⇧⌘Z
-
-
- Find
-
- Search the web
+
+
+
+ File
+
+
+ New Tab ⌘T
+
+
+ New Window ⌘N
+
+ New Incognito Window
+
+ Share
+
+ Email link
+ Messages
+ Notes
+
+
+
+ Print... ⌘P
+
+
+
+
+ Edit
+
+
+ Undo ⌘Z
+
+
+ Redo ⇧⌘Z
+
+
+ Find
+
+ Search the web
+ Find...
+ Find Next
+ Find Previous
+
+
+ Cut
+ Copy
+ Paste
+
+
+
+ View
+
+
+ Always Show Bookmarks Bar
+
+
+ Always Show Full URLs
+
+
+ Reload ⌘R
+
+
+ Force Reload ⇧⌘R
+
+ Toggle Fullscreen
+ Hide Sidebar
+
+
+
+ Profiles
+
+
+ Andy
+ Benoit
+ Luis
+
+ Edit...
+ Add Profile...
+
+
+
+ More
+
+
+
+
+
+
Find...
- Find Next
- Find Previous
-
-
- Cut
- Copy
- Paste
-
-
-
- View
-
- Always Show Bookmarks Bar
-
- Always Show Full URLs
-
-
- Reload ⌘R
-
-
- Force Reload ⇧⌘R
-
- Toggle Fullscreen
- Hide Sidebar
-
-
-
- Profiles
-
-
- Andy
- Benoit
- Luis
-
- Edit...
- Add Profile...
-
-
-
+
+
+
+
+
+
+
),
},
};
diff --git a/src/app/demo/[name]/ui/multi-calendar.tsx b/src/app/demo/[name]/ui/multi-calendar.tsx
index 7aeadd76..4ad480b3 100644
--- a/src/app/demo/[name]/ui/multi-calendar.tsx
+++ b/src/app/demo/[name]/ui/multi-calendar.tsx
@@ -5,7 +5,7 @@ import type { DateRange } from "react-day-picker";
import { Calendar } from "@/components/ui/calendar";
-export function MultiCalendar() {
+export function MultiCalendar({numberOfMonths = 1}: {numberOfMonths?: number}) {
const [dateRange, setDateRange] = React.useState({
from: new Date(2025, 5, 9),
to: new Date(2025, 5, 26),
@@ -17,6 +17,7 @@ export function MultiCalendar() {
defaultMonth={dateRange?.from}
selected={dateRange}
onSelect={setDateRange}
+ numberOfMonths={numberOfMonths}
className="rounded-lg border shadow-sm"
/>
);
diff --git a/src/app/demo/[name]/ui/navigation-menu.tsx b/src/app/demo/[name]/ui/navigation-menu.tsx
new file mode 100644
index 00000000..c134eb2a
--- /dev/null
+++ b/src/app/demo/[name]/ui/navigation-menu.tsx
@@ -0,0 +1,239 @@
+import {
+ NavigationMenu,
+ NavigationMenuContent,
+ NavigationMenuItem,
+ NavigationMenuLink,
+ NavigationMenuList,
+ NavigationMenuTrigger,
+ navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+import {
+ mdiCheckCircleOutline,
+ mdiCircleOutline,
+ mdiHelpCircleOutline,
+} from "@mdi/js";
+import Icon from "@mdi/react";
+import Link from "next/link";
+import type React from "react";
+
+const components: { title: string; href: string; description: string }[] = [
+ {
+ title: "Alert Dialog",
+ href: "/docs/primitives/alert-dialog",
+ description:
+ "A modal dialog that interrupts the user with important content and expects a response.",
+ },
+ {
+ title: "Hover Card",
+ href: "/docs/primitives/hover-card",
+ description:
+ "For sighted users to preview content available behind a link.",
+ },
+ {
+ title: "Progress",
+ href: "/docs/primitives/progress",
+ description:
+ "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+ },
+ {
+ title: "Scroll-area",
+ href: "/docs/primitives/scroll-area",
+ description: "Visually or semantically separates content.",
+ },
+ {
+ title: "Tabs",
+ href: "/docs/primitives/tabs",
+ description:
+ "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+ },
+ {
+ title: "Tooltip",
+ href: "/docs/primitives/tooltip",
+ description:
+ "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+ },
+];
+
+export const navigationMenu = {
+ name: "navigation-menu",
+ components: {
+ Default: (
+
+
+
+ Getting Started
+
+
+
+
+
+ shadcn/ui
+
+
+ Beautifully designed components built with Tailwind CSS.
+
+
+
+
+
+ Re-usable components built using Radix UI and Tailwind CSS.
+
+
+ How to install dependencies and structure your app.
+
+
+ Styles for headings, paragraphs, lists...etc
+
+
+
+
+
+
+ Components
+
+
+ {components.map((component) => (
+
+ {component.description}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ ),
+ Secondary: (
+
+
+
+
+
+
+
+
+ List
+
+
+
+
+ Components
+
+ Browse all components in the library.
+
+
+
+
+ Documentation
+
+ Learn how to use the library.
+
+
+
+
+ Blog
+
+ Read our latest blog posts.
+
+
+
+
+
+
+
+
+
+ Simple List
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ With Icon
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+ },
+};
+
+function ListItem({
+ title,
+ children,
+ href,
+ ...props
+}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
+ return (
+
+
+ {title}
+
+ {children}
+
+
+
+
+ );
+}
diff --git a/src/app/demo/[name]/ui/pagination.tsx b/src/app/demo/[name]/ui/pagination.tsx
new file mode 100644
index 00000000..d3091d0f
--- /dev/null
+++ b/src/app/demo/[name]/ui/pagination.tsx
@@ -0,0 +1,43 @@
+import {
+ Pagination,
+ PaginationContent,
+ PaginationEllipsis,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious,
+} from "@/components/ui/pagination";
+
+export const pagination = {
+ name: "pagination",
+ components: {
+ Default: (
+
+
+
+
+
+
+ 1
+
+
+
+ 2
+
+
+
+ 3
+
+
+
+
+
+
+
+
+
Pie Chart
January - June 2024
diff --git a/src/app/demo/[name]/ui/popover.tsx b/src/app/demo/[name]/ui/popover.tsx
new file mode 100644
index 00000000..8888160b
--- /dev/null
+++ b/src/app/demo/[name]/ui/popover.tsx
@@ -0,0 +1,67 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+import { Label } from "@radix-ui/react-label";
+
+export const popover = {
+ name: "popover",
+ components: {
+ Default: (
+
+
+
+ Open popover
+
+
+
+
+
Dimensions
+
+ Set the dimensions for the layer.
+
+
+
+
+
+
+
+ Default
+
+
+ Comfortable
+
+
+ Compact
+
+
+ ),
+ Descriptive: (
+
+ {plans.map((plan) => (
+
+
+
{plan.name}
+
+ {plan.description}
+
+
+ ))}
+
+ ),
+ },
+};
diff --git a/src/app/demo/[name]/ui/resizable.tsx b/src/app/demo/[name]/ui/resizable.tsx
new file mode 100644
index 00000000..d5006a5f
--- /dev/null
+++ b/src/app/demo/[name]/ui/resizable.tsx
@@ -0,0 +1,75 @@
+import {
+ ResizableHandle,
+ ResizablePanel,
+ ResizablePanelGroup,
+} from "@/components/ui/resizable";
+
+export const resizable = {
+ name: "resizable",
+ components: {
+ Default: (
+
+
+
+ One
+
+
+
+
+
+
+ Two
+
+
+
+
+ Three
+
+
+
+
+
+ ),
+ Vertical: (
+
+
+
+ Header
+
+
+
+
+ Content
+
+
+
+ ),
+ Handle: (
+
+
+
+ Sidebar
+
+
+
+
+ Content
+
+
+
+ ),
+ },
+};
diff --git a/src/app/demo/[name]/ui/scroll-area.tsx b/src/app/demo/[name]/ui/scroll-area.tsx
new file mode 100644
index 00000000..461a29d6
--- /dev/null
+++ b/src/app/demo/[name]/ui/scroll-area.tsx
@@ -0,0 +1,70 @@
+import * as React from "react";
+
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+
+export const works = [
+ {
+ artist: "Ornella Binni",
+ art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
+ },
+ {
+ artist: "Tom Byrom",
+ art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
+ },
+ {
+ artist: "Vladimir Malyav",
+ art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
+ },
+] as const;
+
+const tags = Array.from({ length: 50 }).map(
+ (_, i, a) => `v1.2.0-beta.${a.length - i}`
+);
+
+export const scrollArea = {
+ name: "scrollarea",
+ components: {
+ ScrollAreaVertical: (
+
+
+
+
Tags
+ {tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+
+ {works.map((artwork) => (
+
+
+
+
+ Photo by{" "}
+
+ {artwork.artist}
+
+
+
+ ))}
+
+ ),
+ },
+};
diff --git a/src/app/demo/[name]/ui/select.tsx b/src/app/demo/[name]/ui/select.tsx
index d2539b49..6634e892 100644
--- a/src/app/demo/[name]/ui/select.tsx
+++ b/src/app/demo/[name]/ui/select.tsx
@@ -7,6 +7,13 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
+import Icon from "@mdi/react";
+import {
+ mdiChartBar,
+ mdiChartLine,
+ mdiChartPie,
+ mdiCircleOutline,
+} from "@mdi/js";
export const select = {
name: "select",
@@ -22,11 +29,78 @@ export const select = {
Apple
Banana
Blueberry
- Grapes
+
+ Grapes
+
Pineapple
),
+ largeList: (
+
+
+
+
+ {Array.from({ length: 100 }).map((_, i) => (
+
+ Item {i}
+
+ ))}
+
+
+ ),
+ withIcon: (
+
+
+
+
+
+
+ Chart Types
+
+
+
+
+
+
+
+
+
+ ),
+ disabled: (
+
+
+
+
+ Apple
+ Banana
+ Blueberry
+
+ Grapes
+
+ Pineapple
+
+
+ ),
},
};
diff --git a/src/app/demo/[name]/ui/separator.tsx b/src/app/demo/[name]/ui/separator.tsx
index 1467026a..68621016 100644
--- a/src/app/demo/[name]/ui/separator.tsx
+++ b/src/app/demo/[name]/ui/separator.tsx
@@ -5,19 +5,25 @@ export const separator = {
components: {
Default: (
-
-
Radix Primitives
-
- An open-source UI component library.
-
-
-
-
-
Blog
-
-
Docs
-
-
Source
+
+
+
+
+ Tailwind CSS
+
+
+ A utility-first CSS framework.
+
+
+
+
+
Blog
+
+
Docs
+
+
Source
+
+
),
diff --git a/src/app/demo/[name]/ui/sheet.tsx b/src/app/demo/[name]/ui/sheet.tsx
new file mode 100644
index 00000000..551a8faf
--- /dev/null
+++ b/src/app/demo/[name]/ui/sheet.tsx
@@ -0,0 +1,109 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+ Sheet,
+ SheetClose,
+ SheetContent,
+ SheetDescription,
+ SheetFooter,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "@/components/ui/sheet";
+
+const SheetPopupComponent = ({ side = "left" }: { side?: "top" | "right" | "bottom" | "left" }) => (
+
+
+
+ {side}
+
+
+
+
+ Edit profile
+
+ Make changes to your profile here. Click save when you're
+ done.
+
+
+
+
+ Lorem Ipsum
+
+ {Array.from({ length: 10 }).map((_, index) => (
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+ do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+ ullamco laboris nisi ut aliquip ex ea commodo consequat.
+ Duis aute irure dolor in reprehenderit in voluptate velit
+ esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+ occaecat cupidatat non proident, sunt in culpa qui officia
+ deserunt mollit anim id est laborum.
+
+ ))}
+
+ Save changes
+
+ Cancel
+
+
+
+
+);
+
+export const sheet = {
+ name: "sheet",
+ components: {
+ Default: (
+
+
+
+ Open
+
+
+
+ Edit profile
+
+ Make changes to your profile here. Click save when you're
+ done.
+
+
+
+
+ Save changes
+
+ Close
+
+
+
+
+
+ ),
+ Top: (
+
+ ),
+ Bottom: (
+
+ ),
+ Left: (
+
+ ),
+ Right: (
+
+ )
+ }
+};
+
+
diff --git a/src/app/demo/[name]/ui/sidebar.tsx b/src/app/demo/[name]/ui/sidebar.tsx
new file mode 100644
index 00000000..3c9d7d91
--- /dev/null
+++ b/src/app/demo/[name]/ui/sidebar.tsx
@@ -0,0 +1,42 @@
+import { Sidebar, SidebarContent, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarProvider } from "@/components/ui/sidebar";
+import { mdiHome, mdiAccount, mdiCog } from "@mdi/js";
+import Icon from "@mdi/react";
+
+export const sidebar = {
+ name: "sidebar",
+ components: {
+ Default: (
+
+
+
+
+ Navigation
+
+
+
+
+
+ Home
+
+
+
+
+ Profile
+
+
+
+
+ Settings
+
+
+
+
+
+
+
+ ),
+ },
+};
diff --git a/src/app/demo/[name]/ui/skeleton.tsx b/src/app/demo/[name]/ui/skeleton.tsx
index e8cce6d6..835a3a65 100644
--- a/src/app/demo/[name]/ui/skeleton.tsx
+++ b/src/app/demo/[name]/ui/skeleton.tsx
@@ -1,24 +1,31 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
export const skeleton = {
name: "skeleton",
components: {
Default: (
-
-
-
-
-
+
),
- Card: (
-
-
-
-
+ CardList: (
+
+ {Array.from({ length: 2 }).map((_, index) => (
+
+
+
+
+
+
+ ))}
),
},
diff --git a/src/app/demo/[name]/ui/sonner-toasts.tsx b/src/app/demo/[name]/ui/sonner-toasts.tsx
index e1109f64..c8e4e9ac 100644
--- a/src/app/demo/[name]/ui/sonner-toasts.tsx
+++ b/src/app/demo/[name]/ui/sonner-toasts.tsx
@@ -3,9 +3,11 @@
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
+import Icon from "@mdi/react";
+import { mdiInformation } from "@mdi/js";
export function Sonner() {
- return
toast("Toast")}>Normal Toast ;
+ return
toast.info("Toast")}>Normal Toast ;
}
export function SuccessfulSonner() {
@@ -29,10 +31,7 @@ export function WarningSonner() {
export function ErrorSonner() {
return (
-
toast.error("There was an error")}
- >
+ toast.error("There was an error")}>
Error Toast
);
@@ -41,10 +40,11 @@ export function ErrorSonner() {
export function ActionSonner() {
return (
toast("Toast with an Action", {
- description: "A description with some more information",
+ description: `A description with some more information ${link }`,
+ icon:
,
+ WithTextSpinner:
,
+ },
+};
diff --git a/src/app/demo/[name]/ui/switch.tsx b/src/app/demo/[name]/ui/switch.tsx
index 04b5c07f..85a08a35 100644
--- a/src/app/demo/[name]/ui/switch.tsx
+++ b/src/app/demo/[name]/ui/switch.tsx
@@ -4,11 +4,35 @@ import { Switch } from "@/components/ui/switch";
export const switchComponent = {
name: "switch",
components: {
- Default: (
-
-
-
Airplane Mode
+ Primary: (
+
+ Airplane Mode
),
+ Danger: (
+
+ Danger Mode
+
+ ),
+ Success: (
+
+ Success Mode
+
+ ),
+ FocusMode: (
+
+
+
Share across devices
+
+ Focus is shared across devices, and turns off when you leave the
+ app.
+
+
+ ),
},
};
diff --git a/src/app/demo/[name]/ui/tabs.tsx b/src/app/demo/[name]/ui/tabs.tsx
index b4d762e8..8defce16 100644
--- a/src/app/demo/[name]/ui/tabs.tsx
+++ b/src/app/demo/[name]/ui/tabs.tsx
@@ -1,3 +1,6 @@
+import { mdiCodeBraces, mdiCog, mdiHome, mdiWindowMaximize } from "@mdi/js";
+import Icon from "@mdi/react";
+
import { Button } from "@/components/ui/button";
import {
Card,
@@ -14,9 +17,9 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
export const tabs = {
name: "tabs",
components: {
- Default: (
-
-
+ LineVariant: (
+
+
Account
Password
@@ -28,14 +31,14 @@ export const tabs = {
Make changes to your account here. Click save when you're done.
-
-
-
Name
-
+
+
+ Name
+
-
-
Username
-
+
+ Username
+
@@ -51,14 +54,14 @@ export const tabs = {
Change your password here. After saving, you'll be logged out.
-
-
-
Current password
-
+
+
+ Current password
+
-
-
New password
-
+
+ New password
+
@@ -68,5 +71,45 @@ export const tabs = {
),
+ LineVariantWithIcons: (
+
+
+
+
+
+
+
+
+ ),
+ SoftRoundedVariant: (
+
+
+
+ Home
+
+
+ Settings
+
+
+
+ ),
+ WithIcons: (
+
+
+
+
+
+
+
+
+ ),
},
};
diff --git a/src/app/demo/[name]/ui/textarea.tsx b/src/app/demo/[name]/ui/textarea.tsx
new file mode 100644
index 00000000..02e62ace
--- /dev/null
+++ b/src/app/demo/[name]/ui/textarea.tsx
@@ -0,0 +1,92 @@
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+
+export const textarea = {
+ name: "textarea",
+ components: {
+ // Basic textarea
+ Basic: ,
+
+ // Invalid state
+ Invalid: ,
+
+ // With label
+ WithLabel: (
+
+ Message
+
+
+ ),
+
+ // With label and description
+ WithLabelAndDescription: (
+
+
+ Message
+
+
+
+ Type your message and press enter to send.
+
+
+ Disabled Textarea
+
+
+ ),
+
+ // Small size
+ Small: (
+
+ Small (3 rows)
+
+
+ ),
+
+ // Large size
+ Large: (
+
+ Large (8 rows)
+
+
+ ),
+
+ // With default value
+ WithDefaultValue: (
+
+ Pre-filled Textarea
+
+
+ ),
+ },
+};
diff --git a/src/app/demo/[name]/ui/toggle-group.tsx b/src/app/demo/[name]/ui/toggle-group.tsx
index d0e6ccdf..f43e953e 100644
--- a/src/app/demo/[name]/ui/toggle-group.tsx
+++ b/src/app/demo/[name]/ui/toggle-group.tsx
@@ -1,23 +1,51 @@
-import { Bold, Italic, Underline } from "lucide-react";
-
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import Icon from "@mdi/react";
+import { mdiFormatBold, mdiFormatItalic, mdiFormatUnderline } from "@mdi/js";
export const toggleGroup = {
name: "toggle-group",
components: {
- Default: (
-
-
-
+
+
-
-
+
+
+
+ ),
+ rounded: (
+
+
+ All
+
+
-
),
diff --git a/src/app/demo/[name]/ui/toggle.tsx b/src/app/demo/[name]/ui/toggle.tsx
new file mode 100644
index 00000000..7e952052
--- /dev/null
+++ b/src/app/demo/[name]/ui/toggle.tsx
@@ -0,0 +1,62 @@
+import { Toggle } from "@/components/ui/toggle";
+import Icon from "@mdi/react";
+import {
+ mdiBookmark,
+ mdiFormatBold,
+ mdiFormatItalic,
+ mdiFormatUnderline,
+} from "@mdi/js";
+
+export const toggle = {
+ name: "toggle",
+ components: {
+ square: (
+
+
+
+
+
+
+ Disabled
+
+
+
+
+
+
+ ),
+ rounded: (
+
+
+
+
+
+
+ Disabled
+
+
+
+
+
+
+ ),
+ },
+};
diff --git a/src/app/demo/[name]/ui/tooltip.tsx b/src/app/demo/[name]/ui/tooltip.tsx
index c6445c74..92bdebe4 100644
--- a/src/app/demo/[name]/ui/tooltip.tsx
+++ b/src/app/demo/[name]/ui/tooltip.tsx
@@ -9,14 +9,40 @@ import {
export const tooltip = {
name: "tooltip",
components: {
- Default: (
+ side: (
-
-
- Hover
-
- Add to library
-
+
+ {/* Top Tooltip */}
+
+
+ Hover Top
+
+ Add to library (Top)
+
+ {/* Bottom Tooltip */}
+
+
+ Hover Bottom
+
+
+ Add to library (Bottom)
+
+
+ {/* Right Tooltip */}
+
+
+ Hover Right
+
+ Add to library (Right)
+
+ {/* Left Tooltip */}
+
+
+ Hover Left
+
+ Add to library (Left)
+
+
),
},
diff --git a/src/app/globals.css b/src/app/globals.css
index 42d0ea6a..0543873c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,130 +3,140 @@
@custom-variant dark (&:is(.dark *));
-:root {
- --background: oklch(0.97 0.01 80.72);
- --foreground: oklch(0.3 0.04 30.2);
-
- --card: oklch(0.97 0.01 80.72);
- --card-foreground: oklch(0.3 0.04 30.2);
-
- --popover: oklch(0.97 0.01 80.72);
- --popover-foreground: oklch(0.3 0.04 30.2);
-
- --primary: oklch(0.52 0.13 144.17);
- --primary-foreground: oklch(1.0 0 0);
-
- --secondary: oklch(0.96 0.02 147.64);
- --secondary-foreground: oklch(0.43 0.12 144.31);
-
- --muted: oklch(0.94 0.01 74.42);
- --muted-foreground: oklch(0.45 0.05 39.21);
-
- --accent: oklch(0.9 0.05 146.04);
- --accent-foreground: oklch(0.43 0.12 144.31);
-
- --destructive: oklch(0.54 0.19 26.72);
- --destructive-foreground: oklch(1.0 0 0);
+/* @tailwind base; */
+/* @tailwind components; */
+@tailwind utilities;
- --border: oklch(0.88 0.02 74.64);
- --input: oklch(0.88 0.02 74.64);
- --ring: oklch(0.52 0.13 144.17);
+@import "./colors.css";
+@import "./typography.css";
+@import "./borderRadius.css";
+@import "./shadows.css";
+@import "./breakpoints.css";
- --chart-1: oklch(0.67 0.16 144.21);
- --chart-2: oklch(0.58 0.14 144.18);
- --chart-3: oklch(0.52 0.13 144.17);
- --chart-4: oklch(0.43 0.12 144.31);
- --chart-5: oklch(0.22 0.05 145.73);
-
- --sidebar: oklch(0.94 0.01 74.42);
- --sidebar-foreground: oklch(0.3 0.04 30.2);
- --sidebar-primary: oklch(0.52 0.13 144.17);
- --sidebar-primary-foreground: oklch(1.0 0 0);
- --sidebar-accent: oklch(0.9 0.05 146.04);
- --sidebar-accent-foreground: oklch(0.43 0.12 144.31);
- --sidebar-border: oklch(0.88 0.02 74.64);
- --sidebar-ring: oklch(0.52 0.13 144.17);
-
- --radius: 0.5rem;
+:root {
+ --radius: 0.625rem;
+ /* Chakra semantic token mappings (light mode) */
+ --background: var(--color-white); /* chakra-body-bg: white */
+ --foreground: var(
+ --color-blackAlpha-900
+ ); /* chakra-body-text: blackAlpha.900 */
+ --card: var(--color-white); /* chakra-card-bg: white */
+ --card-foreground: var(
+ --color-blackAlpha-900
+ ); /* chakra-card-text: blackAlpha.900 */
+ --popover: var(--color-white); /* chakra-popover-bg: white */
+ --popover-foreground: var(
+ --color-blackAlpha-900
+ ); /* chakra-popover-text: blackAlpha.900 */
+ --primary: var(--color-primary-500); /* primary-fg: primary.600 */
+ --primary-foreground: var(--color-white); /* chakra-inverse-text: white */
+ --primary-background: var(--color-primary-100);
+ --secondary: var(--color-gray-50);
+ --secondary-foreground: var(--color-blackAlpha-900);
+ --muted: var(--color-gray-50); /* chakra-subtle-bg: gray.50 */
+ --muted-foreground: var(
+ --color-blackAlpha-500
+ ); /* chakra-subtle-text: blackAlpha.500 */
+ --accent: var(--color-gray-50);
+ --accent-foreground: var(--color-blackAlpha-900);
+ --destructive: var(--color-danger-500); /* danger-fg: danger.600 */
+ --border: var(
+ --color-blackAlpha-200
+ ); /* chakra-border-color: blackAlpha.200 */
+ --input: var(
+ --color-blackAlpha-400
+ ); /* chakra-placeholder-color: blackAlpha.400 */
+ --ring: #6987f9;
+ --chart-1: #4E41CC;
+ --chart-2: #0FB5AE;
+ --chart-3: #F08910;
+ --chart-4: #33C5E8;
+ --chart-5: #E055E2;
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: oklch(0.205 0 0);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
}
.dark {
- --background: oklch(0.15 0.01 74.42);
- --foreground: oklch(0.95 0.02 80.72);
-
- --card: oklch(0.12 0.01 80.72);
- --card-foreground: oklch(0.95 0.02 80.72);
-
- --popover: oklch(0.12 0.01 80.72);
- --popover-foreground: oklch(0.95 0.02 80.72);
-
- --primary: oklch(0.58 0.15 144.17);
- --primary-foreground: oklch(0.09 0.01 80.72);
-
- --secondary: oklch(0.15 0.02 147.64);
- --secondary-foreground: oklch(0.65 0.12 144.31);
-
- --muted: oklch(0.18 0.01 74.42);
- --muted-foreground: oklch(0.65 0.03 74.42);
-
- --accent: oklch(0.22 0.04 146.04);
- --accent-foreground: oklch(0.65 0.12 144.31);
-
- --destructive: oklch(0.62 0.22 26.72);
- --destructive-foreground: oklch(0.95 0.02 80.72);
-
- --border: oklch(0.22 0.02 74.64);
- --input: oklch(0.22 0.02 74.64);
- --ring: oklch(0.58 0.15 144.17);
-
- --chart-1: oklch(0.72 0.16 144.21);
- --chart-2: oklch(0.63 0.14 144.18);
- --chart-3: oklch(0.58 0.15 144.17);
- --chart-4: oklch(0.48 0.12 144.31);
- --chart-5: oklch(0.35 0.08 145.73);
-
- --sidebar: oklch(0.15 0.01 74.42);
- --sidebar-foreground: oklch(0.95 0.02 80.72);
- --sidebar-primary: oklch(0.58 0.15 144.17);
- --sidebar-primary-foreground: oklch(0.09 0.01 80.72);
- --sidebar-accent: oklch(0.22 0.04 146.04);
- --sidebar-accent-foreground: oklch(0.65 0.12 144.31);
- --sidebar-border: oklch(0.22 0.02 74.64);
- --sidebar-ring: oklch(0.58 0.15 144.17);
+ /* Chakra semantic token mappings (dark mode) */
+ --background: var(--color-gray-800); /* chakra-body-bg: gray.800 */
+ --foreground: var(--color-white); /* chakra-body-text: white */
+ --card: var(--color-gray-800); /* chakra-card-bg: gray.800 */
+ --card-foreground: var(--color-white); /* chakra-card-text: white */
+ --popover: var(--color-gray-800); /* chakra-popover-bg: gray.800 */
+ --popover-foreground: var(--color-white); /* chakra-popover-text: white */
+ --primary: var(--color-primary-200); /* primary-fg: primary.200 */
+ --primary-foreground: var(
+ --color-blackAlpha-900
+ ); /* chakra-inverse-text: blackAlpha.900 */
+ --primary-background: var(--color-primary-100);
+ --secondary: var(--color-gray-900); /* chakra-subtle-bg: gray.900 */
+ --secondary-foreground: var(--color-white); /* chakra-subtle-text: white */
+ --muted: var(--color-gray-900); /* chakra-subtle-bg: gray.900 */
+ --muted-foreground: var(
+ --color-whitealpha-600
+ ); /* chakra-subtle-text: whiteAlpha.600 */
+ --accent: var(--color-gray-900);
+ --accent-foreground: var(--color-white); /* chakra-inverse-text: white */
+ --destructive: var(--color-danger-200); /* danger-fg: danger.200 */
+ --border: var(
+ --color-whitealpha-200
+ ); /* chakra-border-color: whiteAlpha.200 */
+ --input: var(
+ --color-whitealpha-500
+ ); /* chakra-placeholder-color: whiteAlpha.500 */
+ --ring: #6987f9;
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.556 0 0);
+ --chart-1: var(--color-purple-500); /* 6e3fff */
+ --chart-2: var(--color-blue-500); /* 4a65e8 */
+ --chart-3: var(--color-cyan-500); /* 0873c8 */
+ --chart-4: var(--color-teal-500); /* 007c85 */
+ --chart-5: var(--color-green-500); /* 007f66 */
+ --sidebar: oklch(0.205 0 0);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.269 0 0);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.439 0 0);
}
@theme inline {
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
--color-background: var(--background);
--color-foreground: var(--foreground);
-
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
-
+ --color-primary-background: var(--primary-background);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
- --color-accent: var(--accent);
- --color-accent-foreground: var(--accent-foreground);
-
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
- --color-card: var(--card);
- --color-card-foreground: var(--card-foreground);
- --color-popover: var(--popover);
- --color-popover-foreground: var(--popover-foreground);
-
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
-
- --color-destructive: var(--destructive);
- --color-destructive-foreground: var(--destructive-foreground);
-
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
-
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
@@ -135,32 +145,22 @@
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
-
- --font-sans: var(--font-sans);
- --font-serif: var(--font-serif);
- --font-mono: var(--font-mono);
-
- --radius-sm: calc(var(--radius) - 4px);
- --radius-md: calc(var(--radius) - 2px);
- --radius-lg: var(--radius);
- --radius-xl: calc(var(--radius) + 4px);
-
- --shadow-2xs: var(--shadow-2xs);
- --shadow-xs: var(--shadow-xs);
- --shadow-sm: var(--shadow-sm);
- --shadow: var(--shadow);
- --shadow-md: var(--shadow-md);
- --shadow-lg: var(--shadow-lg);
- --shadow-xl: var(--shadow-xl);
- --shadow-2xl: var(--shadow-2xl);
}
@layer base {
- *,
- ::after,
- ::before,
- ::backdrop,
- ::file-selector-button {
- border-color: var(--color-border, currentColor);
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
}
}
+
+.scrollbar-hidden {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+}
+
+.scrollbar-hidden::-webkit-scrollbar {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7aa07aac..42919b93 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,10 +7,11 @@ import type { ReactNode } from "react";
import { cn } from "@/lib/utils";
import "@/app/globals.css";
+import { Toaster } from "@/components/ui/sonner";
export const metadata: Metadata = {
- title: "Registry Starter",
- description: "Starter to help build a Shadcn Registry using Tailwind v4",
+ title: "Blok Registry (Beta)",
+ description: "Blok Registry is a Shadcn Custom Registry ",
icons: [{ rel: "icon", url: "/favicon.svg", type: "image/svg+xml" }],
};
@@ -41,7 +42,7 @@ export default function RootLayout({
GeistSans.variable,
GeistMono.variable,
MontserratSerif.variable,
- "bg-background text-foreground",
+ "bg-subtle-bg text-foreground",
)}
>