{isMobile ? "Mobile layout" : "Desktop layout"}
); } ``` # Astro (/docs/installation/astro) ## Use the Shark Preset [#use-the-shark-preset]This content only renders on the client.
Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.
We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5 business days, while express shipping ensures delivery within 1-2 business days.
We stand behind our products with a comprehensive 30-day return policy. If you're not completely satisfied, simply return the item in its original condition.
Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.
We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5 business days.
We stand behind our products with a comprehensive 30-day return policy. If you're not completely satisfied, simply return the item in its original condition.
{value}
Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.
Key features include advanced processing capabilities, and an intuitive user interface designed for both beginners and experts.
We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5 business days, while express shipping ensures delivery within 1-2 business days.
All orders are carefully packaged and fully insured. Track your shipment in real-time through our dedicated tracking portal.
We stand behind our products with a comprehensive 30-day return policy. If you're not completely satisfied, simply return the item in its original condition.
Our hassle-free return process includes free return shipping and full refunds processed within 48 hours of receiving the returned item.
Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.
We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5 business days.
We stand behind our products with a comprehensive 30-day return policy. If you're not completely satisfied, simply return the item in its original condition.
Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.
We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5 business days.
We stand behind our products with a comprehensive 30-day return policy. If you're not completely satisfied, simply return the item in its original condition.
Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.
We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5 business days.
We stand behind our products with a comprehensive 30-day return policy. If you're not completely satisfied, simply return the item in its original condition.
{gutters.map((value) => (
))}
-
{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 (