mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-18 05:11:32 +00:00
Compare commits
16 Commits
shadcn@2.1
...
shadcn@2.1
| Author | SHA1 | Date | |
|---|---|---|---|
|
70c684c224 | ||
|
4ff64ba818 | ||
|
|
500a353816 | ||
|
c830780d62 | ||
|
debd51a854 | ||
|
|
78426dd862 | ||
|
|
6e47a94a8f | ||
|
ab6a856930 | ||
|
|
b33d3868e9 | ||
|
9e0a86122a | ||
|
|
2b276de95a | ||
|
|
64739f8399 | ||
|
|
f0cff7e0eb | ||
|
|
e242adaa9c | ||
|
986c00ee0e | ||
|
|
d0eece06d4 |
@@ -10,8 +10,8 @@ import {
|
||||
PageHeaderDescription,
|
||||
PageHeaderHeading,
|
||||
} from "@/components/page-header"
|
||||
import CardsNewYork from "@/registry/new-york/example/cards"
|
||||
import { Button } from "@/registry/new-york/ui/button"
|
||||
import MailPage from "@/app/(app)/examples/mail/page"
|
||||
|
||||
export default function IndexPage() {
|
||||
return (
|
||||
@@ -41,24 +41,22 @@ export default function IndexPage() {
|
||||
<ExamplesNav className="[&>a:first-child]:text-primary" />
|
||||
<section className="overflow-hidden rounded-lg border bg-background shadow-md md:hidden md:shadow-xl">
|
||||
<Image
|
||||
src="/examples/mail-dark.png"
|
||||
src="/examples/cards-light.png"
|
||||
width={1280}
|
||||
height={727}
|
||||
alt="Mail"
|
||||
className="hidden dark:block"
|
||||
/>
|
||||
<Image
|
||||
src="/examples/mail-light.png"
|
||||
width={1280}
|
||||
height={727}
|
||||
alt="Mail"
|
||||
height={1214}
|
||||
alt="Cards"
|
||||
className="block dark:hidden"
|
||||
/>
|
||||
<Image
|
||||
src="/examples/cards-dark.png"
|
||||
width={1280}
|
||||
height={1214}
|
||||
alt="Cards"
|
||||
className="hidden dark:block"
|
||||
/>
|
||||
</section>
|
||||
<section className="hidden md:block">
|
||||
<div className="overflow-hidden rounded-lg border bg-background shadow">
|
||||
<MailPage />
|
||||
</div>
|
||||
<section className="hidden md:block [&>div]:p-0">
|
||||
<CardsNewYork />
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,18 +1,19 @@
|
||||
import { cn } from "@/lib/utils"
|
||||
import {
|
||||
Alert,
|
||||
AlertDescription,
|
||||
AlertTitle,
|
||||
} from "@/registry/new-york/ui/alert"
|
||||
|
||||
interface CalloutProps {
|
||||
icon?: string
|
||||
title?: string
|
||||
children?: React.ReactNode
|
||||
}
|
||||
|
||||
export function Callout({ title, children, icon, ...props }: CalloutProps) {
|
||||
export function Callout({
|
||||
title,
|
||||
children,
|
||||
icon,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Alert> & { icon?: string }) {
|
||||
return (
|
||||
<Alert {...props}>
|
||||
<Alert className={cn("bg-muted/50", className)} {...props}>
|
||||
{icon && <span className="mr-4 text-2xl">{icon}</span>}
|
||||
{title && <AlertTitle>{title}</AlertTitle>}
|
||||
<AlertDescription>{children}</AlertDescription>
|
||||
|
||||
@@ -8,6 +8,11 @@ import { cn } from "@/lib/utils"
|
||||
import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
|
||||
|
||||
const examples = [
|
||||
{
|
||||
name: "Examples",
|
||||
href: "/",
|
||||
code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/mail",
|
||||
},
|
||||
{
|
||||
name: "Mail",
|
||||
href: "/examples/mail",
|
||||
|
||||
@@ -139,10 +139,10 @@ const components = {
|
||||
<hr className="my-4 md:my-8" {...props} />
|
||||
),
|
||||
table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
|
||||
<div className="my-6 w-full overflow-y-auto rounded-lg">
|
||||
<div className="my-6 w-full overflow-y-auto">
|
||||
<table
|
||||
className={cn(
|
||||
"relative w-full overflow-hidden text-sm after:absolute after:inset-0 after:rounded-lg after:ring-1 after:ring-border",
|
||||
"relative w-full overflow-hidden border-none text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -150,12 +150,15 @@ const components = {
|
||||
</div>
|
||||
),
|
||||
tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
|
||||
<tr className={cn("m-0 border-t", className)} {...props} />
|
||||
<tr
|
||||
className={cn("last:border-b-none m-0 border-b", className)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
th: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
|
||||
<th
|
||||
className={cn(
|
||||
"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
|
||||
"px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -164,7 +167,7 @@ const components = {
|
||||
td: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
|
||||
<td
|
||||
className={cn(
|
||||
"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
|
||||
"px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -71,6 +71,11 @@ export const docsConfig: DocsConfig = {
|
||||
href: "/docs/cli",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "Next.js 15 + React 19",
|
||||
href: "/docs/react-19",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "Typography",
|
||||
href: "/docs/components/typography",
|
||||
|
||||
@@ -45,12 +45,6 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
|
||||
|
||||
## Installation
|
||||
|
||||
<Callout className="mt-4">
|
||||
|
||||
**Note:** If you are trying to use charts with **React 19** or the **Next.js 15**, you will need the [recharts@alpha](https://github.com/recharts/recharts/releases/tag/v2.13.0-alpha.4) release currently.
|
||||
|
||||
</Callout>
|
||||
|
||||
<Tabs defaultValue="cli">
|
||||
|
||||
<TabsList>
|
||||
@@ -89,6 +83,27 @@ npx shadcn@latest add chart
|
||||
}
|
||||
```
|
||||
|
||||
<Step>
|
||||
To use recharts with React 19 and Next.js 15, you will need to override the
|
||||
`react-is` dependency.{" "}
|
||||
</Step>
|
||||
|
||||
Add the following to your `package.json`
|
||||
|
||||
```json title="package.json"
|
||||
"overrides": {
|
||||
"react-is": "^19.0.0-rc-69d4b800-20241021"
|
||||
}
|
||||
```
|
||||
|
||||
Note: the `react-is` version needs to match the version of React 19 you are using. The above is an example.
|
||||
|
||||
<Step>Run `npm install`</Step>
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
@@ -129,6 +144,27 @@ npm install recharts
|
||||
}
|
||||
```
|
||||
|
||||
<Step>
|
||||
To use recharts with React 19 and Next.js 15, you will need to override the
|
||||
`react-is` dependency.{" "}
|
||||
</Step>
|
||||
|
||||
Add the following to your `package.json`
|
||||
|
||||
```json title="package.json"
|
||||
"overrides": {
|
||||
"react-is": "^19.0.0-rc-69d4b800-20241021"
|
||||
}
|
||||
```
|
||||
|
||||
Note: the `react-is` version needs to match the version of React 19 you are using. The above is an example.
|
||||
|
||||
<Step>Run `npm install`</Step>
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
@@ -136,3 +136,27 @@ export function CommandMenu() {
|
||||
### Combobox
|
||||
|
||||
You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.
|
||||
|
||||
## Changelog
|
||||
|
||||
### 2024-10-25 Classes for icons
|
||||
|
||||
Added `gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0` to the `<CommandItem />` to automatically style icon inside.
|
||||
|
||||
Add the following classes to the `cva` call in your `command.tsx` file.
|
||||
|
||||
```tsx showLineNumbers title="command.tsx"
|
||||
const CommandItem = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"... gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
```
|
||||
|
||||
@@ -120,3 +120,23 @@ const DropdownMenuItem = React.forwardRef<
|
||||
/>
|
||||
))
|
||||
```
|
||||
|
||||
### 2024-10-25 Classes for `<DropdownMenuSubTrigger />`
|
||||
|
||||
Added `gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0` to the `<DropdownMenuSubTrigger />` to automatically style icon inside.
|
||||
|
||||
Add the following classes to the `cva` call in your `dropdown-menu.tsx` file.
|
||||
|
||||
```tsx title="dropdown-menu.tsx"
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{/* ... */}
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
```
|
||||
|
||||
@@ -406,6 +406,40 @@ You can change the keyboard shortcut by updating the `SIDEBAR_KEYBOARD_SHORTCUT`
|
||||
const SIDEBAR_KEYBOARD_SHORTCUT = "b"
|
||||
```
|
||||
|
||||
### Persisted State
|
||||
|
||||
The `SidebarProvider` supports persisting the sidebar state across page reloads and server-side rendering. It uses cookies to store the current state of the sidebar. When the sidebar state changes, a default cookie named `sidebar:state` is set with the current open/closed state. This cookie is then read on subsequent page loads to restore the sidebar state.
|
||||
|
||||
To persist sidebar state in Next.js, set up your `SidebarProvider` in `app/layout.tsx` like this:
|
||||
|
||||
```tsx showLineNumbers title="app/layout.tsx"
|
||||
import { cookies } from "next/headers"
|
||||
|
||||
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
|
||||
import { AppSidebar } from "@/components/app-sidebar"
|
||||
|
||||
export async function Layout({ children }: { children: React.ReactNode }) {
|
||||
const cookieStore = await cookies()
|
||||
const defaultOpen = cookieStore.get("sidebar:state")?.value === "true"
|
||||
|
||||
return (
|
||||
<SidebarProvider defaultOpen={defaultOpen}>
|
||||
<AppSidebar />
|
||||
<main>
|
||||
<SidebarTrigger />
|
||||
{children}
|
||||
</main>
|
||||
</SidebarProvider>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
You can change the name of the cookie by updating the `SIDEBAR_COOKIE_NAME` variable in `sidebar.tsx`.
|
||||
|
||||
```tsx showLineNumbers title="components/ui/sidebar.tsx"
|
||||
const SIDEBAR_COOKIE_NAME = "sidebar:state"
|
||||
```
|
||||
|
||||
## Sidebar
|
||||
|
||||
The main `Sidebar` component used to render a collapsible sidebar.
|
||||
@@ -1323,7 +1357,30 @@ You can find more tips on using states for styling in this [Twitter thread](http
|
||||
|
||||
## Changelog
|
||||
|
||||
### 2024-10-21
|
||||
### 2024-10-30 Cookie handling in setOpen
|
||||
|
||||
- [#5593](https://github.com/shadcn-ui/ui/pull/5593) - Improved setOpen callback logic in `<SidebarProvider>`.
|
||||
|
||||
Update the `setOpen` callback in `<SidebarProvider>` as follows:
|
||||
|
||||
```tsx showLineNumbers
|
||||
const setOpen = React.useCallback(
|
||||
(value: boolean | ((value: boolean) => boolean)) => {
|
||||
const openState = typeof value === "function" ? value(open) : value
|
||||
if (setOpenProp) {
|
||||
setOpenProp(openState)
|
||||
} else {
|
||||
_setOpen(openState)
|
||||
}
|
||||
|
||||
// This sets the cookie to keep the sidebar state.
|
||||
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
|
||||
},
|
||||
[setOpenProp, open]
|
||||
)
|
||||
```
|
||||
|
||||
### 2024-10-21 Fixed `text-sidebar-foreground`
|
||||
|
||||
- [#5491](https://github.com/shadcn-ui/ui/pull/5491) - Moved `text-sidebar-foreground` from `<SidebarProvider>` to `<Sidebar>` component.
|
||||
|
||||
|
||||
@@ -3,6 +3,12 @@ title: Next.js
|
||||
description: Install and configure Next.js.
|
||||
---
|
||||
|
||||
<Callout>
|
||||
|
||||
**If you're using Next.js 15, see the [Next.js 15 + React 19](/docs/react-19) guide.**
|
||||
|
||||
</Callout>
|
||||
|
||||
<Steps>
|
||||
|
||||
### Create project
|
||||
|
||||
@@ -23,6 +23,29 @@ npm install -D tailwindcss postcss autoprefixer
|
||||
npx tailwindcss init -p
|
||||
```
|
||||
|
||||
Add this import header in your main css file, `src/index.css` in our case:
|
||||
|
||||
```css {1-3} showLineNumbers
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* ... */
|
||||
```
|
||||
|
||||
Configure the tailwind template paths in `tailwind.config.js`:
|
||||
|
||||
```js {3}
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
### Edit tsconfig.json file
|
||||
|
||||
The current version of Vite splits TypeScript configuration into three files, two of which need to be edited.
|
||||
|
||||
170
apps/www/content/docs/react-19.mdx
Normal file
170
apps/www/content/docs/react-19.mdx
Normal file
@@ -0,0 +1,170 @@
|
||||
---
|
||||
title: Next.js 15 + React 19
|
||||
description: Using shadcn/ui with Next.js 15 and React 19.
|
||||
---
|
||||
|
||||
**shadcn/ui is now fully compatible with React 19!**
|
||||
|
||||
<Callout className="mt-6">
|
||||
**The following guide applies to any framework that supports React 19**. I
|
||||
titled this page "Next.js 15 + React 19" to help people upgrading to Next.js
|
||||
15 find it. We are working with package maintainers to help upgrade to React
|
||||
19.
|
||||
</Callout>
|
||||
|
||||
## TL;DR
|
||||
|
||||
If you're using `npm`, you can install shadcn/ui dependencies with a flag. The `shadcn` CLI will prompt you to select a flag when you run it. No flags required for pnpm, bun, or yarn.
|
||||
|
||||
See [Upgrade Status](#upgrade-status) for the status of React 19 support for each package.
|
||||
|
||||
## What's happening?
|
||||
|
||||
React 19 is now [rc](https://www.npmjs.com/package/react?activeTab=versions) and is [tested and supported in the latest Next.js 15 release](https://nextjs.org/blog/next-15#react-19).
|
||||
|
||||
To support React 19, package maintainers will need to test and update their packages to include React 19 as a peer dependency. This is [already](https://github.com/radix-ui/primitives/pull/2952) [in](https://github.com/pacocoursey/cmdk/pull/318) [progress](https://github.com/emilkowalski/vaul/pull/498).
|
||||
|
||||
```diff /^19.0/
|
||||
"peerDependencies": {
|
||||
- "react": "^16.8 || ^17.0 || ^18.0",
|
||||
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
|
||||
- "react-dom": "^16.8 || ^17.0 || ^18.0"
|
||||
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
|
||||
},
|
||||
```
|
||||
|
||||
<Callout>
|
||||
You can check if a package lists React 19 as a peer dependency by running
|
||||
`npm info <package> peerDependencies`.
|
||||
</Callout>
|
||||
|
||||
In the meantime, if you are installing a package that **does not** list React 19 as a peer dependency, you will see an error message like this:
|
||||
|
||||
```bash
|
||||
npm error code ERESOLVE
|
||||
npm error ERESOLVE unable to resolve dependency tree
|
||||
npm error
|
||||
npm error While resolving: my-app@0.1.0
|
||||
npm error Found: react@19.0.0-rc-69d4b800-20241021
|
||||
npm error node_modules/react
|
||||
npm error react@"19.0.0-rc-69d4b800-20241021" from the root project
|
||||
```
|
||||
|
||||
<Callout>
|
||||
**Note:** This is npm only. PNPM and Bun will only show a silent warning.
|
||||
</Callout>
|
||||
|
||||
## How to fix this
|
||||
|
||||
### Solution 1: `--force` or `--legacy-peer-deps`
|
||||
|
||||
You can force install a package with the `--force` or the `--legacy-peer-deps` flag.
|
||||
|
||||
```bash
|
||||
npm i <package> --force
|
||||
|
||||
npm i <package> --legacy-peer-deps
|
||||
```
|
||||
|
||||
This will install the package and ignore the peer dependency warnings.
|
||||
|
||||
<Accordion type="multiple">
|
||||
<AccordionItem value="flags">
|
||||
<AccordionTrigger className="font-medium">
|
||||
What do the `--force` and `--legacy-peer-deps` flag do?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="[&_ul]:mt-0">
|
||||
|
||||
- `--force`: Ignores and overrides any dependency conflicts, forcing the
|
||||
installation of packages.
|
||||
- `--legacy-peer-deps`: Skips strict peer dependency checks, allowing
|
||||
installation of packages with unmet peer dependencies to avoid errors.
|
||||
|
||||
</AccordionContent>
|
||||
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
### Solution 2: Use React 18
|
||||
|
||||
You can downgrade `react` and `react-dom` to version 18, which is compatible with the package you are installing and upgrade when the dependency is updated.
|
||||
|
||||
```bash
|
||||
npm i react@18 react-dom@18
|
||||
```
|
||||
|
||||
Whichever solution you choose, make sure you test your app thoroughly to ensure
|
||||
there are no regressions.
|
||||
|
||||
## Using shadcn/ui on Next.js 15
|
||||
|
||||
### Using pnpm, bun, or yarn
|
||||
|
||||
Follow the instructions in the [installation guide](/docs/installation/next) to install shadcn/ui. No flags are needed.
|
||||
|
||||
### Using npm
|
||||
|
||||
When you run `npx shadcn@latest init -d`, you will be prompted to select an option to resolve the peer dependency issues.
|
||||
|
||||
```bash
|
||||
It looks like you are using React 19.
|
||||
Some packages may fail to install due to peer dependency issues (see https://ui.shadcn.com/react-19).
|
||||
|
||||
? How would you like to proceed? › - Use arrow-keys. Return to submit.
|
||||
❯ Use --force
|
||||
Use --legacy-peer-deps
|
||||
```
|
||||
|
||||
You can then run the command with the flag you choose.
|
||||
|
||||
## Adding components
|
||||
|
||||
The process for adding components is the same as above. Select a flag to resolve the peer dependency issues.
|
||||
|
||||
**Remember to always test your app after installing new dependencies.**
|
||||
|
||||
## Upgrade Status
|
||||
|
||||
To make it easy for you track the progress of the upgrade, I've created a table below with React 19 support status for the shadcn/ui dependencies.
|
||||
|
||||
- ✅ - Works with React 19 using npm, pnpm, and bun.
|
||||
- 🚧 - Works with React 19 using pnpm and bun. Requires flag for npm. PR is in progress.
|
||||
|
||||
| Package | Status | Note |
|
||||
| ---------------------------------------------------------------------------------- | ------ | ----------------------------------------------------------- |
|
||||
| [radix-ui](https://www.npmjs.com/package/@radix-ui/react-icons) | ✅ | |
|
||||
| [lucide-react](https://www.npmjs.com/package/lucide-react) | ✅ | |
|
||||
| [class-variance-authority](https://www.npmjs.com/package/class-variance-authority) | ✅ | Does not list React 19 as a peer dependency. |
|
||||
| [tailwindcss-animate](https://www.npmjs.com/package/tailwindcss-animate) | ✅ | Does not list React 19 as a peer dependency. |
|
||||
| [embla-carousel-react](https://www.npmjs.com/package/embla-carousel-react) | ✅ | |
|
||||
| [recharts](https://www.npmjs.com/package/recharts) | ✅ | See note [below](#recharts) |
|
||||
| [react-hook-form](https://www.npmjs.com/package/react-hook-form) | ✅ | |
|
||||
| [react-resizable-panels](https://www.npmjs.com/package/react-resizable-panels) | ✅ | |
|
||||
| [sonner](https://www.npmjs.com/package/sonner) | ✅ | |
|
||||
| [react-day-picker](https://www.npmjs.com/package/react-day-picker) | ✅ | Works with flag for npm. Work to upgrade to v9 in progress. |
|
||||
| [input-otp](https://www.npmjs.com/package/input-otp) | ✅ | |
|
||||
| [vaul](https://www.npmjs.com/package/vaul) | ✅ | |
|
||||
| [@radix-ui/react-icons](https://www.npmjs.com/package/@radix-ui/react-icons) | ✅ | |
|
||||
| [cmdk](https://www.npmjs.com/package/cmdk) | ✅ | |
|
||||
|
||||
If you have any questions, please [open an issue](https://github.com/shadcn/ui/issues) on GitHub.
|
||||
|
||||
## Recharts
|
||||
|
||||
To use recharts with React 19, you will need to override the `react-is` dependency.
|
||||
|
||||
<Steps>
|
||||
|
||||
<Step>Add the following to your `package.json`</Step>
|
||||
|
||||
```json title="package.json"
|
||||
"overrides": {
|
||||
"react-is": "^19.0.0-rc-69d4b800-20241021"
|
||||
}
|
||||
```
|
||||
|
||||
Note: the `react-is` version needs to match the version of React 19 you are using. The above is an example.
|
||||
|
||||
<Step>Run `npm install --legacy-peer-deps`</Step>
|
||||
|
||||
</Steps>
|
||||
@@ -58,6 +58,11 @@ const nextConfig = {
|
||||
destination: "/docs/components/sidebar",
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/react-19",
|
||||
destination: "/docs/react-19",
|
||||
permanent: true,
|
||||
},
|
||||
]
|
||||
},
|
||||
}
|
||||
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/accordion-demo.tsx",
|
||||
"content": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/components/ui/accordion\"\n\nexport default function AccordionDemo() {\n return (\n <Accordion type=\"single\" collapsible className=\"w-full\">\n <AccordionItem value=\"item-1\">\n <AccordionTrigger>Is it accessible?</AccordionTrigger>\n <AccordionContent>\n Yes. It adheres to the WAI-ARIA design pattern.\n </AccordionContent>\n </AccordionItem>\n <AccordionItem value=\"item-2\">\n <AccordionTrigger>Is it styled?</AccordionTrigger>\n <AccordionContent>\n Yes. It comes with default styles that matches the other\n components' aesthetic.\n </AccordionContent>\n </AccordionItem>\n <AccordionItem value=\"item-3\">\n <AccordionTrigger>Is it animated?</AccordionTrigger>\n <AccordionContent>\n Yes. It's animated by default, but you can disable it if you\n prefer.\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n )\n}\n",
|
||||
"content": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\n\nexport default function AccordionDemo() {\n return (\n <Accordion type=\"single\" collapsible className=\"w-full\">\n <AccordionItem value=\"item-1\">\n <AccordionTrigger>Is it accessible?</AccordionTrigger>\n <AccordionContent>\n Yes. It adheres to the WAI-ARIA design pattern.\n </AccordionContent>\n </AccordionItem>\n <AccordionItem value=\"item-2\">\n <AccordionTrigger>Is it styled?</AccordionTrigger>\n <AccordionContent>\n Yes. It comes with default styles that matches the other\n components' aesthetic.\n </AccordionContent>\n </AccordionItem>\n <AccordionItem value=\"item-3\">\n <AccordionTrigger>Is it animated?</AccordionTrigger>\n <AccordionContent>\n Yes. It's animated by default, but you can disable it if you\n prefer.\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/accordion-demo.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,7 +9,7 @@
|
||||
"path": "ui/accordion.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n React.ElementRef<typeof AccordionPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n <AccordionPrimitive.Item\n ref={ref}\n className={cn(\"border-b\", className)}\n {...props}\n />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n React.ElementRef<typeof AccordionPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n <AccordionPrimitive.Header className=\"flex\">\n <AccordionPrimitive.Trigger\n ref={ref}\n className={cn(\n \"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180\",\n className\n )}\n {...props}\n >\n {children}\n <ChevronDown className=\"h-4 w-4 shrink-0 transition-transform duration-200\" />\n </AccordionPrimitive.Trigger>\n </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n React.ElementRef<typeof AccordionPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n <AccordionPrimitive.Content\n ref={ref}\n className=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n {...props}\n >\n <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n </AccordionPrimitive.Content>\n))\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
|
||||
"type": "registry:ui",
|
||||
"target": "components/ui/accordion.tsx"
|
||||
"target": ""
|
||||
}
|
||||
],
|
||||
"tailwind": {
|
||||
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/alert-demo.tsx",
|
||||
"content": "import { Terminal } from \"lucide-react\"\n\nimport {\n Alert,\n AlertDescription,\n AlertTitle,\n} from \"@/components/ui/alert\"\n\nexport default function AlertDemo() {\n return (\n <Alert>\n <Terminal className=\"h-4 w-4\" />\n <AlertTitle>Heads up!</AlertTitle>\n <AlertDescription>\n You can add components to your app using the cli.\n </AlertDescription>\n </Alert>\n )\n}\n",
|
||||
"content": "import { Terminal } from \"lucide-react\"\n\nimport {\n Alert,\n AlertDescription,\n AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport default function AlertDemo() {\n return (\n <Alert>\n <Terminal className=\"h-4 w-4\" />\n <AlertTitle>Heads up!</AlertTitle>\n <AlertDescription>\n You can add components to your app using the cli.\n </AlertDescription>\n </Alert>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/alert-demo.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/alert-destructive.tsx",
|
||||
"content": "import { AlertCircle } from \"lucide-react\"\n\nimport {\n Alert,\n AlertDescription,\n AlertTitle,\n} from \"@/components/ui/alert\"\n\nexport default function AlertDestructive() {\n return (\n <Alert variant=\"destructive\">\n <AlertCircle className=\"h-4 w-4\" />\n <AlertTitle>Error</AlertTitle>\n <AlertDescription>\n Your session has expired. Please log in again.\n </AlertDescription>\n </Alert>\n )\n}\n",
|
||||
"content": "import { AlertCircle } from \"lucide-react\"\n\nimport {\n Alert,\n AlertDescription,\n AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport default function AlertDestructive() {\n return (\n <Alert variant=\"destructive\">\n <AlertCircle className=\"h-4 w-4\" />\n <AlertTitle>Error</AlertTitle>\n <AlertDescription>\n Your session has expired. Please log in again.\n </AlertDescription>\n </Alert>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/alert-destructive.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -8,9 +8,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/alert-dialog-demo.tsx",
|
||||
"content": "import {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\"\nimport { Button } from \"@/components/ui/button\"\n\nexport default function AlertDialogDemo() {\n return (\n <AlertDialog>\n <AlertDialogTrigger asChild>\n <Button variant=\"outline\">Show Dialog</Button>\n </AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n <AlertDialogDescription>\n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n </AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Cancel</AlertDialogCancel>\n <AlertDialogAction>Continue</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialog>\n )\n}\n",
|
||||
"content": "import {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function AlertDialogDemo() {\n return (\n <AlertDialog>\n <AlertDialogTrigger asChild>\n <Button variant=\"outline\">Show Dialog</Button>\n </AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n <AlertDialogDescription>\n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n </AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Cancel</AlertDialogCancel>\n <AlertDialogAction>Continue</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialog>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/alert-dialog-demo.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -10,9 +10,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/alert-dialog.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Overlay\n className={cn(\n \"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n className\n )}\n {...props}\n ref={ref}\n />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <AlertDialogPortal>\n <AlertDialogOverlay />\n <AlertDialogPrimitive.Content\n ref={ref}\n className={cn(\n \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n className\n )}\n {...props}\n />\n </AlertDialogPortal>\n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"flex flex-col space-y-2 text-center sm:text-left\",\n className\n )}\n {...props}\n />\n)\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nconst AlertDialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n className\n )}\n {...props}\n />\n)\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Title\n ref={ref}\n className={cn(\"text-lg font-semibold\", className)}\n {...props}\n />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Description\n ref={ref}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n))\nAlertDialogDescription.displayName =\n AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Action>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Action\n ref={ref}\n className={cn(buttonVariants(), className)}\n {...props}\n />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Cancel\n ref={ref}\n className={cn(\n buttonVariants({ variant: \"outline\" }),\n \"mt-2 sm:mt-0\",\n className\n )}\n {...props}\n />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n AlertDialog,\n AlertDialogPortal,\n AlertDialogOverlay,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n}\n",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Overlay\n className={cn(\n \"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n className\n )}\n {...props}\n ref={ref}\n />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <AlertDialogPortal>\n <AlertDialogOverlay />\n <AlertDialogPrimitive.Content\n ref={ref}\n className={cn(\n \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n className\n )}\n {...props}\n />\n </AlertDialogPortal>\n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"flex flex-col space-y-2 text-center sm:text-left\",\n className\n )}\n {...props}\n />\n)\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nconst AlertDialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n className\n )}\n {...props}\n />\n)\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Title\n ref={ref}\n className={cn(\"text-lg font-semibold\", className)}\n {...props}\n />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Description\n ref={ref}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n))\nAlertDialogDescription.displayName =\n AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Action>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Action\n ref={ref}\n className={cn(buttonVariants(), className)}\n {...props}\n />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Cancel\n ref={ref}\n className={cn(\n buttonVariants({ variant: \"outline\" }),\n \"mt-2 sm:mt-0\",\n className\n )}\n {...props}\n />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n AlertDialog,\n AlertDialogPortal,\n AlertDialogOverlay,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n}\n",
|
||||
"type": "registry:ui",
|
||||
"target": "components/ui/alert-dialog.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -6,7 +6,7 @@
|
||||
"path": "ui/alert.tsx",
|
||||
"content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n <div\n ref={ref}\n role=\"alert\"\n className={cn(alertVariants({ variant }), className)}\n {...props}\n />\n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n <h5\n ref={ref}\n className={cn(\"mb-1 font-medium leading-none tracking-tight\", className)}\n {...props}\n />\n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"text-sm [&_p]:leading-relaxed\", className)}\n {...props}\n />\n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n",
|
||||
"type": "registry:ui",
|
||||
"target": "components/ui/alert.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/aspect-ratio-demo.tsx",
|
||||
"content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/components/ui/aspect-ratio\"\n\nexport default function AspectRatioDemo() {\n return (\n <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n <Image\n src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n alt=\"Photo by Drew Beamer\"\n fill\n className=\"h-full w-full rounded-md object-cover\"\n />\n </AspectRatio>\n )\n}\n",
|
||||
"content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/default/ui/aspect-ratio\"\n\nexport default function AspectRatioDemo() {\n return (\n <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n <Image\n src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n alt=\"Photo by Drew Beamer\"\n fill\n className=\"h-full w-full rounded-md object-cover\"\n />\n </AspectRatio>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/aspect-ratio-demo.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,7 +9,7 @@
|
||||
"path": "ui/aspect-ratio.tsx",
|
||||
"content": "\"use client\"\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\"\n\nconst AspectRatio = AspectRatioPrimitive.Root\n\nexport { AspectRatio }\n",
|
||||
"type": "registry:ui",
|
||||
"target": "components/ui/aspect-ratio.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/avatar-demo.tsx",
|
||||
"content": "import {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/components/ui/avatar\"\n\nexport default function AvatarDemo() {\n return (\n <Avatar>\n <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n <AvatarFallback>CN</AvatarFallback>\n </Avatar>\n )\n}\n",
|
||||
"content": "import {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nexport default function AvatarDemo() {\n return (\n <Avatar>\n <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n <AvatarFallback>CN</AvatarFallback>\n </Avatar>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/avatar-demo.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,7 +9,7 @@
|
||||
"path": "ui/avatar.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Avatar = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n <AvatarPrimitive.Root\n ref={ref}\n className={cn(\n \"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full\",\n className\n )}\n {...props}\n />\n))\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Image>,\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n <AvatarPrimitive.Image\n ref={ref}\n className={cn(\"aspect-square h-full w-full\", className)}\n {...props}\n />\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Fallback>,\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n <AvatarPrimitive.Fallback\n ref={ref}\n className={cn(\n \"flex h-full w-full items-center justify-center rounded-full bg-muted\",\n className\n )}\n {...props}\n />\n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n",
|
||||
"type": "registry:ui",
|
||||
"target": "components/ui/avatar.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/badge-demo.tsx",
|
||||
"content": "import { Badge } from \"@/components/ui/badge\"\n\nexport default function BadgeDemo() {\n return <Badge>Badge</Badge>\n}\n",
|
||||
"content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeDemo() {\n return <Badge>Badge</Badge>\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/badge-demo.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/badge-destructive.tsx",
|
||||
"content": "import { Badge } from \"@/components/ui/badge\"\n\nexport default function BadgeDestructive() {\n return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
|
||||
"content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeDestructive() {\n return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/badge-destructive.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/badge-outline.tsx",
|
||||
"content": "import { Badge } from \"@/components/ui/badge\"\n\nexport default function BadgeOutline() {\n return <Badge variant=\"outline\">Outline</Badge>\n}\n",
|
||||
"content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeOutline() {\n return <Badge variant=\"outline\">Outline</Badge>\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/badge-outline.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/badge-secondary.tsx",
|
||||
"content": "import { Badge } from \"@/components/ui/badge\"\n\nexport default function BadgeSecondary() {\n return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
|
||||
"content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeSecondary() {\n return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/badge-secondary.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -6,7 +6,7 @@
|
||||
"path": "ui/badge.tsx",
|
||||
"content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n destructive:\n \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\n outline: \"text-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n return (\n <div className={cn(badgeVariants({ variant }), className)} {...props} />\n )\n}\n\nexport { Badge, badgeVariants }\n",
|
||||
"type": "registry:ui",
|
||||
"target": "components/ui/badge.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/breadcrumb-demo.tsx",
|
||||
"content": "import {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nexport default function BreadcrumbDemo() {\n return (\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <DropdownMenu>\n <DropdownMenuTrigger className=\"flex items-center gap-1\">\n <BreadcrumbEllipsis className=\"h-4 w-4\" />\n <span className=\"sr-only\">Toggle menu</span>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem>Documentation</DropdownMenuItem>\n <DropdownMenuItem>Themes</DropdownMenuItem>\n <DropdownMenuItem>GitHub</DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink href=\"/docs/components\">Components</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n )\n}\n",
|
||||
"content": "import {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport default function BreadcrumbDemo() {\n return (\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <DropdownMenu>\n <DropdownMenuTrigger className=\"flex items-center gap-1\">\n <BreadcrumbEllipsis className=\"h-4 w-4\" />\n <span className=\"sr-only\">Toggle menu</span>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem>Documentation</DropdownMenuItem>\n <DropdownMenuItem>Themes</DropdownMenuItem>\n <DropdownMenuItem>GitHub</DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink href=\"/docs/components\">Components</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/breadcrumb-demo.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/breadcrumb-dropdown.tsx",
|
||||
"content": "import { ChevronDown, Slash } from \"lucide-react\"\n\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nexport default function BreadcrumbWithDropdown() {\n return (\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator>\n <Slash />\n </BreadcrumbSeparator>\n <BreadcrumbItem>\n <DropdownMenu>\n <DropdownMenuTrigger className=\"flex items-center gap-1\">\n Components\n <ChevronDown className=\"h-4 w-4\" />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem>Documentation</DropdownMenuItem>\n <DropdownMenuItem>Themes</DropdownMenuItem>\n <DropdownMenuItem>GitHub</DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </BreadcrumbItem>\n <BreadcrumbSeparator>\n <Slash />\n </BreadcrumbSeparator>\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n )\n}\n",
|
||||
"content": "import { ChevronDown, Slash } from \"lucide-react\"\n\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport default function BreadcrumbWithDropdown() {\n return (\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator>\n <Slash />\n </BreadcrumbSeparator>\n <BreadcrumbItem>\n <DropdownMenu>\n <DropdownMenuTrigger className=\"flex items-center gap-1\">\n Components\n <ChevronDown className=\"h-4 w-4\" />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem>Documentation</DropdownMenuItem>\n <DropdownMenuItem>Themes</DropdownMenuItem>\n <DropdownMenuItem>GitHub</DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </BreadcrumbItem>\n <BreadcrumbSeparator>\n <Slash />\n </BreadcrumbSeparator>\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/breadcrumb-dropdown.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/breadcrumb-ellipsis.tsx",
|
||||
"content": "import Link from \"next/link\"\n\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\n\nexport default function BreadcrumbCollapsed() {\n return (\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink asChild>\n <Link href=\"/\">Home</Link>\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbEllipsis />\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink asChild>\n <Link href=\"/docs/components\">Components</Link>\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n )\n}\n",
|
||||
"content": "import Link from \"next/link\"\n\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\n\nexport default function BreadcrumbCollapsed() {\n return (\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink asChild>\n <Link href=\"/\">Home</Link>\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbEllipsis />\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink asChild>\n <Link href=\"/docs/components\">Components</Link>\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/breadcrumb-ellipsis.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/breadcrumb-link.tsx",
|
||||
"content": "import Link from \"next/link\"\n\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n return (\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink>\n <Link href=\"/\">Home</Link>\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink>\n <Link href=\"/components\">Components</Link>\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n )\n}\n",
|
||||
"content": "import Link from \"next/link\"\n\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n return (\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink>\n <Link href=\"/\">Home</Link>\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink>\n <Link href=\"/components\">Components</Link>\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/breadcrumb-link.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/breadcrumb-responsive.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/components/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nconst items = [\n { href: \"#\", label: \"Home\" },\n { href: \"#\", label: \"Documentation\" },\n { href: \"#\", label: \"Building Your Application\" },\n { href: \"#\", label: \"Data Fetching\" },\n { label: \"Caching and Revalidating\" },\n]\n\nconst ITEMS_TO_DISPLAY = 3\n\nexport default function BreadcrumbResponsive() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n return (\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href={items[0].href}>{items[0].label}</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n {items.length > ITEMS_TO_DISPLAY ? (\n <>\n <BreadcrumbItem>\n {isDesktop ? (\n <DropdownMenu open={open} onOpenChange={setOpen}>\n <DropdownMenuTrigger\n className=\"flex items-center gap-1\"\n aria-label=\"Toggle menu\"\n >\n <BreadcrumbEllipsis className=\"h-4 w-4\" />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n {items.slice(1, -2).map((item, index) => (\n <DropdownMenuItem key={index}>\n <Link href={item.href ? item.href : \"#\"}>\n {item.label}\n </Link>\n </DropdownMenuItem>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n ) : (\n <Drawer open={open} onOpenChange={setOpen}>\n <DrawerTrigger aria-label=\"Toggle Menu\">\n <BreadcrumbEllipsis className=\"h-4 w-4\" />\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader className=\"text-left\">\n <DrawerTitle>Navigate to</DrawerTitle>\n <DrawerDescription>\n Select a page to navigate to.\n </DrawerDescription>\n </DrawerHeader>\n <div className=\"grid gap-1 px-4\">\n {items.slice(1, -2).map((item, index) => (\n <Link\n key={index}\n href={item.href ? item.href : \"#\"}\n className=\"py-1 text-sm\"\n >\n {item.label}\n </Link>\n ))}\n </div>\n <DrawerFooter className=\"pt-4\">\n <DrawerClose asChild>\n <Button variant=\"outline\">Close</Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n )}\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n </>\n ) : null}\n {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\n <BreadcrumbItem key={index}>\n {item.href ? (\n <>\n <BreadcrumbLink\n asChild\n className=\"max-w-20 truncate md:max-w-none\"\n >\n <Link href={item.href}>{item.label}</Link>\n </BreadcrumbLink>\n <BreadcrumbSeparator />\n </>\n ) : (\n <BreadcrumbPage className=\"max-w-20 truncate md:max-w-none\">\n {item.label}\n </BreadcrumbPage>\n )}\n </BreadcrumbItem>\n ))}\n </BreadcrumbList>\n </Breadcrumb>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nconst items = [\n { href: \"#\", label: \"Home\" },\n { href: \"#\", label: \"Documentation\" },\n { href: \"#\", label: \"Building Your Application\" },\n { href: \"#\", label: \"Data Fetching\" },\n { label: \"Caching and Revalidating\" },\n]\n\nconst ITEMS_TO_DISPLAY = 3\n\nexport default function BreadcrumbResponsive() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n return (\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href={items[0].href}>{items[0].label}</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n {items.length > ITEMS_TO_DISPLAY ? (\n <>\n <BreadcrumbItem>\n {isDesktop ? (\n <DropdownMenu open={open} onOpenChange={setOpen}>\n <DropdownMenuTrigger\n className=\"flex items-center gap-1\"\n aria-label=\"Toggle menu\"\n >\n <BreadcrumbEllipsis className=\"h-4 w-4\" />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n {items.slice(1, -2).map((item, index) => (\n <DropdownMenuItem key={index}>\n <Link href={item.href ? item.href : \"#\"}>\n {item.label}\n </Link>\n </DropdownMenuItem>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n ) : (\n <Drawer open={open} onOpenChange={setOpen}>\n <DrawerTrigger aria-label=\"Toggle Menu\">\n <BreadcrumbEllipsis className=\"h-4 w-4\" />\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader className=\"text-left\">\n <DrawerTitle>Navigate to</DrawerTitle>\n <DrawerDescription>\n Select a page to navigate to.\n </DrawerDescription>\n </DrawerHeader>\n <div className=\"grid gap-1 px-4\">\n {items.slice(1, -2).map((item, index) => (\n <Link\n key={index}\n href={item.href ? item.href : \"#\"}\n className=\"py-1 text-sm\"\n >\n {item.label}\n </Link>\n ))}\n </div>\n <DrawerFooter className=\"pt-4\">\n <DrawerClose asChild>\n <Button variant=\"outline\">Close</Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n )}\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n </>\n ) : null}\n {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\n <BreadcrumbItem key={index}>\n {item.href ? (\n <>\n <BreadcrumbLink\n asChild\n className=\"max-w-20 truncate md:max-w-none\"\n >\n <Link href={item.href}>{item.label}</Link>\n </BreadcrumbLink>\n <BreadcrumbSeparator />\n </>\n ) : (\n <BreadcrumbPage className=\"max-w-20 truncate md:max-w-none\">\n {item.label}\n </BreadcrumbPage>\n )}\n </BreadcrumbItem>\n ))}\n </BreadcrumbList>\n </Breadcrumb>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/breadcrumb-responsive.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/breadcrumb-separator.tsx",
|
||||
"content": "import { Slash } from \"lucide-react\"\n\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n return (\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator>\n <Slash />\n </BreadcrumbSeparator>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator>\n <Slash />\n </BreadcrumbSeparator>\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n )\n}\n",
|
||||
"content": "import { Slash } from \"lucide-react\"\n\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n return (\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator>\n <Slash />\n </BreadcrumbSeparator>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator>\n <Slash />\n </BreadcrumbSeparator>\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/breadcrumb-separator.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,7 +9,7 @@
|
||||
"path": "ui/breadcrumb.tsx",
|
||||
"content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Breadcrumb = React.forwardRef<\n HTMLElement,\n React.ComponentPropsWithoutRef<\"nav\"> & {\n separator?: React.ReactNode\n }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = \"Breadcrumb\"\n\nconst BreadcrumbList = React.forwardRef<\n HTMLOListElement,\n React.ComponentPropsWithoutRef<\"ol\">\n>(({ className, ...props }, ref) => (\n <ol\n ref={ref}\n className={cn(\n \"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5\",\n className\n )}\n {...props}\n />\n))\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<\n HTMLLIElement,\n React.ComponentPropsWithoutRef<\"li\">\n>(({ className, ...props }, ref) => (\n <li\n ref={ref}\n className={cn(\"inline-flex items-center gap-1.5\", className)}\n {...props}\n />\n))\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nconst BreadcrumbLink = React.forwardRef<\n HTMLAnchorElement,\n React.ComponentPropsWithoutRef<\"a\"> & {\n asChild?: boolean\n }\n>(({ asChild, className, ...props }, ref) => {\n const Comp = asChild ? Slot : \"a\"\n\n return (\n <Comp\n ref={ref}\n className={cn(\"transition-colors hover:text-foreground\", className)}\n {...props}\n />\n )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<\n HTMLSpanElement,\n React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n <span\n ref={ref}\n role=\"link\"\n aria-disabled=\"true\"\n aria-current=\"page\"\n className={cn(\"font-normal text-foreground\", className)}\n {...props}\n />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nconst BreadcrumbSeparator = ({\n children,\n className,\n ...props\n}: React.ComponentProps<\"li\">) => (\n <li\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn(\"[&>svg]:w-3.5 [&>svg]:h-3.5\", className)}\n {...props}\n >\n {children ?? <ChevronRight />}\n </li>\n)\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nconst BreadcrumbEllipsis = ({\n className,\n ...props\n}: React.ComponentProps<\"span\">) => (\n <span\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n {...props}\n >\n <MoreHorizontal className=\"h-4 w-4\" />\n <span className=\"sr-only\">More</span>\n </span>\n)\nBreadcrumbEllipsis.displayName = \"BreadcrumbElipssis\"\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n}\n",
|
||||
"type": "registry:ui",
|
||||
"target": "components/ui/breadcrumb.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/button-as-child.tsx",
|
||||
"content": "import Link from \"next/link\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ButtonAsChild() {\n return (\n <Button asChild>\n <Link href=\"/login\">Login</Link>\n </Button>\n )\n}\n",
|
||||
"content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonAsChild() {\n return (\n <Button asChild>\n <Link href=\"/login\">Login</Link>\n </Button>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/button-as-child.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/button-demo.tsx",
|
||||
"content": "import { Button } from \"@/components/ui/button\"\n\nexport default function ButtonDemo() {\n return <Button>Button</Button>\n}\n",
|
||||
"content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonDemo() {\n return <Button>Button</Button>\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/button-demo.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/button-destructive.tsx",
|
||||
"content": "import { Button } from \"@/components/ui/button\"\n\nexport default function ButtonDestructive() {\n return <Button variant=\"destructive\">Destructive</Button>\n}\n",
|
||||
"content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonDestructive() {\n return <Button variant=\"destructive\">Destructive</Button>\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/button-destructive.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/button-ghost.tsx",
|
||||
"content": "import { Button } from \"@/components/ui/button\"\n\nexport default function ButtonGhost() {\n return <Button variant=\"ghost\">Ghost</Button>\n}\n",
|
||||
"content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonGhost() {\n return <Button variant=\"ghost\">Ghost</Button>\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/button-ghost.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/button-icon.tsx",
|
||||
"content": "import { ChevronRight } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ButtonIcon() {\n return (\n <Button variant=\"outline\" size=\"icon\">\n <ChevronRight className=\"h-4 w-4\" />\n </Button>\n )\n}\n",
|
||||
"content": "import { ChevronRight } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonIcon() {\n return (\n <Button variant=\"outline\" size=\"icon\">\n <ChevronRight className=\"h-4 w-4\" />\n </Button>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/button-icon.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/button-link.tsx",
|
||||
"content": "import { Button } from \"@/components/ui/button\"\n\nexport default function ButtonLink() {\n return <Button variant=\"link\">Link</Button>\n}\n",
|
||||
"content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonLink() {\n return <Button variant=\"link\">Link</Button>\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/button-link.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/button-loading.tsx",
|
||||
"content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ButtonLoading() {\n return (\n <Button disabled>\n <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />\n Please wait\n </Button>\n )\n}\n",
|
||||
"content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonLoading() {\n return (\n <Button disabled>\n <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />\n Please wait\n </Button>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/button-loading.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/button-outline.tsx",
|
||||
"content": "import { Button } from \"@/components/ui/button\"\n\nexport default function ButtonOutline() {\n return <Button variant=\"outline\">Outline</Button>\n}\n",
|
||||
"content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonOutline() {\n return <Button variant=\"outline\">Outline</Button>\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/button-outline.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/button-secondary.tsx",
|
||||
"content": "import { Button } from \"@/components/ui/button\"\n\nexport default function ButtonSecondary() {\n return <Button variant=\"secondary\">Secondary</Button>\n}\n",
|
||||
"content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonSecondary() {\n return <Button variant=\"secondary\">Secondary</Button>\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/button-secondary.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/button-with-icon.tsx",
|
||||
"content": "import { Mail } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport default function ButtonWithIcon() {\n return (\n <Button>\n <Mail /> Login with Email\n </Button>\n )\n}\n",
|
||||
"content": "import { Mail } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonWithIcon() {\n return (\n <Button>\n <Mail /> Login with Email\n </Button>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/button-with-icon.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,7 +9,7 @@
|
||||
"path": "ui/button.tsx",
|
||||
"content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n",
|
||||
"type": "registry:ui",
|
||||
"target": "components/ui/button.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/calendar-demo.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/components/ui/calendar\"\n\nexport default function CalendarDemo() {\n const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n return (\n <Calendar\n mode=\"single\"\n selected={date}\n onSelect={setDate}\n className=\"rounded-md border\"\n />\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport default function CalendarDemo() {\n const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n return (\n <Calendar\n mode=\"single\"\n selected={date}\n onSelect={setDate}\n className=\"rounded-md border\"\n />\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/calendar-demo.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/calendar-form.tsx",
|
||||
"content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/hooks/use-toast\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n Form,\n FormControl,\n FormDescription,\n FormField,\n FormItem,\n FormLabel,\n FormMessage,\n} from \"@/components/ui/form\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nconst FormSchema = z.object({\n dob: z.date({\n required_error: \"A date of birth is required.\",\n }),\n})\n\nexport default function CalendarForm() {\n const form = useForm<z.infer<typeof FormSchema>>({\n resolver: zodResolver(FormSchema),\n })\n\n function onSubmit(data: z.infer<typeof FormSchema>) {\n toast({\n title: \"You submitted the following values:\",\n description: (\n <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n </pre>\n ),\n })\n }\n\n return (\n <Form {...form}>\n <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n <FormField\n control={form.control}\n name=\"dob\"\n render={({ field }) => (\n <FormItem className=\"flex flex-col\">\n <FormLabel>Date of birth</FormLabel>\n <Popover>\n <PopoverTrigger asChild>\n <FormControl>\n <Button\n variant={\"outline\"}\n className={cn(\n \"w-[240px] pl-3 text-left font-normal\",\n !field.value && \"text-muted-foreground\"\n )}\n >\n {field.value ? (\n format(field.value, \"PPP\")\n ) : (\n <span>Pick a date</span>\n )}\n <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n </Button>\n </FormControl>\n </PopoverTrigger>\n <PopoverContent className=\"w-auto p-0\" align=\"start\">\n <Calendar\n mode=\"single\"\n selected={field.value}\n onSelect={field.onChange}\n disabled={(date) =>\n date > new Date() || date < new Date(\"1900-01-01\")\n }\n initialFocus\n />\n </PopoverContent>\n </Popover>\n <FormDescription>\n Your date of birth is used to calculate your age.\n </FormDescription>\n <FormMessage />\n </FormItem>\n )}\n />\n <Button type=\"submit\">Submit</Button>\n </form>\n </Form>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n Form,\n FormControl,\n FormDescription,\n FormField,\n FormItem,\n FormLabel,\n FormMessage,\n} from \"@/registry/default/ui/form\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst FormSchema = z.object({\n dob: z.date({\n required_error: \"A date of birth is required.\",\n }),\n})\n\nexport default function CalendarForm() {\n const form = useForm<z.infer<typeof FormSchema>>({\n resolver: zodResolver(FormSchema),\n })\n\n function onSubmit(data: z.infer<typeof FormSchema>) {\n toast({\n title: \"You submitted the following values:\",\n description: (\n <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n </pre>\n ),\n })\n }\n\n return (\n <Form {...form}>\n <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n <FormField\n control={form.control}\n name=\"dob\"\n render={({ field }) => (\n <FormItem className=\"flex flex-col\">\n <FormLabel>Date of birth</FormLabel>\n <Popover>\n <PopoverTrigger asChild>\n <FormControl>\n <Button\n variant={\"outline\"}\n className={cn(\n \"w-[240px] pl-3 text-left font-normal\",\n !field.value && \"text-muted-foreground\"\n )}\n >\n {field.value ? (\n format(field.value, \"PPP\")\n ) : (\n <span>Pick a date</span>\n )}\n <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n </Button>\n </FormControl>\n </PopoverTrigger>\n <PopoverContent className=\"w-auto p-0\" align=\"start\">\n <Calendar\n mode=\"single\"\n selected={field.value}\n onSelect={field.onChange}\n disabled={(date) =>\n date > new Date() || date < new Date(\"1900-01-01\")\n }\n initialFocus\n />\n </PopoverContent>\n </Popover>\n <FormDescription>\n Your date of birth is used to calculate your age.\n </FormDescription>\n <FormMessage />\n </FormItem>\n )}\n />\n <Button type=\"submit\">Submit</Button>\n </form>\n </Form>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/calendar-form.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -11,9 +11,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/calendar.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n className={cn(\"p-3\", className)}\n classNames={{\n months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n month: \"space-y-4\",\n caption: \"flex justify-center pt-1 relative items-center\",\n caption_label: \"text-sm font-medium\",\n nav: \"space-x-1 flex items-center\",\n nav_button: cn(\n buttonVariants({ variant: \"outline\" }),\n \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n ),\n nav_button_previous: \"absolute left-1\",\n nav_button_next: \"absolute right-1\",\n table: \"w-full border-collapse space-y-1\",\n head_row: \"flex\",\n head_cell:\n \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n row: \"flex w-full mt-2\",\n cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n day: cn(\n buttonVariants({ variant: \"ghost\" }),\n \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n ),\n day_range_end: \"day-range-end\",\n day_selected:\n \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n day_today: \"bg-accent text-accent-foreground\",\n day_outside:\n \"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n day_disabled: \"text-muted-foreground opacity-50\",\n day_range_middle:\n \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n day_hidden: \"invisible\",\n ...classNames,\n }}\n components={{\n IconLeft: ({ ...props }) => <ChevronLeft className=\"h-4 w-4\" />,\n IconRight: ({ ...props }) => <ChevronRight className=\"h-4 w-4\" />,\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n className={cn(\"p-3\", className)}\n classNames={{\n months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n month: \"space-y-4\",\n caption: \"flex justify-center pt-1 relative items-center\",\n caption_label: \"text-sm font-medium\",\n nav: \"space-x-1 flex items-center\",\n nav_button: cn(\n buttonVariants({ variant: \"outline\" }),\n \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n ),\n nav_button_previous: \"absolute left-1\",\n nav_button_next: \"absolute right-1\",\n table: \"w-full border-collapse space-y-1\",\n head_row: \"flex\",\n head_cell:\n \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n row: \"flex w-full mt-2\",\n cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n day: cn(\n buttonVariants({ variant: \"ghost\" }),\n \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n ),\n day_range_end: \"day-range-end\",\n day_selected:\n \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n day_today: \"bg-accent text-accent-foreground\",\n day_outside:\n \"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n day_disabled: \"text-muted-foreground opacity-50\",\n day_range_middle:\n \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n day_hidden: \"invisible\",\n ...classNames,\n }}\n components={{\n IconLeft: ({ ...props }) => <ChevronLeft className=\"h-4 w-4\" />,\n IconRight: ({ ...props }) => <ChevronRight className=\"h-4 w-4\" />,\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
|
||||
"type": "registry:ui",
|
||||
"target": "components/ui/calendar.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/card-demo.tsx",
|
||||
"content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport { Switch } from \"@/components/ui/switch\"\n\nconst notifications = [\n {\n title: \"Your call has been confirmed.\",\n description: \"1 hour ago\",\n },\n {\n title: \"You have a new message!\",\n description: \"1 hour ago\",\n },\n {\n title: \"Your subscription is expiring soon!\",\n description: \"2 hours ago\",\n },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport default function CardDemo({ className, ...props }: CardProps) {\n return (\n <Card className={cn(\"w-[380px]\", className)} {...props}>\n <CardHeader>\n <CardTitle>Notifications</CardTitle>\n <CardDescription>You have 3 unread messages.</CardDescription>\n </CardHeader>\n <CardContent className=\"grid gap-4\">\n <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n <BellRing />\n <div className=\"flex-1 space-y-1\">\n <p className=\"text-sm font-medium leading-none\">\n Push Notifications\n </p>\n <p className=\"text-sm text-muted-foreground\">\n Send notifications to device.\n </p>\n </div>\n <Switch />\n </div>\n <div>\n {notifications.map((notification, index) => (\n <div\n key={index}\n className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n >\n <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n <div className=\"space-y-1\">\n <p className=\"text-sm font-medium leading-none\">\n {notification.title}\n </p>\n <p className=\"text-sm text-muted-foreground\">\n {notification.description}\n </p>\n </div>\n </div>\n ))}\n </div>\n </CardContent>\n <CardFooter>\n <Button className=\"w-full\">\n <Check /> Mark all as read\n </Button>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nconst notifications = [\n {\n title: \"Your call has been confirmed.\",\n description: \"1 hour ago\",\n },\n {\n title: \"You have a new message!\",\n description: \"1 hour ago\",\n },\n {\n title: \"Your subscription is expiring soon!\",\n description: \"2 hours ago\",\n },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport default function CardDemo({ className, ...props }: CardProps) {\n return (\n <Card className={cn(\"w-[380px]\", className)} {...props}>\n <CardHeader>\n <CardTitle>Notifications</CardTitle>\n <CardDescription>You have 3 unread messages.</CardDescription>\n </CardHeader>\n <CardContent className=\"grid gap-4\">\n <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n <BellRing />\n <div className=\"flex-1 space-y-1\">\n <p className=\"text-sm font-medium leading-none\">\n Push Notifications\n </p>\n <p className=\"text-sm text-muted-foreground\">\n Send notifications to device.\n </p>\n </div>\n <Switch />\n </div>\n <div>\n {notifications.map((notification, index) => (\n <div\n key={index}\n className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n >\n <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n <div className=\"space-y-1\">\n <p className=\"text-sm font-medium leading-none\">\n {notification.title}\n </p>\n <p className=\"text-sm text-muted-foreground\">\n {notification.description}\n </p>\n </div>\n </div>\n ))}\n </div>\n </CardContent>\n <CardFooter>\n <Button className=\"w-full\">\n <Check /> Mark all as read\n </Button>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/card-demo.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -11,9 +11,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/card-with-form.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\n\nexport default function CardWithForm() {\n return (\n <Card className=\"w-[350px]\">\n <CardHeader>\n <CardTitle>Create project</CardTitle>\n <CardDescription>Deploy your new project in one-click.</CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <div className=\"grid w-full items-center gap-4\">\n <div className=\"flex flex-col space-y-1.5\">\n <Label htmlFor=\"name\">Name</Label>\n <Input id=\"name\" placeholder=\"Name of your project\" />\n </div>\n <div className=\"flex flex-col space-y-1.5\">\n <Label htmlFor=\"framework\">Framework</Label>\n <Select>\n <SelectTrigger id=\"framework\">\n <SelectValue placeholder=\"Select\" />\n </SelectTrigger>\n <SelectContent position=\"popper\">\n <SelectItem value=\"next\">Next.js</SelectItem>\n <SelectItem value=\"sveltekit\">SvelteKit</SelectItem>\n <SelectItem value=\"astro\">Astro</SelectItem>\n <SelectItem value=\"nuxt\">Nuxt.js</SelectItem>\n </SelectContent>\n </Select>\n </div>\n </div>\n </form>\n </CardContent>\n <CardFooter className=\"flex justify-between\">\n <Button variant=\"outline\">Cancel</Button>\n <Button>Deploy</Button>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "import * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport default function CardWithForm() {\n return (\n <Card className=\"w-[350px]\">\n <CardHeader>\n <CardTitle>Create project</CardTitle>\n <CardDescription>Deploy your new project in one-click.</CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <div className=\"grid w-full items-center gap-4\">\n <div className=\"flex flex-col space-y-1.5\">\n <Label htmlFor=\"name\">Name</Label>\n <Input id=\"name\" placeholder=\"Name of your project\" />\n </div>\n <div className=\"flex flex-col space-y-1.5\">\n <Label htmlFor=\"framework\">Framework</Label>\n <Select>\n <SelectTrigger id=\"framework\">\n <SelectValue placeholder=\"Select\" />\n </SelectTrigger>\n <SelectContent position=\"popper\">\n <SelectItem value=\"next\">Next.js</SelectItem>\n <SelectItem value=\"sveltekit\">SvelteKit</SelectItem>\n <SelectItem value=\"astro\">Astro</SelectItem>\n <SelectItem value=\"nuxt\">Nuxt.js</SelectItem>\n </SelectContent>\n </Select>\n </div>\n </div>\n </form>\n </CardContent>\n <CardFooter className=\"flex justify-between\">\n <Button variant=\"outline\">Cancel</Button>\n <Button>Deploy</Button>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/card-with-form.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -6,7 +6,7 @@
|
||||
"path": "ui/card.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n \"rounded-lg border bg-card text-card-foreground shadow-sm\",\n className\n )}\n {...props}\n />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n {...props}\n />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n <h3\n ref={ref}\n className={cn(\n \"text-2xl font-semibold leading-none tracking-tight\",\n className\n )}\n {...props}\n />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"flex items-center p-6 pt-0\", className)}\n {...props}\n />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
|
||||
"type": "registry:ui",
|
||||
"target": "components/ui/card.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/carousel-api.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n type CarouselApi,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselDApiDemo() {\n const [api, setApi] = React.useState<CarouselApi>()\n const [current, setCurrent] = React.useState(0)\n const [count, setCount] = React.useState(0)\n\n React.useEffect(() => {\n if (!api) {\n return\n }\n\n setCount(api.scrollSnapList().length)\n setCurrent(api.selectedScrollSnap() + 1)\n\n api.on(\"select\", () => {\n setCurrent(api.selectedScrollSnap() + 1)\n })\n }, [api])\n\n return (\n <div className=\"mx-auto max-w-xs\">\n <Carousel setApi={setApi} className=\"w-full max-w-xs\">\n <CarouselContent>\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index}>\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-4xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n </Carousel>\n <div className=\"py-2 text-center text-sm text-muted-foreground\">\n Slide {current} of {count}\n </div>\n </div>\n )\n}\n",
|
||||
"content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n type CarouselApi,\n} from \"@/registry/default/ui/carousel\"\n\nexport default function CarouselDApiDemo() {\n const [api, setApi] = React.useState<CarouselApi>()\n const [current, setCurrent] = React.useState(0)\n const [count, setCount] = React.useState(0)\n\n React.useEffect(() => {\n if (!api) {\n return\n }\n\n setCount(api.scrollSnapList().length)\n setCurrent(api.selectedScrollSnap() + 1)\n\n api.on(\"select\", () => {\n setCurrent(api.selectedScrollSnap() + 1)\n })\n }, [api])\n\n return (\n <div className=\"mx-auto max-w-xs\">\n <Carousel setApi={setApi} className=\"w-full max-w-xs\">\n <CarouselContent>\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index}>\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-4xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n </Carousel>\n <div className=\"py-2 text-center text-sm text-muted-foreground\">\n Slide {current} of {count}\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/carousel-api.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/carousel-demo.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselDemo() {\n return (\n <Carousel className=\"w-full max-w-xs\">\n <CarouselContent>\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index}>\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-4xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n </Carousel>\n )\n}\n",
|
||||
"content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport default function CarouselDemo() {\n return (\n <Carousel className=\"w-full max-w-xs\">\n <CarouselContent>\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index}>\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-4xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n </Carousel>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/carousel-demo.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/carousel-orientation.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselOrientation() {\n return (\n <Carousel\n opts={{\n align: \"start\",\n }}\n orientation=\"vertical\"\n className=\"w-full max-w-xs\"\n >\n <CarouselContent className=\"-mt-1 h-[200px]\">\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index} className=\"pt-1 md:basis-1/2\">\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex items-center justify-center p-6\">\n <span className=\"text-3xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n </Carousel>\n )\n}\n",
|
||||
"content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport default function CarouselOrientation() {\n return (\n <Carousel\n opts={{\n align: \"start\",\n }}\n orientation=\"vertical\"\n className=\"w-full max-w-xs\"\n >\n <CarouselContent className=\"-mt-1 h-[200px]\">\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index} className=\"pt-1 md:basis-1/2\">\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex items-center justify-center p-6\">\n <span className=\"text-3xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n </Carousel>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/carousel-orientation.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/carousel-plugin.tsx",
|
||||
"content": "import * as React from \"react\"\nimport Autoplay from \"embla-carousel-autoplay\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselPlugin() {\n const plugin = React.useRef(\n Autoplay({ delay: 2000, stopOnInteraction: true })\n )\n\n return (\n <Carousel\n plugins={[plugin.current]}\n className=\"w-full max-w-xs\"\n onMouseEnter={plugin.current.stop}\n onMouseLeave={plugin.current.reset}\n >\n <CarouselContent>\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index}>\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-4xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n </Carousel>\n )\n}\n",
|
||||
"content": "import * as React from \"react\"\nimport Autoplay from \"embla-carousel-autoplay\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport default function CarouselPlugin() {\n const plugin = React.useRef(\n Autoplay({ delay: 2000, stopOnInteraction: true })\n )\n\n return (\n <Carousel\n plugins={[plugin.current]}\n className=\"w-full max-w-xs\"\n onMouseEnter={plugin.current.stop}\n onMouseLeave={plugin.current.reset}\n >\n <CarouselContent>\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index}>\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-4xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n </Carousel>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/carousel-plugin.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/carousel-size.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselSize() {\n return (\n <Carousel\n opts={{\n align: \"start\",\n }}\n className=\"w-full max-w-sm\"\n >\n <CarouselContent>\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-3xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n </Carousel>\n )\n}\n",
|
||||
"content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport default function CarouselSize() {\n return (\n <Carousel\n opts={{\n align: \"start\",\n }}\n className=\"w-full max-w-sm\"\n >\n <CarouselContent>\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-3xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n </Carousel>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/carousel-size.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -7,9 +7,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/carousel-spacing.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/components/ui/carousel\"\n\nexport default function CarouselSpacing() {\n return (\n <Carousel className=\"w-full max-w-sm\">\n <CarouselContent className=\"-ml-1\">\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index} className=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-2xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n </Carousel>\n )\n}\n",
|
||||
"content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport default function CarouselSpacing() {\n return (\n <Carousel className=\"w-full max-w-sm\">\n <CarouselContent className=\"-ml-1\">\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index} className=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-2xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n </Carousel>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/carousel-spacing.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-area-axes.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Axes</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: -20,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <YAxis\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickCount={3}\n />\n <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"var(--color-mobile)\"\n fillOpacity={0.4}\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Axes</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: -20,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <YAxis\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickCount={3}\n />\n <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"var(--color-mobile)\"\n fillOpacity={0.4}\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-area-axes.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-area-default.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-area-default.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-area-gradient.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Gradient</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n <defs>\n <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop\n offset=\"5%\"\n stopColor=\"var(--color-desktop)\"\n stopOpacity={0.8}\n />\n <stop\n offset=\"95%\"\n stopColor=\"var(--color-desktop)\"\n stopOpacity={0.1}\n />\n </linearGradient>\n <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop\n offset=\"5%\"\n stopColor=\"var(--color-mobile)\"\n stopOpacity={0.8}\n />\n <stop\n offset=\"95%\"\n stopColor=\"var(--color-mobile)\"\n stopOpacity={0.1}\n />\n </linearGradient>\n </defs>\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"url(#fillMobile)\"\n fillOpacity={0.4}\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"url(#fillDesktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Gradient</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n <defs>\n <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop\n offset=\"5%\"\n stopColor=\"var(--color-desktop)\"\n stopOpacity={0.8}\n />\n <stop\n offset=\"95%\"\n stopColor=\"var(--color-desktop)\"\n stopOpacity={0.1}\n />\n </linearGradient>\n <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop\n offset=\"5%\"\n stopColor=\"var(--color-mobile)\"\n stopOpacity={0.8}\n />\n <stop\n offset=\"95%\"\n stopColor=\"var(--color-mobile)\"\n stopOpacity={0.1}\n />\n </linearGradient>\n </defs>\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"url(#fillMobile)\"\n fillOpacity={0.4}\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"url(#fillDesktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-area-gradient.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-area-icons.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n icon: TrendingDown,\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n icon: TrendingUp,\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Icons</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"var(--color-mobile)\"\n fillOpacity={0.4}\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n <ChartLegend content={<ChartLegendContent />} />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n icon: TrendingDown,\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n icon: TrendingUp,\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Icons</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"var(--color-mobile)\"\n fillOpacity={0.4}\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n <ChartLegend content={<ChartLegendContent />} />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-area-icons.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-area-legend.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Legend</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"var(--color-mobile)\"\n fillOpacity={0.4}\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n <ChartLegend content={<ChartLegendContent />} />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Legend</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"var(--color-mobile)\"\n fillOpacity={0.4}\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n <ChartLegend content={<ChartLegendContent />} />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-area-legend.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-area-linear.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Linear</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"dot\" hideLabel />}\n />\n <Area\n dataKey=\"desktop\"\n type=\"linear\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Linear</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"dot\" hideLabel />}\n />\n <Area\n dataKey=\"desktop\"\n type=\"linear\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-area-linear.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-area-stacked-expand.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80, other: 45 },\n { month: \"February\", desktop: 305, mobile: 200, other: 100 },\n { month: \"March\", desktop: 237, mobile: 120, other: 150 },\n { month: \"April\", desktop: 73, mobile: 190, other: 50 },\n { month: \"May\", desktop: 209, mobile: 130, other: 100 },\n { month: \"June\", desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-3))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Stacked Expanded</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n top: 12,\n }}\n stackOffset=\"expand\"\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <Area\n dataKey=\"other\"\n type=\"natural\"\n fill=\"var(--color-other)\"\n fillOpacity={0.1}\n stroke=\"var(--color-other)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"var(--color-mobile)\"\n fillOpacity={0.4}\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80, other: 45 },\n { month: \"February\", desktop: 305, mobile: 200, other: 100 },\n { month: \"March\", desktop: 237, mobile: 120, other: 150 },\n { month: \"April\", desktop: 73, mobile: 190, other: 50 },\n { month: \"May\", desktop: 209, mobile: 130, other: 100 },\n { month: \"June\", desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-3))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Stacked Expanded</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n top: 12,\n }}\n stackOffset=\"expand\"\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <Area\n dataKey=\"other\"\n type=\"natural\"\n fill=\"var(--color-other)\"\n fillOpacity={0.1}\n stroke=\"var(--color-other)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"var(--color-mobile)\"\n fillOpacity={0.4}\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-area-stacked-expand.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-area-stacked.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Stacked</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"dot\" />}\n />\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"var(--color-mobile)\"\n fillOpacity={0.4}\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Stacked</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"dot\" />}\n />\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"var(--color-mobile)\"\n fillOpacity={0.4}\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-area-stacked.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-area-step.tsx",
|
||||
"content": "\"use client\"\n\nimport { Activity, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n icon: Activity,\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Step</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Area\n dataKey=\"desktop\"\n type=\"step\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { Activity, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n icon: Activity,\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Step</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Area\n dataKey=\"desktop\"\n type=\"step\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-area-step.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-bar-active.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Active</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"browser\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) =>\n chartConfig[value as keyof typeof chartConfig]?.label\n }\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Bar\n dataKey=\"visitors\"\n strokeWidth={2}\n radius={8}\n activeIndex={2}\n activeBar={({ ...props }) => {\n return (\n <Rectangle\n {...props}\n fillOpacity={0.8}\n stroke={props.payload.fill}\n strokeDasharray={4}\n strokeDashoffset={4}\n />\n )\n }}\n />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Active</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"browser\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) =>\n chartConfig[value as keyof typeof chartConfig]?.label\n }\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Bar\n dataKey=\"visitors\"\n strokeWidth={2}\n radius={8}\n activeIndex={2}\n activeBar={({ ...props }) => {\n return (\n <Rectangle\n {...props}\n fillOpacity={0.8}\n stroke={props.payload.fill}\n strokeDasharray={4}\n strokeDashoffset={4}\n />\n )\n }}\n />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-bar-active.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-bar-default.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8} />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8} />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-bar-default.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -4,9 +4,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/chart-bar-demo-axis.tsx",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/components/ui/chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n </BarChart>\n </ChartContainer>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n </BarChart>\n </ChartContainer>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/chart-bar-demo-axis.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -4,9 +4,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/chart-bar-demo-grid.tsx",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/components/ui/chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n </BarChart>\n </ChartContainer>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n </BarChart>\n </ChartContainer>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/chart-bar-demo-grid.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -4,9 +4,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/chart-bar-demo-legend.tsx",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n ChartConfig,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip content={<ChartTooltipContent />} />\n <ChartLegend content={<ChartLegendContent />} />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n </BarChart>\n </ChartContainer>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n ChartConfig,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip content={<ChartTooltipContent />} />\n <ChartLegend content={<ChartLegendContent />} />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n </BarChart>\n </ChartContainer>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/chart-bar-demo-legend.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -4,9 +4,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/chart-bar-demo-tooltip.tsx",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip content={<ChartTooltipContent />} />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n </BarChart>\n </ChartContainer>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip content={<ChartTooltipContent />} />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n </BarChart>\n </ChartContainer>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/chart-bar-demo-tooltip.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -4,9 +4,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "example/chart-bar-demo.tsx",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/components/ui/chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n <BarChart accessibilityLayer data={chartData}>\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n </BarChart>\n </ChartContainer>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n <BarChart accessibilityLayer data={chartData}>\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n </BarChart>\n </ChartContainer>\n )\n}\n",
|
||||
"type": "registry:example",
|
||||
"target": "components/chart-bar-demo.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-bar-horizontal.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Horizontal</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart\n accessibilityLayer\n data={chartData}\n layout=\"vertical\"\n margin={{\n left: -20,\n }}\n >\n <XAxis type=\"number\" dataKey=\"desktop\" hide />\n <YAxis\n dataKey=\"month\"\n type=\"category\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={5} />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Horizontal</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart\n accessibilityLayer\n data={chartData}\n layout=\"vertical\"\n margin={{\n left: -20,\n }}\n >\n <XAxis type=\"number\" dataKey=\"desktop\" hide />\n <YAxis\n dataKey=\"month\"\n type=\"category\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={5} />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-bar-horizontal.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-bar-label-custom.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n label: {\n color: \"hsl(var(--background))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Custom Label</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart\n accessibilityLayer\n data={chartData}\n layout=\"vertical\"\n margin={{\n right: 16,\n }}\n >\n <CartesianGrid horizontal={false} />\n <YAxis\n dataKey=\"month\"\n type=\"category\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n hide\n />\n <XAxis dataKey=\"desktop\" type=\"number\" hide />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <Bar\n dataKey=\"desktop\"\n layout=\"vertical\"\n fill=\"var(--color-desktop)\"\n radius={4}\n >\n <LabelList\n dataKey=\"month\"\n position=\"insideLeft\"\n offset={8}\n className=\"fill-[--color-label]\"\n fontSize={12}\n />\n <LabelList\n dataKey=\"desktop\"\n position=\"right\"\n offset={8}\n className=\"fill-foreground\"\n fontSize={12}\n />\n </Bar>\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n label: {\n color: \"hsl(var(--background))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Custom Label</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart\n accessibilityLayer\n data={chartData}\n layout=\"vertical\"\n margin={{\n right: 16,\n }}\n >\n <CartesianGrid horizontal={false} />\n <YAxis\n dataKey=\"month\"\n type=\"category\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n hide\n />\n <XAxis dataKey=\"desktop\" type=\"number\" hide />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <Bar\n dataKey=\"desktop\"\n layout=\"vertical\"\n fill=\"var(--color-desktop)\"\n radius={4}\n >\n <LabelList\n dataKey=\"month\"\n position=\"insideLeft\"\n offset={8}\n className=\"fill-[--color-label]\"\n fontSize={12}\n />\n <LabelList\n dataKey=\"desktop\"\n position=\"right\"\n offset={8}\n className=\"fill-foreground\"\n fontSize={12}\n />\n </Bar>\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-bar-label-custom.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-bar-label.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Label</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart\n accessibilityLayer\n data={chartData}\n margin={{\n top: 20,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8}>\n <LabelList\n position=\"top\"\n offset={12}\n className=\"fill-foreground\"\n fontSize={12}\n />\n </Bar>\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Label</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart\n accessibilityLayer\n data={chartData}\n margin={{\n top: 20,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8}>\n <LabelList\n position=\"top\"\n offset={12}\n className=\"fill-foreground\"\n fontSize={12}\n />\n </Bar>\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-bar-label.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-bar-mixed.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Mixed</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart\n accessibilityLayer\n data={chartData}\n layout=\"vertical\"\n margin={{\n left: 0,\n }}\n >\n <YAxis\n dataKey=\"browser\"\n type=\"category\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) =>\n chartConfig[value as keyof typeof chartConfig]?.label\n }\n />\n <XAxis dataKey=\"visitors\" type=\"number\" hide />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Bar dataKey=\"visitors\" layout=\"vertical\" radius={5} />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Mixed</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart\n accessibilityLayer\n data={chartData}\n layout=\"vertical\"\n margin={{\n left: 0,\n }}\n >\n <YAxis\n dataKey=\"browser\"\n type=\"category\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) =>\n chartConfig[value as keyof typeof chartConfig]?.label\n }\n />\n <XAxis dataKey=\"visitors\" type=\"number\" hide />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Bar dataKey=\"visitors\" layout=\"vertical\" radius={5} />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-bar-mixed.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-bar-multiple.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Multiple</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"dashed\" />}\n />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Multiple</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"dashed\" />}\n />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-bar-multiple.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-bar-negative.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", visitors: 186 },\n { month: \"February\", visitors: 205 },\n { month: \"March\", visitors: -207 },\n { month: \"April\", visitors: 173 },\n { month: \"May\", visitors: -209 },\n { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Negative</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel hideIndicator />}\n />\n <Bar dataKey=\"visitors\">\n <LabelList position=\"top\" dataKey=\"month\" fillOpacity={1} />\n {chartData.map((item) => (\n <Cell\n key={item.month}\n fill={\n item.visitors > 0\n ? \"hsl(var(--chart-1))\"\n : \"hsl(var(--chart-2))\"\n }\n />\n ))}\n </Bar>\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", visitors: 186 },\n { month: \"February\", visitors: 205 },\n { month: \"March\", visitors: -207 },\n { month: \"April\", visitors: 173 },\n { month: \"May\", visitors: -209 },\n { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Negative</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel hideIndicator />}\n />\n <Bar dataKey=\"visitors\">\n <LabelList position=\"top\" dataKey=\"month\" fillOpacity={1} />\n {chartData.map((item) => (\n <Cell\n key={item.month}\n fill={\n item.visitors > 0\n ? \"hsl(var(--chart-1))\"\n : \"hsl(var(--chart-2))\"\n }\n />\n ))}\n </Bar>\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-bar-negative.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-bar-stacked.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n <ChartLegend content={<ChartLegendContent />} />\n <Bar\n dataKey=\"desktop\"\n stackId=\"a\"\n fill=\"var(--color-desktop)\"\n radius={[0, 0, 4, 4]}\n />\n <Bar\n dataKey=\"mobile\"\n stackId=\"a\"\n fill=\"var(--color-mobile)\"\n radius={[4, 4, 0, 0]}\n />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n <ChartLegend content={<ChartLegendContent />} />\n <Bar\n dataKey=\"desktop\"\n stackId=\"a\"\n fill=\"var(--color-desktop)\"\n radius={[0, 0, 4, 4]}\n />\n <Bar\n dataKey=\"mobile\"\n stackId=\"a\"\n fill=\"var(--color-mobile)\"\n radius={[4, 4, 0, 0]}\n />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-bar-stacked.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-line-default.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Line\n dataKey=\"desktop\"\n type=\"natural\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={false}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Line\n dataKey=\"desktop\"\n type=\"natural\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={false}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-line-default.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-line-dots-colors.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Dot, Line, LineChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n color: \"hsl(var(--chart-2))\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Dots Colors</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n top: 24,\n left: 24,\n right: 24,\n }}\n >\n <CartesianGrid vertical={false} />\n <ChartTooltip\n cursor={false}\n content={\n <ChartTooltipContent\n indicator=\"line\"\n nameKey=\"visitors\"\n hideLabel\n />\n }\n />\n <Line\n dataKey=\"visitors\"\n type=\"natural\"\n stroke=\"var(--color-visitors)\"\n strokeWidth={2}\n dot={({ payload, ...props }) => {\n return (\n <Dot\n key={payload.browser}\n r={5}\n cx={props.cx}\n cy={props.cy}\n fill={payload.fill}\n stroke={payload.fill}\n />\n )\n }}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Dot, Line, LineChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n color: \"hsl(var(--chart-2))\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Dots Colors</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n top: 24,\n left: 24,\n right: 24,\n }}\n >\n <CartesianGrid vertical={false} />\n <ChartTooltip\n cursor={false}\n content={\n <ChartTooltipContent\n indicator=\"line\"\n nameKey=\"visitors\"\n hideLabel\n />\n }\n />\n <Line\n dataKey=\"visitors\"\n type=\"natural\"\n stroke=\"var(--color-visitors)\"\n strokeWidth={2}\n dot={({ payload, ...props }) => {\n return (\n <Dot\n key={payload.browser}\n r={5}\n cx={props.cx}\n cy={props.cy}\n fill={payload.fill}\n stroke={payload.fill}\n />\n )\n }}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-line-dots-colors.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-line-dots-custom.tsx",
|
||||
"content": "\"use client\"\n\nimport { GitCommitVertical, TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Custom Dots</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Line\n dataKey=\"desktop\"\n type=\"natural\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={({ cx, cy, payload }) => {\n const r = 24\n return (\n <GitCommitVertical\n key={payload.month}\n x={cx - r / 2}\n y={cy - r / 2}\n width={r}\n height={r}\n fill=\"hsl(var(--background))\"\n stroke=\"var(--color-desktop)\"\n />\n )\n }}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { GitCommitVertical, TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Custom Dots</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Line\n dataKey=\"desktop\"\n type=\"natural\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={({ cx, cy, payload }) => {\n const r = 24\n return (\n <GitCommitVertical\n key={payload.month}\n x={cx - r / 2}\n y={cy - r / 2}\n width={r}\n height={r}\n fill=\"hsl(var(--background))\"\n stroke=\"var(--color-desktop)\"\n />\n )\n }}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-line-dots-custom.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-line-dots.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Dots</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Line\n dataKey=\"desktop\"\n type=\"natural\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={{\n fill: \"var(--color-desktop)\",\n }}\n activeDot={{\n r: 6,\n }}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Dots</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Line\n dataKey=\"desktop\"\n type=\"natural\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={{\n fill: \"var(--color-desktop)\",\n }}\n activeDot={{\n r: 6,\n }}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-line-dots.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-line-label-custom.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n color: \"hsl(var(--chart-2))\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Custom Label</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n top: 24,\n left: 24,\n right: 24,\n }}\n >\n <CartesianGrid vertical={false} />\n <ChartTooltip\n cursor={false}\n content={\n <ChartTooltipContent\n indicator=\"line\"\n nameKey=\"visitors\"\n hideLabel\n />\n }\n />\n <Line\n dataKey=\"visitors\"\n type=\"natural\"\n stroke=\"var(--color-visitors)\"\n strokeWidth={2}\n dot={{\n fill: \"var(--color-visitors)\",\n }}\n activeDot={{\n r: 6,\n }}\n >\n <LabelList\n position=\"top\"\n offset={12}\n className=\"fill-foreground\"\n fontSize={12}\n dataKey=\"browser\"\n formatter={(value: keyof typeof chartConfig) =>\n chartConfig[value]?.label\n }\n />\n </Line>\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n color: \"hsl(var(--chart-2))\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Custom Label</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n top: 24,\n left: 24,\n right: 24,\n }}\n >\n <CartesianGrid vertical={false} />\n <ChartTooltip\n cursor={false}\n content={\n <ChartTooltipContent\n indicator=\"line\"\n nameKey=\"visitors\"\n hideLabel\n />\n }\n />\n <Line\n dataKey=\"visitors\"\n type=\"natural\"\n stroke=\"var(--color-visitors)\"\n strokeWidth={2}\n dot={{\n fill: \"var(--color-visitors)\",\n }}\n activeDot={{\n r: 6,\n }}\n >\n <LabelList\n position=\"top\"\n offset={12}\n className=\"fill-foreground\"\n fontSize={12}\n dataKey=\"browser\"\n formatter={(value: keyof typeof chartConfig) =>\n chartConfig[value]?.label\n }\n />\n </Line>\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-line-label-custom.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-line-label.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Label</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n top: 20,\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <Line\n dataKey=\"desktop\"\n type=\"natural\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={{\n fill: \"var(--color-desktop)\",\n }}\n activeDot={{\n r: 6,\n }}\n >\n <LabelList\n position=\"top\"\n offset={12}\n className=\"fill-foreground\"\n fontSize={12}\n />\n </Line>\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Label</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n top: 20,\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <Line\n dataKey=\"desktop\"\n type=\"natural\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={{\n fill: \"var(--color-desktop)\",\n }}\n activeDot={{\n r: 6,\n }}\n >\n <LabelList\n position=\"top\"\n offset={12}\n className=\"fill-foreground\"\n fontSize={12}\n />\n </Line>\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-line-label.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-line-linear.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Linear</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Line\n dataKey=\"desktop\"\n type=\"linear\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={false}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Linear</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Line\n dataKey=\"desktop\"\n type=\"linear\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={false}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-line-linear.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-line-multiple.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Multiple</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n <Line\n dataKey=\"desktop\"\n type=\"monotone\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={false}\n />\n <Line\n dataKey=\"mobile\"\n type=\"monotone\"\n stroke=\"var(--color-mobile)\"\n strokeWidth={2}\n dot={false}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Multiple</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n <Line\n dataKey=\"desktop\"\n type=\"monotone\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={false}\n />\n <Line\n dataKey=\"mobile\"\n type=\"monotone\"\n stroke=\"var(--color-mobile)\"\n strokeWidth={2}\n dot={false}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-line-multiple.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-line-step.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Step</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Line\n dataKey=\"desktop\"\n type=\"step\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={false}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Step</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Line\n dataKey=\"desktop\"\n type=\"step\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={false}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-line-step.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-pie-donut-active.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Donut Active</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <PieChart>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Pie\n data={chartData}\n dataKey=\"visitors\"\n nameKey=\"browser\"\n innerRadius={60}\n strokeWidth={5}\n activeIndex={0}\n activeShape={({\n outerRadius = 0,\n ...props\n }: PieSectorDataItem) => (\n <Sector {...props} outerRadius={outerRadius + 10} />\n )}\n />\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Donut Active</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <PieChart>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Pie\n data={chartData}\n dataKey=\"visitors\"\n nameKey=\"browser\"\n innerRadius={60}\n strokeWidth={5}\n activeIndex={0}\n activeShape={({\n outerRadius = 0,\n ...props\n }: PieSectorDataItem) => (\n <Sector {...props} outerRadius={outerRadius + 10} />\n )}\n />\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-pie-donut-active.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-pie-donut-text.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n const totalVisitors = React.useMemo(() => {\n return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n }, [])\n\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Donut with Text</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <PieChart>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Pie\n data={chartData}\n dataKey=\"visitors\"\n nameKey=\"browser\"\n innerRadius={60}\n strokeWidth={5}\n >\n <Label\n content={({ viewBox }) => {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n <text\n x={viewBox.cx}\n y={viewBox.cy}\n textAnchor=\"middle\"\n dominantBaseline=\"middle\"\n >\n <tspan\n x={viewBox.cx}\n y={viewBox.cy}\n className=\"fill-foreground text-3xl font-bold\"\n >\n {totalVisitors.toLocaleString()}\n </tspan>\n <tspan\n x={viewBox.cx}\n y={(viewBox.cy || 0) + 24}\n className=\"fill-muted-foreground\"\n >\n Visitors\n </tspan>\n </text>\n )\n }\n }}\n />\n </Pie>\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n const totalVisitors = React.useMemo(() => {\n return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n }, [])\n\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Donut with Text</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <PieChart>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Pie\n data={chartData}\n dataKey=\"visitors\"\n nameKey=\"browser\"\n innerRadius={60}\n strokeWidth={5}\n >\n <Label\n content={({ viewBox }) => {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n <text\n x={viewBox.cx}\n y={viewBox.cy}\n textAnchor=\"middle\"\n dominantBaseline=\"middle\"\n >\n <tspan\n x={viewBox.cx}\n y={viewBox.cy}\n className=\"fill-foreground text-3xl font-bold\"\n >\n {totalVisitors.toLocaleString()}\n </tspan>\n <tspan\n x={viewBox.cx}\n y={(viewBox.cy || 0) + 24}\n className=\"fill-muted-foreground\"\n >\n Visitors\n </tspan>\n </text>\n )\n }\n }}\n />\n </Pie>\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-pie-donut-text.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-pie-donut.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Donut</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <PieChart>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Pie\n data={chartData}\n dataKey=\"visitors\"\n nameKey=\"browser\"\n innerRadius={60}\n />\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Donut</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <PieChart>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Pie\n data={chartData}\n dataKey=\"visitors\"\n nameKey=\"browser\"\n innerRadius={60}\n />\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-pie-donut.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -9,9 +9,9 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-pie-label-custom.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/components/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Custom Label</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <PieChart>\n <ChartTooltip\n content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n />\n <Pie\n data={chartData}\n dataKey=\"visitors\"\n labelLine={false}\n label={({ payload, ...props }) => {\n return (\n <text\n cx={props.cx}\n cy={props.cy}\n x={props.x}\n y={props.y}\n textAnchor={props.textAnchor}\n dominantBaseline={props.dominantBaseline}\n fill=\"hsla(var(--foreground))\"\n >\n {`${\n chartConfig[payload.browser as keyof typeof chartConfig]\n ?.label\n } (${payload.visitors})`}\n </text>\n )\n }}\n nameKey=\"browser\"\n />\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Custom Label</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <PieChart>\n <ChartTooltip\n content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n />\n <Pie\n data={chartData}\n dataKey=\"visitors\"\n labelLine={false}\n label={({ payload, ...props }) => {\n return (\n <text\n cx={props.cx}\n cy={props.cy}\n x={props.x}\n y={props.y}\n textAnchor={props.textAnchor}\n dominantBaseline={props.dominantBaseline}\n fill=\"hsla(var(--foreground))\"\n >\n {`${\n chartConfig[payload.browser as keyof typeof chartConfig]\n ?.label\n } (${payload.visitors})`}\n </text>\n )\n }}\n nameKey=\"browser\"\n />\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": "components/chart-pie-label-custom.tsx"
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user