-
{selectedIds.map((id) => {
const order = orders.find((order) => order.id === id);
if (!order) {
return null;
}
return (
- {order.id} - {order.name} ); })}
1:1
9:16
16:9 → 1:1
1:1
16:9
Selected: {value ?? "(none)"}
Vinicius Vicentini
@vinihvc
Shadcn
@shadcn
Existing forks
You don't have any forks of this repository.
{value.map((date) => date.toString())}
15OFF
Current page: {page + 1} of 5
{checked ? "✅" : "❌"}
More than: 180
{value > 180 ? "✅" : "❌"}
This content is only rendered on the client side.
Current time: {now.toLocaleTimeString()}
);
};
export default Example;
```
# Clipboard - Examples and Patterns
Examples for Clipboard component.
## Example: controlled
```tsx
"use client";
import React from "react";
import { Button } from "@/components/ui/button";
import {
Clipboard,
ClipboardIndicator,
ClipboardInput,
ClipboardTrigger,
} from "@/components/ui/clipboard";
const Example = () => {
const [value, setValue] = React.useState("https://x.com/vinihvc");
return (
This collapsible is controlled. The state is managed externally.
{open ? "✅" : "❌"}
Google
Facebook
TikTok
Instagram
This content cannot be accessed because the collapsible is disabled.
Here you can find the documentation for all the components and how to use them.
Copy the following code:
npm install @shark-ui
This is the first paragraph of content. When collapsed, only a portion of this content will be visible.
This is the second paragraph. It will be hidden when the collapsible is in its collapsed state.
This is the third paragraph. Expand the collapsible to see all the content.
This is the fourth paragraph. The collapsedHeight prop controls how much content is visible when collapsed.
{parseColor(value).toString("hex")}
{color}
{parseColor(value).toString("hex")}
Selected: {value ?? "(none)"}
{presets.map((preset) => (
))}
This drawer has multiple snap points. Try dragging the handle to quarter, half, or full height.
Swipe down to close this drawer.
Swipe up to close this drawer.
Swipe left to close this drawer.
Swipe right to close this drawer.
{placements.map((placement) => (
);
const placements = [
"top-start",
"top-center",
"top-end",
"middle-start",
"middle-center",
"middle-end",
"bottom-start",
"bottom-center",
"bottom-end",
] as const;
export default Example;
```
# Floating Panel - Examples and Patterns
Examples for Floating Panel component.
## Example: controlled-position
```tsx
"use client";
import {
ChevronDownIcon,
ChevronLeftIcon,
ChevronRightIcon,
ChevronUpIcon,
Settings2Icon,
XIcon,
} from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import {
FloatingPanel,
FloatingPanelBody,
FloatingPanelCloseTrigger,
FloatingPanelContent,
FloatingPanelControl,
FloatingPanelHeader,
FloatingPanelMaximize,
FloatingPanelMinimize,
FloatingPanelRestore,
FloatingPanelTitle,
FloatingPanelTrigger,
} from "@/components/ui/floating-panel";
const Example = () => {
const [position, setPosition] = React.useState({ x: 200, y: 200 });
return (
{placement}
3
))}
Position: ({position.x}, {position.y}).
Use the buttons to move the panel.
Size: {size.width} × {size.height}.
Use the buttons above or drag the edges to resize.
{JSON.stringify(output, null, 2)}
),
});
};
return (
{JSON.stringify(output, null, 2)}
),
});
};
return (
{JSON.stringify(output, null, 2)}
),
});
};
return (
{JSON.stringify(output, null, 2)}
),
});
};
return (
{JSON.stringify(output, null, 2)}
),
});
};
return (
{JSON.stringify(
{ interviewDate: output.interviewDate[0] },
null,
2
)}
),
});
};
return (
{JSON.stringify(output, null, 2)}
),
});
};
return (
Files: {output.resume.map((f) => f.name).join(", ")}
{JSON.stringify(
{
resume: output.resume.map((f) => ({
name: f.name,
size: f.size,
})),
},
null,
2
)}
{JSON.stringify(output, null, 2)}
),
});
};
return (
{JSON.stringify(output, null, 2)}
),
});
};
return (
{JSON.stringify(output, null, 2)}
),
});
};
return (
{JSON.stringify(output, null, 2)}
),
});
};
return (
{JSON.stringify(output, null, 2)}
),
});
};
return (
{JSON.stringify(output, null, 2)}
),
});
};
return (
{JSON.stringify(output, null, 2)}
),
});
};
return (
{JSON.stringify(output, null, 2)}
),
});
};
return (
{JSON.stringify(output, null, 2)}
),
});
};
return (
{JSON.stringify(output, null, 2)}
),
});
};
return (
{JSON.stringify(data, null, 2)}
),
});
};
const emailsError = form.formState.errors.emails;
let arrayLevelMessage: string | undefined;
if (
emailsError &&
typeof emailsError === "object" &&
"root" in emailsError &&
emailsError.root &&
typeof emailsError.root === "object" &&
"message" in emailsError.root
) {
arrayLevelMessage = String(emailsError.root.message);
} else if (
emailsError &&
typeof emailsError === "object" &&
"message" in emailsError &&
typeof (emailsError as { message?: unknown }).message === "string"
) {
arrayLevelMessage = (emailsError as { message: string }).message;
}
return (
{JSON.stringify(data, null, 2)}
),
});
};
return (
{JSON.stringify(data, null, 2)}
),
});
};
return (
{JSON.stringify(data, null, 2)}
),
});
};
return (
{JSON.stringify(data, null, 2)}
),
});
};
return (
{JSON.stringify({ interviewDate: data.interviewDate[0] }, null, 2)}
),
});
};
return (
{JSON.stringify(data, null, 2)}
),
});
};
return (
Files: {data.resume.map((f) => f.name).join(", ")}
{JSON.stringify(
{
resume: data.resume.map((f) => ({
name: f.name,
size: f.size,
})),
},
null,
2
)}
{JSON.stringify(data, null, 2)}
),
});
};
return (
{JSON.stringify(data, null, 2)}
),
});
};
return (
{JSON.stringify(data, null, 2)}
),
});
};
return (
{JSON.stringify(data, null, 2)}
),
});
};
return (
{JSON.stringify(data, null, 2)}
),
});
};
return (
{JSON.stringify(data, null, 2)}
),
});
};
return (
{JSON.stringify(data, null, 2)}
),
});
};
return (
{JSON.stringify(data, null, 2)}
),
});
};
return (
{JSON.stringify(data, null, 2)}
),
});
};
return (
{JSON.stringify(data, null, 2)}
),
});
};
return (
{JSON.stringify(value, null, 2)}
),
});
},
});
return (
{JSON.stringify(value, null, 2)}
),
});
},
});
return (
{JSON.stringify(value, null, 2)}
),
});
},
});
return (
{JSON.stringify(value, null, 2)}
),
});
},
});
return (
{JSON.stringify(value, null, 2)}
),
});
},
});
return (
{JSON.stringify(
{ interviewDate: value.interviewDate[0] },
null,
2
)}
),
});
},
});
return (
{JSON.stringify(value, null, 2)}
),
});
},
});
return (
Files: {value.resume.map((f) => f.name).join(", ")}
{JSON.stringify(
{
resume: value.resume.map((f) => ({
name: f.name,
size: f.size,
})),
},
null,
2
)}
{JSON.stringify(value, null, 2)}
),
});
},
});
return (
{JSON.stringify(value, null, 2)}
),
});
},
});
return (
{JSON.stringify(value, null, 2)}
),
});
},
});
return (
{JSON.stringify(value, null, 2)}
),
});
},
});
return (
{JSON.stringify(value, null, 2)}
),
});
},
});
return (
{JSON.stringify(value, null, 2)}
),
});
},
});
return (
{JSON.stringify(value, null, 2)}
),
});
},
});
return (
{JSON.stringify(value, null, 2)}
),
});
},
});
return (
{JSON.stringify(value, null, 2)}
),
});
},
});
return (
{JSON.stringify(value, null, 2)}
),
});
},
});
return (