mirror of
https://github.com/shadcnstudio/shadcn-studio
synced 2026-04-21 13:27:16 +00:00
chore: release v1.0.0
Added new blocks, registries, updated components and layouts, plus cleanup and key fixes
This commit is contained in:
neelbrahmakshatriya
parent
7a19d97967
commit
b81b0590ca
1018 changed files with 59239 additions and 6669 deletions
|
|
@ -1,2 +1,2 @@
|
|||
BASEPATH=
|
||||
NEXT_PUBLIC_APP_URL=
|
||||
NEXT_PUBLIC_APP_URL=http://localhost:3000${BASEPATH}
|
||||
|
|
|
|||
34
CHANGELOG.md
34
CHANGELOG.md
|
|
@ -4,6 +4,40 @@
|
|||
|
||||
All notable changes to this project will be documented in this file.
|
||||
|
||||
## v1.0.0 (2025-11-19)
|
||||
|
||||
### Added
|
||||
|
||||
- Added blocks
|
||||
- Added registries for easier access to component variants, blocks and themes
|
||||
- Added navigation pagination inside component pages
|
||||
- Added functionality to show component variant name when hover inside a component variant section
|
||||
- Added tags to component variants for better categorization and filtering in search
|
||||
|
||||
### Updated
|
||||
|
||||
- Updated shadcn/ui components
|
||||
- Updated component variants to match the latest shadcn/ui components
|
||||
- Updated shadcn/ui color theme from zinc to neutral
|
||||
- Updated layouts including Sidebar, Header and Footer
|
||||
- Updated animated button variant with heartbeat effect so that you can change the animation color via CSS variable. You can update the color of the animation using the `--heartbeat-color` CSS variable or inline styles like `style={{ '--heartbeat-color': 'var(--primary)' }}`
|
||||
- Updated meta tags for the pages
|
||||
- Updated fonts by removing Gamja Flower font and adding Kalam font
|
||||
- Updated introduction docs
|
||||
- Updated SVGs (including SVG component and namings) and data assets
|
||||
- Updated hooks and utils
|
||||
|
||||
### Removed
|
||||
|
||||
- Removed unnecessary data assets
|
||||
- Removed copy prompt and v0 components
|
||||
- Removed `getMode` server utility function
|
||||
- Removed roadmap section from the theme generator page as we have moved it to [GitHub](https://github.com/orgs/themeselection/projects/42/views/2)
|
||||
|
||||
### Fixed
|
||||
|
||||
- Fixed default selected item in theme presets dropdown
|
||||
|
||||
## v1.0.0-beta.3 (2025-07-04)
|
||||
|
||||
### Added
|
||||
|
|
|
|||
25
README.md
25
README.md
|
|
@ -2,7 +2,7 @@
|
|||
<img alt="shadcn/studio logo" width="800" src="https://cdn.shadcnstudio.com/ss-assets/smm/marketing/shadcn-studio-smm-banner.png">
|
||||
</a><br/><br/>
|
||||
|
||||
[shadcn/studio](https://shadcnstudio.com) is an open-source collection of copy-and-paste shadcn components, blocks, and templates - paired with a powerful theme generator to craft, customize, and ship faster. 🚀
|
||||
[shadcn/studio](https://shadcnstudio.com) is an open-source collection of copy-and-paste shadcn components, blocks, and templates - paired with a powerful theme generator & AI Tools to craft, customize, and ship faster. 🚀
|
||||
|
||||
<p>
|
||||
<a href="https://github.com/themeselection/shadcn-studio/blob/main/LICENSE.md"><img src="https://img.shields.io/badge/license-MIT-blue" alt="MIT License"></a>
|
||||
|
|
@ -49,7 +49,7 @@ Building on the solid foundation of the Shadcn components & blocks, we've e
|
|||
|
||||
### Not a standard library, but a distribution of components
|
||||
|
||||
Following the philosophy of Shadcn, shadcn/studio isn't a conventional “install-from-NPM” library. Rather, it's an open-source distribution of components designed for maximum adaptability. You can copy the code, modify styles, adjust logic, or integrate it with other tools—free from the limitations of typical libraries. This "open code" model empowers you to customize with confidence and creativity.
|
||||
Following the philosophy of Shadcn, shadcn/studio isn't a conventional "install-from-NPM" library. Rather, it's an open-source distribution of components designed for maximum adaptability. You can copy the code, modify styles, adjust logic, or integrate it with other tools—free from the limitations of typical libraries. This "open code" model empowers you to customize with confidence and creativity.
|
||||
|
||||
## Why should I use shadcn/studio? 💡
|
||||
|
||||
|
|
@ -59,12 +59,23 @@ While this approach offers flexibility and control, it comes with some limitatio
|
|||
|
||||
## This is where shadcn/studio shines ✨
|
||||
|
||||
An open-source collection of copy-and-paste shadcn components, blocks, and templates - paired with a powerful theme generator to craft, customize, and ship faster 🚀. It provides a robust toolkit for building stunning, interactive user interfaces with ease.
|
||||
An open-source & premium collection of copy-and-paste shadcn components, blocks, and templates - paired with a powerful theme generator to craft, customize, and ship faster 🚀. It provides a robust toolkit for building stunning, interactive user interfaces with ease.
|
||||
|
||||
- **Open-source:** Dive into a growing, community-driven collection of copy-and-paste [shadcn/ui components]('https://shadcnstudio.com/components'), shadcn blocks, and templates.
|
||||
|
||||
- **Component & Blocks variants:** Access a diverse, collection of customizable [shadcn blocks](https://shadcnstudio.com/blocks) and component variants to quickly build and style your UI with ease.
|
||||
|
||||
- **Open-source:** Dive into a growing, community-driven collection of copy-and-paste components, blocks, and templates.
|
||||
- **Component & Blocks variants:** Access a diverse, collection of customizable shadcn component and block variants to quickly build and style your UI with ease.
|
||||
- **Animated variants with Motion:** Add smooth, modern animations to your components, enhancing user experiences with minimal effort.
|
||||
- **Powerful theme generator:** Tailor your UI effortlessly with real-time previews, ensuring consistent, branded designs delivered faster.
|
||||
|
||||
- **Landing pages & Dashboards:** Explore 20+ premium & free [Shadcn templates](https://shadcnstudio.com/templates) for dashboards, landing pages & more. Fully customizable & easy to use.
|
||||
|
||||
- **shadcn/ui for Figma:** Speed up your workflow with [Shadcn Figma](https://shadcnstudio.com/figma) UI components, blocks & templates — a full design library inspired by shadcn/ui.
|
||||
|
||||
- **Powerful theme generator:** Customize your UI instantly with [Shadcn Theme Generator](https://shadcnstudio.com/theme-generator). Preview changes in real time and create consistent, on-brand designs faster.
|
||||
|
||||
- **shadcn/studio MCP:** Integrate [shadcn/studio MCP](https://shadcnstudio.com/mcp) Server directly into your favorite IDE and craft stunning shadcn/ui Components, Blocks and Pages inspired by shadcn/studio.
|
||||
|
||||
- **Shadcn Figma To Code Plugin:** Convert your Figma designs into production-ready code instantly with the [Shadcn Figma Plugin](https://shadcnstudio.com/figma-plugin).
|
||||
|
||||
## Features ✨
|
||||
|
||||
|
|
@ -110,7 +121,7 @@ shadcn/studio provides an open-source collection of copy-and-paste Shadcn Compon
|
|||
</tr>
|
||||
</table>
|
||||
|
||||
[Explore all components](https://shadcnstudio.com/docs/components/avatar)
|
||||
[Explore all components](https://shadcnstudio.com/components)
|
||||
|
||||
## Community 🤝
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
"lint:fix": "next lint --fix",
|
||||
"format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,md,mdx}\"",
|
||||
"check-types": "tsc --noEmit",
|
||||
"registry:build": "shadcn build",
|
||||
"clean": "rm -rf .next *.tsbuildinfo",
|
||||
"clean:node_modules": "rm -rf .next node_modules *.tsbuildinfo"
|
||||
},
|
||||
|
|
@ -74,6 +75,7 @@
|
|||
"react-use": "^17.6.0",
|
||||
"recharts": "^2.15.3",
|
||||
"server-only": "^0.0.1",
|
||||
"shadcn": "^3.3.1",
|
||||
"shepherd.js": "^14.5.0",
|
||||
"sonner": "^2.0.5",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
|
|
|
|||
2018
pnpm-lock.yaml
2018
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
33
public/r/about-us-page-01.json
Normal file
33
public/r/about-us-page-01.json
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "about-us-page-01",
|
||||
"type": "registry:block",
|
||||
"title": "About Us 1",
|
||||
"description": "Centered header with video/image section and overlapping stats grid card displaying icons, values, and descriptions",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"badge",
|
||||
"button",
|
||||
"card"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/app/(blank)/preview/marketing-ui/about-us-page/about-us-page-01/page.tsx",
|
||||
"content": "import { MedalIcon, SparklesIcon, StarIcon, TargetIcon } from 'lucide-react'\n\nimport AboutUs from '@/components/shadcn-studio/blocks/about-us-page-01/about-us-page-01'\n\nconst stats = [\n {\n icon: SparklesIcon,\n value: '20+',\n description: 'Years of Experience'\n },\n {\n icon: TargetIcon,\n value: '70+',\n description: 'Successful Projects'\n },\n {\n icon: StarIcon,\n value: '550+',\n description: 'Customer Reviews'\n },\n {\n icon: MedalIcon,\n value: '25',\n description: 'Achieve Awards'\n }\n]\n\nconst AboutUsPage = () => {\n return <AboutUs stats={stats} />\n}\n\nexport default AboutUsPage\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/about-us-page-01/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "src/components/shadcn-studio/blocks/about-us-page-01/about-us-page-01.tsx",
|
||||
"content": "import type { ComponentType } from 'react'\n\nimport { ArrowRightIcon } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\n\ntype StatItem = {\n icon: ComponentType\n value: string\n description: string\n}[]\n\nconst AboutUs = ({ stats }: { stats: StatItem }) => {\n return (\n <section className='bg-muted py-8 sm:py-16 lg:py-24'>\n <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>\n {/* Header */}\n <div className='mb-12 space-y-4 text-center md:mb-16 lg:mb-24'>\n <h2 className='text-2xl font-semibold tracking-tight md:text-3xl lg:text-4xl'>About Us</h2>\n <p className='text-muted-foreground text-xl'>\n Our achievement story stands as a powerful testament to teamwork and perseverance. United, we have faced\n challenges, celebrated victories, and woven a narrative of growth and success.\n </p>\n <Button size='lg' asChild className='group rounded-lg text-base has-[>svg]:px-6'>\n <a href='#'>\n Read more\n <ArrowRightIcon className='transition-transform duration-200 group-hover:translate-x-0.5' />\n </a>\n </Button>\n </div>\n\n {/* Video player and stats */}\n <div className='relative mb-8 h-full w-full max-lg:space-y-6 sm:mb-16 lg:mb-24'>\n <div className='aspect-video w-full overflow-hidden rounded-xl lg:h-[644px]'>\n <iframe\n width='100%'\n height='100%'\n src='https://www.youtube.com/embed/RQYZXwLBY8A?si=MvvPX6xaOdzySLfb'\n title='YouTube video player'\n frameBorder='0'\n allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'\n referrerPolicy='strict-origin-when-cross-origin'\n allowFullScreen\n ></iframe>\n </div>\n\n {/* Stats card overlapping the video section */}\n <div className='bg-background grid gap-10 rounded-md border p-8 sm:max-lg:grid-cols-2 lg:absolute lg:-bottom-25 lg:left-1/2 lg:w-3/4 lg:-translate-x-1/2 lg:grid-cols-4 lg:px-10 xl:w-max'>\n {stats.map((stat, index) => (\n <div key={index} className='flex flex-col items-center justify-center gap-2.5 text-center'>\n <div className='flex size-7 items-center justify-center [&>svg]:size-7'>\n <stat.icon />\n </div>\n <span className='text-2xl font-semibold'>{stat.value}</span>\n <p className='text-muted-foreground text-lg'>{stat.description}</p>\n </div>\n ))}\n </div>\n </div>\n </div>\n </section>\n )\n}\n\nexport default AboutUs\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/blocks/about-us-page-01/about-us-page-01.tsx"
|
||||
}
|
||||
],
|
||||
"meta": {
|
||||
"category": "marketing-ui",
|
||||
"section": "about-us-page"
|
||||
}
|
||||
}
|
||||
18
public/r/accordion-01.json
Normal file
18
public/r/accordion-01.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "accordion-01",
|
||||
"type": "registry:component",
|
||||
"title": "Accordion 1",
|
||||
"description": "Basic accordion with default styling and collapsible FAQ items.",
|
||||
"registryDependencies": [
|
||||
"accordion"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/accordion/accordion-01.tsx",
|
||||
"content": "import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'\n\nconst items = [\n {\n title: 'How do I track my order?',\n content: `You can track your order by logging into your account and visiting the \"Orders\" section. You'll receive tracking information via email once your order ships. For real-time updates, you can also use the tracking number provided in your shipping confirmation email.`\n },\n {\n title: 'What is your return policy?',\n content:\n 'We offer a 30-day return policy for most items. Products must be unused and in their original packaging. To initiate a return, please contact our customer service team or use the return portal in your account dashboard.'\n },\n {\n title: 'How can I contact customer support?',\n content:\n 'Our customer support team is available 24/7. You can reach us via live chat, email at support@example.com, or by phone at 1-800-123-4567. For faster service, please have your order number ready when contacting us.'\n }\n]\n\nconst AccordionDemo = () => {\n return (\n <Accordion type='single' collapsible className='w-full' defaultValue='item-1'>\n {items.map((item, index) => (\n <AccordionItem key={index} value={`item-${index + 1}`}>\n <AccordionTrigger>{item.title}</AccordionTrigger>\n <AccordionContent className='text-muted-foreground'>{item.content}</AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n )\n}\n\nexport default AccordionDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/accordion/accordion-01.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/accordion-02.json
Normal file
18
public/r/accordion-02.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "accordion-02",
|
||||
"type": "registry:component",
|
||||
"title": "Accordion 2",
|
||||
"description": "Card-style accordion with separated items, shadow effects, and rotated chevron icons.",
|
||||
"registryDependencies": [
|
||||
"accordion"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/accordion/accordion-02.tsx",
|
||||
"content": "import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'\n\nconst items = [\n {\n title: 'How do I track my order?',\n content: `You can track your order by logging into your account and visiting the \"Orders\" section. You'll receive tracking information via email once your order ships. For real-time updates, you can also use the tracking number provided in your shipping confirmation email.`\n },\n {\n title: 'What is your return policy?',\n content:\n 'We offer a 30-day return policy for most items. Products must be unused and in their original packaging. To initiate a return, please contact our customer service team or use the return portal in your account dashboard.'\n },\n {\n title: 'How can I contact customer support?',\n content:\n 'Our customer support team is available 24/7. You can reach us via live chat, email at support@example.com, or by phone at 1-800-123-4567. For faster service, please have your order number ready when contacting us.'\n }\n]\n\nconst AccordionSplitDemo = () => {\n return (\n <Accordion type='single' collapsible className='w-full space-y-2' defaultValue='item-1'>\n {items.map((item, index) => (\n <AccordionItem\n key={index}\n value={`item-${index + 1}`}\n className='bg-card rounded-md border-b-0 shadow-md data-[state=open]:shadow-lg'\n >\n <AccordionTrigger className='px-5 [&>svg]:rotate-90 [&[data-state=open]>svg]:rotate-0'>\n {item.title}\n </AccordionTrigger>\n <AccordionContent className='text-muted-foreground px-5'>{item.content}</AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n )\n}\n\nexport default AccordionSplitDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/accordion/accordion-02.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/accordion-03.json
Normal file
21
public/r/accordion-03.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "accordion-03",
|
||||
"type": "registry:component",
|
||||
"title": "Accordion 3",
|
||||
"description": "Icon-enhanced accordion with category icons displayed before each item title.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"accordion"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/accordion/accordion-03.tsx",
|
||||
"content": "import { HeadsetIcon, PackageIcon, RefreshCwIcon } from 'lucide-react'\n\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'\n\nconst items = [\n {\n icon: PackageIcon,\n title: 'How do I track my order?',\n content: `You can track your order by logging into your account and visiting the \"Orders\" section. You'll receive tracking information via email once your order ships. For real-time updates, you can also use the tracking number provided in your shipping confirmation email.`\n },\n {\n icon: RefreshCwIcon,\n title: 'What is your return policy?',\n content:\n 'We offer a 30-day return policy for most items. Products must be unused and in their original packaging. To initiate a return, please contact our customer service team or use the return portal in your account dashboard.'\n },\n {\n icon: HeadsetIcon,\n title: 'How can I contact customer support?',\n content:\n 'Our customer support team is available 24/7. You can reach us via live chat, email at support@example.com, or by phone at 1-800-123-4567. For faster service, please have your order number ready when contacting us.'\n }\n]\n\nconst AccordionLeftIconDemo = () => {\n return (\n <Accordion type='single' collapsible className='w-full' defaultValue='item-1'>\n {items.map((item, index) => (\n <AccordionItem key={index} value={`item-${index + 1}`}>\n <AccordionTrigger className='justify-start [&>svg]:order-first'>\n <span className='flex items-center gap-4'>\n <item.icon className='text-muted-foreground size-4 shrink-0' />\n <span>{item.title}</span>\n </span>\n </AccordionTrigger>\n <AccordionContent className='text-muted-foreground'>{item.content}</AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n )\n}\n\nexport default AccordionLeftIconDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/accordion/accordion-03.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
22
public/r/accordion-04.json
Normal file
22
public/r/accordion-04.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "accordion-04",
|
||||
"type": "registry:component",
|
||||
"title": "Accordion 4",
|
||||
"description": "Plus/minus icon accordion with animated icon transitions for expand/collapse states.",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-accordion",
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"accordion"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/accordion/accordion-04.tsx",
|
||||
"content": "import { PlusIcon } from 'lucide-react'\n\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\n\nimport { Accordion, AccordionContent, AccordionItem } from '@/components/ui/accordion'\n\nconst items = [\n {\n title: 'How do I track my order?',\n content: `You can track your order by logging into your account and visiting the \"Orders\" section. You'll receive tracking information via email once your order ships. For real-time updates, you can also use the tracking number provided in your shipping confirmation email.`\n },\n {\n title: 'What is your return policy?',\n content:\n 'We offer a 30-day return policy for most items. Products must be unused and in their original packaging. To initiate a return, please contact our customer service team or use the return portal in your account dashboard.'\n },\n {\n title: 'How can I contact customer support?',\n content:\n 'Our customer support team is available 24/7. You can reach us via live chat, email at support@example.com, or by phone at 1-800-123-4567. For faster service, please have your order number ready when contacting us.'\n }\n]\n\nconst AccordionPlusMinusIconDemo = () => {\n return (\n <Accordion type='single' collapsible className='w-full' defaultValue='item-1'>\n {items.map((item, index) => (\n <AccordionItem key={index} value={`item-${index + 1}`}>\n <AccordionPrimitive.Header className='flex'>\n <AccordionPrimitive.Trigger\n data-slot='accordion-trigger'\n className='focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0'\n >\n {item.title}\n <PlusIcon className='text-muted-foreground pointer-events-none size-4 shrink-0 transition-transform duration-200' />\n </AccordionPrimitive.Trigger>\n </AccordionPrimitive.Header>\n <AccordionContent className='text-muted-foreground'>{item.content}</AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n )\n}\n\nexport default AccordionPlusMinusIconDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/accordion/accordion-04.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/accordion-05.json
Normal file
18
public/r/accordion-05.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "accordion-05",
|
||||
"type": "registry:component",
|
||||
"title": "Accordion 5",
|
||||
"description": "Active state accordion with amber highlighting for expanded items and borders.",
|
||||
"registryDependencies": [
|
||||
"accordion"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/accordion/accordion-05.tsx",
|
||||
"content": "import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'\n\nconst items = [\n {\n title: 'How do I track my order?',\n content: `You can track your order by logging into your account and visiting the \"Orders\" section. You'll receive tracking information via email once your order ships. For real-time updates, you can also use the tracking number provided in your shipping confirmation email.`\n },\n {\n title: 'What is your return policy?',\n content:\n 'We offer a 30-day return policy for most items. Products must be unused and in their original packaging. To initiate a return, please contact our customer service team or use the return portal in your account dashboard.'\n },\n {\n title: 'How can I contact customer support?',\n content:\n 'Our customer support team is available 24/7. You can reach us via live chat, email at support@example.com, or by phone at 1-800-123-4567. For faster service, please have your order number ready when contacting us.'\n }\n]\n\nconst AccordionActiveItemDemo = () => {\n return (\n <Accordion type='single' collapsible className='w-full' defaultValue='item-1'>\n {items.map((item, index) => (\n <AccordionItem\n key={index}\n value={`item-${index + 1}`}\n className='data-[state=open]:border-amber-600 not-last:data-[state=open]:border-b-2 dark:data-[state=open]:border-amber-400'\n >\n <AccordionTrigger className='data-[state=open]:text-amber-600 dark:data-[state=open]:text-amber-400 [&[data-state=open]>svg]:text-amber-600 dark:[&[data-state=open]>svg]:text-amber-400'>\n {item.title}\n </AccordionTrigger>\n <AccordionContent className='text-muted-foreground'>{item.content}</AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n )\n}\n\nexport default AccordionActiveItemDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/accordion/accordion-05.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
22
public/r/accordion-06.json
Normal file
22
public/r/accordion-06.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "accordion-06",
|
||||
"type": "registry:component",
|
||||
"title": "Accordion 6",
|
||||
"description": "Icon and expand indicator accordion with category icons and plus icon for expand/collapse.",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-accordion",
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"accordion"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/accordion/accordion-06.tsx",
|
||||
"content": "import { HeadsetIcon, PackageIcon, PlusIcon, RefreshCwIcon } from 'lucide-react'\n\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\n\nimport { Accordion, AccordionContent, AccordionItem } from '@/components/ui/accordion'\n\nconst items = [\n {\n icon: PackageIcon,\n title: 'How do I track my order?',\n content: `You can track your order by logging into your account and visiting the \"Orders\" section. You'll receive tracking information via email once your order ships. For real-time updates, you can also use the tracking number provided in your shipping confirmation email.`\n },\n {\n icon: RefreshCwIcon,\n title: 'What is your return policy?',\n content:\n 'We offer a 30-day return policy for most items. Products must be unused and in their original packaging. To initiate a return, please contact our customer service team or use the return portal in your account dashboard.'\n },\n {\n icon: HeadsetIcon,\n title: 'How can I contact customer support?',\n content:\n 'Our customer support team is available 24/7. You can reach us via live chat, email at support@example.com, or by phone at 1-800-123-4567. For faster service, please have your order number ready when contacting us.'\n }\n]\n\nconst AccordionExpandIconDemo = () => {\n return (\n <Accordion type='single' collapsible className='w-full' defaultValue='item-1'>\n {items.map((item, index) => (\n <AccordionItem key={index} value={`item-${index + 1}`}>\n <AccordionPrimitive.Header className='flex'>\n <AccordionPrimitive.Trigger\n data-slot='accordion-trigger'\n className='focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-45'\n >\n <span className='flex items-center gap-4'>\n <item.icon className='size-4 shrink-0' />\n <span>{item.title}</span>\n </span>\n <PlusIcon className='text-muted-foreground pointer-events-none size-4 shrink-0 transition-transform duration-200' />\n </AccordionPrimitive.Trigger>\n </AccordionPrimitive.Header>\n <AccordionContent className='text-muted-foreground'>{item.content}</AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n )\n}\n\nexport default AccordionExpandIconDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/accordion/accordion-06.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
19
public/r/accordion-07.json
Normal file
19
public/r/accordion-07.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "accordion-07",
|
||||
"type": "registry:component",
|
||||
"title": "Accordion 7",
|
||||
"description": "Avatar-based accordion displaying user profiles with avatar images, names, and email addresses.",
|
||||
"registryDependencies": [
|
||||
"accordion",
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/accordion/accordion-07.tsx",
|
||||
"content": "import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\n\nconst items = [\n {\n name: 'Richard Payne',\n email: 'pwright@yahoo.com',\n avatarImage: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-1.png',\n content:\n 'Richard Payne is a remarkable individual known for his exceptional skills and expertise in various fields. With a strong background in technology and a passion for innovation, Richard has made significant contributions to the industry.'\n },\n {\n name: 'Jordan Stevenson',\n email: 'wramirez@outlook.com',\n avatarImage: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-2.png',\n content:\n 'Jordan Stevenson is a talented individual with a passion for technology and innovation. Jordan has made significant contributions to various projects and has a deep understanding of programming languages and frameworks.'\n },\n {\n name: 'Nicholas Tanner',\n email: 'snguyen@icloud.com',\n avatarImage: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png',\n content:\n 'Nicholas Tanner is a highly skilled individual with a strong passion for technology and innovation. Nicholas has made significant contributions to numerous projects and possesses a deep understanding of various programming languages and frameworks.'\n }\n]\n\nconst AccordionAvatarDemo = () => {\n return (\n <Accordion type='single' collapsible className='w-full' defaultValue='item-1'>\n {items.map((item, index) => (\n <AccordionItem key={index} value={`item-${index + 1}`}>\n <AccordionTrigger className='items-center hover:no-underline'>\n <span className='flex items-center gap-4'>\n <Avatar className='size-10.5 rounded-sm'>\n <AvatarImage src={item.avatarImage} alt={item.name} className='rounded-sm' />\n <AvatarFallback className='rounded-sm text-xs'>\n {item.name.split(/\\s/).reduce((response, word) => (response += word.slice(0, 1)), '')}\n </AvatarFallback>\n </Avatar>\n <span className='flex flex-col space-y-0.5'>\n <span>{item.name}</span>\n <span className='text-muted-foreground font-normal'>{item.email}</span>\n </span>\n </span>\n </AccordionTrigger>\n <AccordionContent className='text-muted-foreground'>{item.content}</AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n )\n}\n\nexport default AccordionAvatarDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/accordion/accordion-07.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
22
public/r/accordion-08.json
Normal file
22
public/r/accordion-08.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "accordion-08",
|
||||
"type": "registry:component",
|
||||
"title": "Accordion 8",
|
||||
"description": "Enhanced icon accordion with circular icon containers and subtitle descriptions for each item.",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-accordion",
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"accordion"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/accordion/accordion-08.tsx",
|
||||
"content": "import { HeadsetIcon, PackageIcon, PlusIcon, RefreshCwIcon } from 'lucide-react'\n\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\n\nimport { Accordion, AccordionContent, AccordionItem } from '@/components/ui/accordion'\n\nconst items = [\n {\n icon: PackageIcon,\n title: 'How do I track my order?',\n subtitle: 'Shipping & Delivery',\n content: `You can track your order by logging into your account and visiting the \"Orders\" section. You'll receive tracking information via email once your order ships. For real-time updates, you can also use the tracking number provided in your shipping confirmation email.`\n },\n {\n icon: RefreshCwIcon,\n title: 'What is your return policy?',\n subtitle: 'Returns & Refunds',\n content:\n 'We offer a 30-day return policy for most items. Products must be unused and in their original packaging. To initiate a return, please contact our customer service team or use the return portal in your account dashboard.'\n },\n {\n icon: HeadsetIcon,\n title: 'How can I contact customer support?',\n subtitle: 'Help & Support',\n content:\n 'Our customer support team is available 24/7. You can reach us via live chat, email at support@example.com, or by phone at 1-800-123-4567. For faster service, please have your order number ready when contacting us.'\n }\n]\n\nconst AccordionIconSubtitleDemo = () => {\n return (\n <Accordion type='single' collapsible className='w-full' defaultValue='item-1'>\n {items.map((item, index) => (\n <AccordionItem key={index} value={`item-${index + 1}`}>\n <AccordionPrimitive.Header className='flex'>\n <AccordionPrimitive.Trigger\n data-slot='accordion-trigger'\n className='focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0'\n >\n <span className='flex items-center gap-4'>\n <span\n className='flex size-10 shrink-0 items-center justify-center rounded-full border'\n aria-hidden='true'\n >\n <item.icon className='size-4' />\n </span>\n <span className='flex flex-col space-y-0.5'>\n <span>{item.title}</span>\n <span className='text-muted-foreground font-normal'>{item.subtitle}</span>\n </span>\n </span>\n <PlusIcon className='text-muted-foreground pointer-events-none size-4 shrink-0 transition-transform duration-200' />\n </AccordionPrimitive.Trigger>\n </AccordionPrimitive.Header>\n <AccordionContent className='text-muted-foreground'>{item.content}</AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n )\n}\n\nexport default AccordionIconSubtitleDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/accordion/accordion-08.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/accordion-09.json
Normal file
18
public/r/accordion-09.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "accordion-09",
|
||||
"type": "registry:component",
|
||||
"title": "Accordion 9",
|
||||
"description": "Outline-style accordion with bordered items and spacing between each accordion item.",
|
||||
"registryDependencies": [
|
||||
"accordion"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/accordion/accordion-09.tsx",
|
||||
"content": "import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'\n\nconst items = [\n {\n title: 'How do I track my order?',\n content: `You can track your order by logging into your account and visiting the \"Orders\" section. You'll receive tracking information via email once your order ships. For real-time updates, you can also use the tracking number provided in your shipping confirmation email.`\n },\n {\n title: 'What is your return policy?',\n content:\n 'We offer a 30-day return policy for most items. Products must be unused and in their original packaging. To initiate a return, please contact our customer service team or use the return portal in your account dashboard.'\n },\n {\n title: 'How can I contact customer support?',\n content:\n 'Our customer support team is available 24/7. You can reach us via live chat, email at support@example.com, or by phone at 1-800-123-4567. For faster service, please have your order number ready when contacting us.'\n }\n]\n\nconst AccordionOutlineDemo = () => {\n return (\n <Accordion type='single' collapsible className='w-full space-y-2' defaultValue='item-1'>\n {items.map((item, index) => (\n <AccordionItem key={index} value={`item-${index + 1}`} className='rounded-md border!'>\n <AccordionTrigger className='px-5'>{item.title}</AccordionTrigger>\n <AccordionContent className='text-muted-foreground px-5'>{item.content}</AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n )\n}\n\nexport default AccordionOutlineDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/accordion/accordion-09.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/accordion-10.json
Normal file
18
public/r/accordion-10.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "accordion-10",
|
||||
"type": "registry:component",
|
||||
"title": "Accordion 10",
|
||||
"description": "Box-style accordion with unified border container around all accordion items.",
|
||||
"registryDependencies": [
|
||||
"accordion"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/accordion/accordion-10.tsx",
|
||||
"content": "import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'\n\nconst items = [\n {\n title: 'How do I track my order?',\n content: `You can track your order by logging into your account and visiting the \"Orders\" section. You'll receive tracking information via email once your order ships. For real-time updates, you can also use the tracking number provided in your shipping confirmation email.`\n },\n {\n title: 'What is your return policy?',\n content:\n 'We offer a 30-day return policy for most items. Products must be unused and in their original packaging. To initiate a return, please contact our customer service team or use the return portal in your account dashboard.'\n },\n {\n title: 'How can I contact customer support?',\n content:\n 'Our customer support team is available 24/7. You can reach us via live chat, email at support@example.com, or by phone at 1-800-123-4567. For faster service, please have your order number ready when contacting us.'\n }\n]\n\nconst AccordionBoxDemo = () => {\n return (\n <Accordion type='single' collapsible className='w-full rounded-md border' defaultValue='item-1'>\n {items.map((item, index) => (\n <AccordionItem key={index} value={`item-${index + 1}`}>\n <AccordionTrigger className='px-5'>{item.title}</AccordionTrigger>\n <AccordionContent className='text-muted-foreground px-5'>{item.content}</AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n )\n}\n\nexport default AccordionBoxDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/accordion/accordion-10.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/accordion-11.json
Normal file
18
public/r/accordion-11.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "accordion-11",
|
||||
"type": "registry:component",
|
||||
"title": "Accordion 11",
|
||||
"description": "Tab-style accordion with accent background highlighting for expanded items.",
|
||||
"registryDependencies": [
|
||||
"accordion"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/accordion/accordion-11.tsx",
|
||||
"content": "import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'\n\nconst items = [\n {\n title: 'How do I track my order?',\n content: `You can track your order by logging into your account and visiting the \"Orders\" section. You'll receive tracking information via email once your order ships. For real-time updates, you can also use the tracking number provided in your shipping confirmation email.`\n },\n {\n title: 'What is your return policy?',\n content:\n 'We offer a 30-day return policy for most items. Products must be unused and in their original packaging. To initiate a return, please contact our customer service team or use the return portal in your account dashboard.'\n },\n {\n title: 'How can I contact customer support?',\n content:\n 'Our customer support team is available 24/7. You can reach us via live chat, email at support@example.com, or by phone at 1-800-123-4567. For faster service, please have your order number ready when contacting us.'\n }\n]\n\nconst AccordionTabsDemo = () => {\n return (\n <Accordion type='single' collapsible className='w-full' defaultValue='item-1'>\n {items.map((item, index) => (\n <AccordionItem\n key={index}\n value={`item-${index + 1}`}\n className='data-[state=open]:bg-accent rounded-md border-none px-5 transition-colors duration-200'\n >\n <AccordionTrigger>{item.title}</AccordionTrigger>\n <AccordionContent className='text-muted-foreground'>{item.content}</AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n )\n}\n\nexport default AccordionTabsDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/accordion/accordion-11.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
22
public/r/accordion-12.json
Normal file
22
public/r/accordion-12.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "accordion-12",
|
||||
"type": "registry:component",
|
||||
"title": "Accordion 12",
|
||||
"description": "Tab with outline accordion featuring bordered highlighting and shadow effects for expanded items.",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-accordion",
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"accordion"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/accordion/accordion-12.tsx",
|
||||
"content": "import { PlusIcon } from 'lucide-react'\n\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\n\nimport { Accordion, AccordionContent, AccordionItem } from '@/components/ui/accordion'\n\nconst items = [\n {\n title: 'How do I track my order?',\n content: `You can track your order by logging into your account and visiting the \"Orders\" section. You'll receive tracking information via email once your order ships. For real-time updates, you can also use the tracking number provided in your shipping confirmation email.`\n },\n {\n title: 'What is your return policy?',\n content:\n 'We offer a 30-day return policy for most items. Products must be unused and in their original packaging. To initiate a return, please contact our customer service team or use the return portal in your account dashboard.'\n },\n {\n title: 'How can I contact customer support?',\n content:\n 'Our customer support team is available 24/7. You can reach us via live chat, email at support@example.com, or by phone at 1-800-123-4567. For faster service, please have your order number ready when contacting us.'\n }\n]\n\nconst AccordionTabsOutlineDemo = () => {\n return (\n <Accordion type='single' collapsible className='w-full' defaultValue='item-1'>\n {items.map((item, index) => (\n <AccordionItem\n key={index}\n value={`item-${index + 1}`}\n className='data-[state=open]:border-border rounded-md border border-transparent px-5 transition-colors duration-200 data-[state=open]:border data-[state=open]:shadow-md'\n >\n <AccordionPrimitive.Header className='flex'>\n <AccordionPrimitive.Trigger\n data-slot='accordion-trigger'\n className='focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0'\n >\n {item.title}\n <PlusIcon className='text-muted-foreground pointer-events-none size-4 shrink-0 transition-transform duration-200' />\n </AccordionPrimitive.Trigger>\n </AccordionPrimitive.Header>\n <AccordionContent className='text-muted-foreground'>{item.content}</AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n )\n}\n\nexport default AccordionTabsOutlineDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/accordion/accordion-12.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/accordion-13.json
Normal file
21
public/r/accordion-13.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "accordion-13",
|
||||
"type": "registry:component",
|
||||
"title": "Accordion 13",
|
||||
"description": "Media content accordion with category icons and embedded images in accordion content.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"accordion"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/accordion/accordion-13.tsx",
|
||||
"content": "import { HeadsetIcon, PackageIcon, RefreshCwIcon } from 'lucide-react'\n\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'\n\nconst items = [\n {\n icon: PackageIcon,\n title: 'How do I track my order?',\n content: \"You'll receive tracking information via email once your order ships.\",\n media: 'https://cdn.shadcnstudio.com/ss-assets/components/accordion/image-1.jpg?width=520&format=auto'\n },\n {\n icon: RefreshCwIcon,\n title: 'What is your return policy?',\n content: 'We offer a 30-day return policy for most items.',\n media: 'https://cdn.shadcnstudio.com/ss-assets/components/accordion/image-2.jpg?width=520&format=auto'\n },\n {\n icon: HeadsetIcon,\n title: 'How can I contact customer support?',\n content: 'You can reach us via live chat, email at support@example.com, or by phone at 1-800-123-4567.',\n media: 'https://cdn.shadcnstudio.com/ss-assets/components/accordion/image-3.jpg?width=520&format=auto'\n }\n]\n\nconst AccordionMediaContentDemo = () => {\n return (\n <Accordion type='single' collapsible className='w-full' defaultValue='item-1'>\n {items.map((item, index) => (\n <AccordionItem key={index} value={`item-${index + 1}`}>\n <AccordionTrigger>\n <span className='flex items-center gap-4'>\n <item.icon className='size-4 shrink-0' />\n <span>{item.title}</span>\n </span>\n </AccordionTrigger>\n <AccordionContent className='space-y-4'>\n <p className='text-muted-foreground'>{item.content}</p>\n <img src={item.media} alt={item.title} className='w-full rounded-md' />\n </AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n )\n}\n\nexport default AccordionMediaContentDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/accordion/accordion-13.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/accordion-14.json
Normal file
18
public/r/accordion-14.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "accordion-14",
|
||||
"type": "registry:component",
|
||||
"title": "Accordion 14",
|
||||
"description": "Filled header accordion with accent background triggers and separated content sections.",
|
||||
"registryDependencies": [
|
||||
"accordion"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/accordion/accordion-14.tsx",
|
||||
"content": "import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'\n\nconst items = [\n {\n title: 'How do I track my order?',\n content: `You can track your order by logging into your account and visiting the \"Orders\" section. You'll receive tracking information via email once your order ships. For real-time updates, you can also use the tracking number provided in your shipping confirmation email.`\n },\n {\n title: 'What is your return policy?',\n content:\n 'We offer a 30-day return policy for most items. Products must be unused and in their original packaging. To initiate a return, please contact our customer service team or use the return portal in your account dashboard.'\n },\n {\n title: 'How can I contact customer support?',\n content:\n 'Our customer support team is available 24/7. You can reach us via live chat, email at support@example.com, or by phone at 1-800-123-4567. For faster service, please have your order number ready when contacting us.'\n }\n]\n\nconst AccordionFilledDemo = () => {\n return (\n <Accordion type='single' collapsible className='w-full space-y-2' defaultValue='item-1'>\n {items.map((item, index) => (\n <AccordionItem key={index} value={`item-${index + 1}`} className='rounded-md border!'>\n <AccordionTrigger className='bg-accent px-5 data-[state=open]:rounded-b-none'>{item.title}</AccordionTrigger>\n <AccordionContent className='text-muted-foreground px-5 pt-4'>{item.content}</AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n )\n}\n\nexport default AccordionFilledDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/accordion/accordion-14.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
23
public/r/accordion-15.json
Normal file
23
public/r/accordion-15.json
Normal file
File diff suppressed because one or more lines are too long
22
public/r/accordion-16.json
Normal file
22
public/r/accordion-16.json
Normal file
File diff suppressed because one or more lines are too long
21
public/r/alert-01.json
Normal file
21
public/r/alert-01.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-01",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 1",
|
||||
"description": "Basic alert with circle alert icon and simple title message.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-01.tsx",
|
||||
"content": "import { CircleAlertIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle } from '@/components/ui/alert'\n\nconst AlertDemo = () => {\n return (\n <Alert>\n <CircleAlertIcon />\n <AlertTitle>New message!</AlertTitle>\n </Alert>\n )\n}\n\nexport default AlertDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-01.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
22
public/r/alert-02.json
Normal file
22
public/r/alert-02.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-02",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 2",
|
||||
"description": "Avatar-enhanced alert with user profile image, and alert icon.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert",
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-02.tsx",
|
||||
"content": "import { CircleAlertIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\n\nconst AlertWithAvatarDemo = () => {\n return (\n <Alert className='flex items-center justify-between'>\n <Avatar className='rounded-sm'>\n <AvatarImage\n src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png'\n alt='Hallie Richards'\n className='rounded-sm'\n />\n <AvatarFallback className='text-xs'>HR</AvatarFallback>\n </Avatar>\n <div className='flex-1 flex-col justify-center gap-1'>\n <AlertTitle className='flex-1'>Sara has replied on the uploaded image.</AlertTitle>\n <AlertDescription>12 unread messages. Tap to see.</AlertDescription>\n </div>\n <CircleAlertIcon />\n </Alert>\n )\n}\n\nexport default AlertWithAvatarDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-02.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-03.json
Normal file
21
public/r/alert-03.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-03",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 3",
|
||||
"description": "Closable alert with dismiss functionality using X icon and state management.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-03.tsx",
|
||||
"content": "'use client'\n\nimport { useState } from 'react'\n\nimport { CircleAlertIcon, XIcon } from 'lucide-react'\n\nimport { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'\n\nconst AlertClosableDemo = () => {\n const [isActive, setIsActive] = useState(true)\n\n if (!isActive) return null\n\n return (\n <Alert className='flex justify-between'>\n <CircleAlertIcon />\n <div className='flex-1 flex-col justify-center gap-1'>\n <AlertTitle>New message!</AlertTitle>\n <AlertDescription>12 unread messages. Tap to see.</AlertDescription>\n </div>\n <button className='cursor-pointer' onClick={() => setIsActive(false)}>\n <XIcon className='size-5' />\n <span className='sr-only'>Close</span>\n </button>\n </Alert>\n )\n}\n\nexport default AlertClosableDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-03.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
22
public/r/alert-04.json
Normal file
22
public/r/alert-04.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-04",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 4",
|
||||
"description": "Interactive alert with link button featuring arrow icon and styled border/text colors.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert",
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-04.tsx",
|
||||
"content": "import { ArrowRightIcon, CircleAlertIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle } from '@/components/ui/alert'\nimport { Button } from '@/components/ui/button'\n\nconst AlertWithLinkDemo = () => {\n return (\n <Alert className='flex items-center justify-between border-sky-600 text-sky-600 dark:border-sky-400 dark:text-sky-400 [&>svg]:translate-y-0'>\n <CircleAlertIcon />\n <AlertTitle className='flex-1'>New message!</AlertTitle>\n <Button\n variant='outline'\n className='h-7 cursor-pointer rounded-md border-sky-600 px-2 text-sky-600! hover:bg-sky-600/10 focus-visible:border-sky-600 focus-visible:ring-sky-600/20 dark:border-sky-400 dark:text-sky-400! dark:hover:bg-sky-400/10 dark:focus-visible:border-sky-400 dark:focus-visible:ring-sky-400/40'\n asChild\n >\n <a href='#'>\n Link\n <ArrowRightIcon />\n </a>\n </Button>\n </Alert>\n )\n}\n\nexport default AlertWithLinkDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-04.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-05.json
Normal file
21
public/r/alert-05.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-05",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 5",
|
||||
"description": "Attached icon alert with separated icon section and destructive warning styling.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-05.tsx",
|
||||
"content": "import { FileWarningIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle } from '@/components/ui/alert'\n\nconst AlertAttachedIconDemo = () => {\n return (\n <Alert className='flex items-stretch p-0'>\n <div className='bg-destructive/10 text-destructive flex items-center rounded-l-lg border-r p-2'>\n <FileWarningIcon className='size-4' />\n </div>\n <AlertTitle className='p-3'>This file contains virus!</AlertTitle>\n </Alert>\n )\n}\n\nexport default AlertAttachedIconDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-05.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
22
public/r/alert-06.json
Normal file
22
public/r/alert-06.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-06",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 6",
|
||||
"description": "Focused icon alert with avatar-wrapped warning icon and destructive background styling.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert",
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-06.tsx",
|
||||
"content": "import { FileWarningIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle } from '@/components/ui/alert'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\n\nconst AlertFocusedIconDemo = () => {\n return (\n <Alert className='flex items-center gap-3'>\n <Avatar className='rounded-md'>\n <AvatarFallback className='bg-destructive dark:bg-destructive/60 rounded-md text-white'>\n <FileWarningIcon className='size-4' />\n </AvatarFallback>\n </Avatar>\n <AlertTitle>This file contains virus!</AlertTitle>\n </Alert>\n )\n}\n\nexport default AlertFocusedIconDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-06.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
22
public/r/alert-07.json
Normal file
22
public/r/alert-07.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-07",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 7",
|
||||
"description": "File upload progress alert with animated progress bar, action buttons, and close functionality.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert",
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-07.tsx",
|
||||
"content": "'use client'\n\nimport { useState, useEffect } from 'react'\n\nimport { UploadIcon, XIcon } from 'lucide-react'\n\nimport { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'\nimport { Button } from '@/components/ui/button'\nimport { Progress } from '@/components/ui/progress'\n\nconst AlertFileUploadDemo = () => {\n const [isActive, setIsActive] = useState(true)\n\n const [progress, setProgress] = useState(0)\n\n useEffect(() => {\n const timer = setTimeout(() => setProgress(50), 100)\n\n return () => clearTimeout(timer)\n }, [])\n\n if (!isActive) return null\n\n return (\n <Alert className='flex justify-between'>\n <UploadIcon />\n <div className='flex flex-1 flex-col gap-4'>\n <div className='flex-1 flex-col justify-center gap-1'>\n <AlertTitle>Uploading your 'Img-234.png'</AlertTitle>\n <AlertDescription>Please wait While we upload your image.</AlertDescription>\n </div>\n <Progress\n value={progress}\n className='bg-sky-600/20 *:bg-sky-600 dark:bg-sky-400/20 dark:*:bg-sky-400'\n aria-label='Upload Progress'\n />\n <div className='flex items-center gap-4'>\n <Button variant='ghost' className='h-7 cursor-pointer rounded-md px-2'>\n Cancel\n </Button>\n <Button\n variant='ghost'\n disabled\n className='h-7 cursor-pointer rounded-md px-2 text-sky-600 hover:bg-sky-600/10 hover:text-sky-600 dark:text-sky-400 dark:hover:bg-sky-400/10 dark:hover:text-sky-400'\n >\n Upload another\n </Button>\n </div>\n </div>\n <button className='size-5 cursor-pointer' onClick={() => setIsActive(false)}>\n <XIcon className='size-5' />\n <span className='sr-only'>Close</span>\n </button>\n </Alert>\n )\n}\n\nexport default AlertFileUploadDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-07.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
22
public/r/alert-08.json
Normal file
22
public/r/alert-08.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-08",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 8",
|
||||
"description": "Multi-action alert with primary background, multiple buttons, and dismissible interface.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert",
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-08.tsx",
|
||||
"content": "'use client'\n\nimport { useState } from 'react'\n\nimport { CircleAlertIcon, XIcon } from 'lucide-react'\n\nimport { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'\nimport { Button } from '@/components/ui/button'\n\nconst AlertMultipleActionDemo = () => {\n const [isActive, setIsActive] = useState(true)\n\n if (!isActive) return null\n\n return (\n <Alert className='bg-primary text-primary-foreground flex justify-between border-none'>\n <CircleAlertIcon />\n <div className='flex flex-1 flex-col gap-4'>\n <div className='flex-1 flex-col justify-center gap-1'>\n <AlertTitle>A new update is available</AlertTitle>\n <AlertDescription className='text-primary-foreground/80'>\n Includes the at new dashboard View. Pages end exports will now load taster\n </AlertDescription>\n </div>\n <div className='flex items-center gap-4'>\n <Button className='bg-secondary/10 focus-visible:bg-secondary/20 hover:bg-secondary/20 h-7 cursor-pointer rounded-md px-2'>\n Skip this update\n </Button>\n <Button variant='secondary' className='h-7 cursor-pointer rounded-md px-2'>\n Install now\n </Button>\n </div>\n </div>\n <button className='size-5 cursor-pointer' onClick={() => setIsActive(false)}>\n <XIcon className='size-5' />\n <span className='sr-only'>Close</span>\n </button>\n </Alert>\n )\n}\n\nexport default AlertMultipleActionDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-08.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
23
public/r/alert-09.json
Normal file
23
public/r/alert-09.json
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-09",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 9",
|
||||
"description": "Task progress alert with user avatar, progress indicator, and task completion tracking.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert",
|
||||
"avatar",
|
||||
"progress"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-09.tsx",
|
||||
"content": "'use client'\n\nimport { useState, useEffect } from 'react'\n\nimport { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Progress } from '@/components/ui/progress'\n\nconst AlertTaskDemo = () => {\n const [progress, setProgress] = useState(0)\n\n useEffect(() => {\n const timer = setTimeout(() => setProgress(50), 100)\n\n return () => clearTimeout(timer)\n }, [])\n\n return (\n <Alert className='flex gap-3'>\n <Avatar className='rounded-sm'>\n <AvatarImage\n src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png'\n alt='Hallie Richards'\n className='rounded-sm'\n />\n <AvatarFallback className='text-xs'>HR</AvatarFallback>\n </Avatar>\n <div className='flex flex-1 flex-col gap-2'>\n <div className='flex-1 flex-col justify-center gap-1'>\n <AlertTitle>@Rocky</AlertTitle>\n <AlertDescription>this projects task is remaining, deadline is near.</AlertDescription>\n </div>\n <Progress\n value={progress}\n className='bg-amber-600/20 *:bg-amber-600 dark:bg-amber-400/20 dark:*:bg-amber-400'\n aria-label='Task progress'\n />\n </div>\n </Alert>\n )\n}\n\nexport default AlertTaskDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-09.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
23
public/r/alert-10.json
Normal file
23
public/r/alert-10.json
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-10",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 10",
|
||||
"description": "Gradient background alert with email verification message and gradient styling.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert",
|
||||
"button",
|
||||
"progress"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-10.tsx",
|
||||
"content": "'use client'\n\nimport { useState } from 'react'\n\nimport { CircleAlertIcon, XIcon } from 'lucide-react'\n\nimport { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'\n\nconst AlertGradientDemo = () => {\n const [isActive, setIsActive] = useState(true)\n\n if (!isActive) return null\n\n return (\n <Alert className='border-accent-foreground/20 from-accent text-accent-foreground flex justify-between bg-gradient-to-b to-transparent to-60%'>\n <CircleAlertIcon />\n <div className='flex flex-1 flex-col gap-1'>\n <AlertTitle>Verify your email to activate your account</AlertTitle>\n <AlertDescription className='text-accent-foreground/60'>\n We've sent a confirmation link to your inbox. Check your email to complete the sign-up.\n </AlertDescription>\n </div>\n <button className='cursor-pointer' onClick={() => setIsActive(false)}>\n <XIcon className='size-5' />\n <span className='sr-only'>Close</span>\n </button>\n </Alert>\n )\n}\n\nexport default AlertGradientDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-10.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-11.json
Normal file
21
public/r/alert-11.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-11",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 11",
|
||||
"description": "Success indicator alert with left border highlight and green success styling.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-11.tsx",
|
||||
"content": "import { UserCheckIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle } from '@/components/ui/alert'\n\nconst AlertIndicatorSuccessDemo = () => {\n return (\n <Alert className='rounded-md border-l-6 border-green-600 bg-green-600/10 text-green-600 dark:border-green-400 dark:bg-green-400/10 dark:text-green-400'>\n <UserCheckIcon />\n <AlertTitle>Your request to join the team is approved.</AlertTitle>\n </Alert>\n )\n}\n\nexport default AlertIndicatorSuccessDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-11.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-12.json
Normal file
21
public/r/alert-12.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-12",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 12",
|
||||
"description": "Information/error indicator alert with destructive background styling and informational content.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-12.tsx",
|
||||
"content": "import { UserRoundXIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle } from '@/components/ui/alert'\n\nconst AlertIndicatorDestructiveDemo = () => {\n return (\n <Alert className='border-destructive bg-destructive/10 text-destructive rounded-none border-0 border-l-6'>\n <UserRoundXIcon />\n <AlertTitle>Your request to join the team is denied.</AlertTitle>\n </Alert>\n )\n}\n\nexport default AlertIndicatorDestructiveDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-12.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
22
public/r/alert-13.json
Normal file
22
public/r/alert-13.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-13",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 13",
|
||||
"description": "displaying a minimal \"New message!\" notification with an attention icon and an actionable \"Open\" button",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert",
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-13.tsx",
|
||||
"content": "import { CircleAlertIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle } from '@/components/ui/alert'\nimport { Button } from '@/components/ui/button'\n\nconst AlertWithActionDemo = () => {\n return (\n <Alert className='flex items-center justify-between [&>svg]:translate-y-0'>\n <CircleAlertIcon />\n <AlertTitle className='flex-1'>New message!</AlertTitle>\n <Button variant='outline' className='h-7 cursor-pointer rounded-md px-2'>\n Open\n </Button>\n </Alert>\n )\n}\n\nexport default AlertWithActionDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-13.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-14.json
Normal file
21
public/r/alert-14.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-14",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 14",
|
||||
"description": "Error indicator alert with red styling and destructive error message.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-14.tsx",
|
||||
"content": "import { TriangleAlertIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle } from '@/components/ui/alert'\n\nconst AlertDestructiveDemo = () => {\n return (\n <Alert variant='destructive'>\n <TriangleAlertIcon />\n <AlertTitle>Something went wrong!</AlertTitle>\n </Alert>\n )\n}\n\nexport default AlertDestructiveDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-14.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-15.json
Normal file
21
public/r/alert-15.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-15",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 15",
|
||||
"description": "Pure destructive alert using built-in destructive variant with error styling.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-15.tsx",
|
||||
"content": "import { TriangleAlertIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle } from '@/components/ui/alert'\n\nconst AlertPureDestructiveDemo = () => {\n return (\n <Alert variant='destructive' className='border-destructive'>\n <TriangleAlertIcon />\n <AlertTitle>Unable to process your payment.</AlertTitle>\n </Alert>\n )\n}\n\nexport default AlertPureDestructiveDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-15.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/alert-16.json
Normal file
18
public/r/alert-16.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-16",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 16",
|
||||
"description": "Minimal alert without icon displaying simple message text only.",
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-16.tsx",
|
||||
"content": "import { Alert, AlertTitle } from '@/components/ui/alert'\n\nconst AlertWithoutIconDemo = () => {\n return (\n <Alert>\n <AlertTitle>New message!</AlertTitle>\n </Alert>\n )\n}\n\nexport default AlertWithoutIconDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-16.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-17.json
Normal file
21
public/r/alert-17.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-17",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 17",
|
||||
"description": "Standard alert with both title and description text providing detailed information.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-17.tsx",
|
||||
"content": "import { CircleAlertIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'\n\nconst AlertDescriptionDemo = () => {\n return (\n <Alert>\n <CircleAlertIcon />\n <AlertTitle>Creating your account</AlertTitle>\n <AlertDescription>Fill in your details to get started.</AlertDescription>\n </Alert>\n )\n}\n\nexport default AlertDescriptionDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-17.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-18.json
Normal file
21
public/r/alert-18.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-18",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 18",
|
||||
"description": "Outline info alert with blue border and text styling for informational messages.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-18.tsx",
|
||||
"content": "import { CircleAlertIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'\n\nconst AlertOutlineInfoDemo = () => {\n return (\n <Alert className='border-sky-600 text-sky-600 dark:border-sky-400 dark:text-sky-400'>\n <CircleAlertIcon />\n <AlertTitle>Verify your email to activate your account</AlertTitle>\n <AlertDescription className='text-sky-600/80 dark:text-sky-400/80'>\n We've sent a confirmation link to your inbox. Check your email to complete the sign-up.\n </AlertDescription>\n </Alert>\n )\n}\n\nexport default AlertOutlineInfoDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-18.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-19.json
Normal file
21
public/r/alert-19.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-19",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 19",
|
||||
"description": "Outline success alert with green border and text for success messages.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-19.tsx",
|
||||
"content": "import { CheckCheckIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'\n\nconst AlertOutlineSuccessDemo = () => {\n return (\n <Alert className='border-green-600 text-green-600 dark:border-green-400 dark:text-green-400'>\n <CheckCheckIcon />\n <AlertTitle>Account created successfully</AlertTitle>\n <AlertDescription className='text-green-600/80 dark:text-green-400/80'>\n You are all set! You can now log in and start exploring your dashboard.\n </AlertDescription>\n </Alert>\n )\n}\n\nexport default AlertOutlineSuccessDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-19.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-20.json
Normal file
21
public/r/alert-20.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-20",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 20",
|
||||
"description": "Outline warning alert with amber border and text for warning messages.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-20.tsx",
|
||||
"content": "import { CircleAlertIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'\n\nconst AlertOutlineWarningDemo = () => {\n return (\n <Alert className='border-amber-600 text-amber-600 dark:border-amber-400 dark:text-amber-400'>\n <CircleAlertIcon />\n <AlertTitle>Your password is too weak</AlertTitle>\n <AlertDescription className='text-amber-600/80 dark:text-amber-400/80'>\n Try using a mix of uppercase letters, numbers, and symbols for better security.\n </AlertDescription>\n </Alert>\n )\n}\n\nexport default AlertOutlineWarningDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-20.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-21.json
Normal file
21
public/r/alert-21.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-21",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 21",
|
||||
"description": "Soft primary alert with subtle background and text styling for secondary messages.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-21.tsx",
|
||||
"content": "import { CircleAlertIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'\n\nconst AlertSoftDemo = () => {\n return (\n <Alert className='bg-primary/10 border-none'>\n <CircleAlertIcon />\n <AlertTitle>File Should be PDF,DOCX,JPG, or PNG.</AlertTitle>\n <AlertDescription>If the file type is not one of this than we can't get your files</AlertDescription>\n </Alert>\n )\n}\n\nexport default AlertSoftDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-21.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-22.json
Normal file
21
public/r/alert-22.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-22",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 22",
|
||||
"description": "Soft info alert with blue background and subtle styling for information.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-22.tsx",
|
||||
"content": "import { CircleAlertIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'\n\nconst AlertSoftInfoDemo = () => {\n return (\n <Alert className='border-none bg-sky-600/10 text-sky-600 dark:bg-sky-400/10 dark:text-sky-400'>\n <CircleAlertIcon />\n <AlertTitle>Only certain file types are allowed</AlertTitle>\n <AlertDescription className='text-sky-600/80 dark:text-sky-400/80'>\n You can upload PDF, DOCX, JPG, or PNG files up to 20MB.\n </AlertDescription>\n </Alert>\n )\n}\n\nexport default AlertSoftInfoDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-22.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-23.json
Normal file
21
public/r/alert-23.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-23",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 23",
|
||||
"description": "Soft success alert with green background and subtle styling for success messages.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-23.tsx",
|
||||
"content": "import { CheckCheckIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'\n\nconst AlertSoftSuccessDemo = () => {\n return (\n <Alert className='border-none bg-green-600/10 text-green-600 dark:bg-green-400/10 dark:text-green-400'>\n <CheckCheckIcon />\n <AlertTitle>File uploaded successfully</AlertTitle>\n <AlertDescription className='text-green-600/80 dark:text-green-400/80'>\n Your document has been saved and is now available in your files.\n </AlertDescription>\n </Alert>\n )\n}\n\nexport default AlertSoftSuccessDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-23.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-24.json
Normal file
21
public/r/alert-24.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-24",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 24",
|
||||
"description": "Soft warning alert with amber background and subtle styling for warnings.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-24.tsx",
|
||||
"content": "import { CircleAlertIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'\n\nconst AlertSoftWarningDemo = () => {\n return (\n <Alert className='border-none bg-amber-600/10 text-amber-600 dark:bg-amber-400/10 dark:text-amber-400'>\n <CircleAlertIcon />\n <AlertTitle>This file might be too large</AlertTitle>\n <AlertDescription className='text-amber-600/80 dark:text-amber-400/80'>\n Uploading large files may take longer or fail. Consider compressing it first.\n </AlertDescription>\n </Alert>\n )\n}\n\nexport default AlertSoftWarningDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-24.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-25.json
Normal file
21
public/r/alert-25.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-25",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 25",
|
||||
"description": "Soft destructive alert with red background and subtle styling for errors.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-25.tsx",
|
||||
"content": "import { TriangleAlertIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'\n\nconst AlertSoftDestructiveDemo = () => {\n return (\n <Alert className='bg-destructive/10 text-destructive border-none'>\n <TriangleAlertIcon />\n <AlertTitle>Upload failed</AlertTitle>\n <AlertDescription className='text-destructive/80'>\n Something went wrong. Please try again or use a different file format.\n </AlertDescription>\n </Alert>\n )\n}\n\nexport default AlertSoftDestructiveDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-25.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-26.json
Normal file
21
public/r/alert-26.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-26",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 26",
|
||||
"description": "Solid info alert with full primary background for prominent informational messages.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-26.tsx",
|
||||
"content": "import { CircleAlertIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'\n\nconst AlertSolidDemo = () => {\n return (\n <Alert className='bg-primary text-primary-foreground border-none'>\n <CircleAlertIcon />\n <AlertTitle>Editing your profile</AlertTitle>\n <AlertDescription className='text-primary-foreground/80'>\n Changes won't be saved until you click "Update."\n </AlertDescription>\n </Alert>\n )\n}\n\nexport default AlertSolidDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-26.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-27.json
Normal file
21
public/r/alert-27.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-27",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 27",
|
||||
"description": "Solid success alert with full green background for prominent success messages.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-27.tsx",
|
||||
"content": "import { CheckCheckIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'\n\nconst AlertSolidSuccessDemo = () => {\n return (\n <Alert className='border-none bg-green-600 text-white dark:bg-green-400'>\n <CheckCheckIcon />\n <AlertTitle>Profile updated</AlertTitle>\n <AlertDescription className='text-white/80'>Your changes have been saved successfully.</AlertDescription>\n </Alert>\n )\n}\n\nexport default AlertSolidSuccessDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-27.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-28.json
Normal file
21
public/r/alert-28.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-28",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 28",
|
||||
"description": "Solid warning alert with full amber background for prominent warning messages.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-28.tsx",
|
||||
"content": "import { CircleAlertIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'\n\nconst AlertSolidWarningDemo = () => {\n return (\n <Alert className='border-none bg-amber-600 text-white dark:bg-amber-400'>\n <CircleAlertIcon />\n <AlertTitle>Some details are missing</AlertTitle>\n <AlertDescription className='text-white/80'>Complete your profile to get the best experience.</AlertDescription>\n </Alert>\n )\n}\n\nexport default AlertSolidWarningDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-28.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-29.json
Normal file
21
public/r/alert-29.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-29",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 29",
|
||||
"description": "Solid info alert with full blue background for prominent informational messages.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-29.tsx",
|
||||
"content": "import { CircleAlertIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'\n\nconst AlertSolidInfoDemo = () => {\n return (\n <Alert className='border-none bg-sky-600 text-white dark:bg-sky-400'>\n <CircleAlertIcon />\n <AlertTitle>Your profile is visible</AlertTitle>\n <AlertDescription className='text-white/80'>Anyone can view your basic information.</AlertDescription>\n </Alert>\n )\n}\n\nexport default AlertSolidInfoDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-29.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/alert-30.json
Normal file
21
public/r/alert-30.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-30",
|
||||
"type": "registry:component",
|
||||
"title": "Alert 30",
|
||||
"description": "Solid destructive alert with full red background for prominent error messages.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/alert/alert-30.tsx",
|
||||
"content": "import { TriangleAlertIcon } from 'lucide-react'\n\nimport { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'\n\nconst AlertSolidDestructiveDemo = () => {\n return (\n <Alert className='bg-destructive dark:bg-destructive/60 border-none text-white'>\n <TriangleAlertIcon />\n <AlertTitle>Couldn't save changes</AlertTitle>\n <AlertDescription className='text-white/80'>Please try again or reload the page.</AlertDescription>\n </Alert>\n )\n}\n\nexport default AlertSolidDestructiveDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/alert/alert-30.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
29
public/r/app-integration-01.json
Normal file
29
public/r/app-integration-01.json
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "app-integration-01",
|
||||
"type": "registry:block",
|
||||
"title": "App Integration 1",
|
||||
"description": "Two-column layout with integration cards featuring tool logos, names, descriptions, and call-to-action for conversion-focused app showcases",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/app/(blank)/preview/marketing-ui/app-integration/app-integration-01/page.tsx",
|
||||
"content": "import AppIntegration from '@/components/shadcn-studio/blocks/app-integration-01/app-integration-01'\n\nconst integrations = [\n {\n name: 'Microsoft',\n description: 'Empowering Innovation and Connectivity',\n image: 'https://cdn.shadcnstudio.com/ss-assets/brand-logo/microsoft-icon.png',\n alt: 'Microsoft'\n },\n {\n name: 'Spotify',\n description: 'Your soundtrack to every moment.',\n image: 'https://cdn.shadcnstudio.com/ss-assets/brand-logo/spotify-icon.png',\n alt: 'Spotify'\n },\n {\n name: 'Github',\n description: 'Your Hub for Open Source Innovation',\n image: 'https://cdn.shadcnstudio.com/ss-assets/brand-logo/github-white.png',\n alt: 'Github'\n }\n]\n\nconst AppIntegrationPage = () => {\n return <AppIntegration integrations={integrations} />\n}\n\nexport default AppIntegrationPage\n",
|
||||
"type": "registry:page",
|
||||
"target": "app/app-integration-01/page.tsx"
|
||||
},
|
||||
{
|
||||
"path": "src/components/shadcn-studio/blocks/app-integration-01/app-integration-01.tsx",
|
||||
"content": "import { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardTitle } from '@/components/ui/card'\n\ntype Integration = {\n name: string\n description: string\n image: string\n alt: string\n}[]\n\nconst AppIntegration = ({ integrations }: { integrations: Integration }) => {\n return (\n <section className='py-8 sm:py-16 lg:py-24'>\n <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>\n <div className='grid grid-cols-1 items-center gap-6 md:grid-cols-2'>\n <div className='space-y-4'>\n <h2 className='text-2xl font-semibold md:text-3xl lg:text-4xl'>\n Connects with your favourite tools to boost conversions!\n </h2>\n <p className='text-muted-foreground text-xl'>\n Harness the potential of seamless integration to boost your sales performance! Discover how connecting\n your tools can lead to greater efficiency and impressive results.\n </p>\n <Button size='lg' className='rounded-lg text-base'>\n Check all app\n </Button>\n </div>\n\n <div className='space-y-6'>\n {integrations.map((integration, index) => (\n <Card key={index} className='bg-transparent py-4 shadow-none'>\n <CardContent className='flex items-center gap-6'>\n <div className='flex size-17 shrink-0 items-center justify-center rounded-md border'>\n <img src={integration.image} alt={integration.alt} className='size-10' />\n </div>\n <div>\n <CardTitle className='text-xl font-medium'>{integration.name}</CardTitle>\n <CardDescription className='text-base'>{integration.description}</CardDescription>\n </div>\n </CardContent>\n </Card>\n ))}\n </div>\n </div>\n </div>\n </section>\n )\n}\n\nexport default AppIntegration\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/blocks/app-integration-01/app-integration-01.tsx"
|
||||
}
|
||||
],
|
||||
"meta": {
|
||||
"category": "marketing-ui",
|
||||
"section": "app-integration"
|
||||
}
|
||||
}
|
||||
43
public/r/application-shell-01.json
Normal file
43
public/r/application-shell-01.json
Normal file
File diff suppressed because one or more lines are too long
131
public/r/art-deco.json
Normal file
131
public/r/art-deco.json
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "art-deco",
|
||||
"type": "registry:style",
|
||||
"cssVars": {
|
||||
"theme": {
|
||||
"font-sans": "Delius Swash Caps",
|
||||
"font-mono": "Delius Swash Caps",
|
||||
"font-serif": "Delius Swash Caps",
|
||||
"radius": "0.625rem",
|
||||
"tracking-tighter": "calc(var(--tracking-normal) - 0.05em)",
|
||||
"tracking-tight": "calc(var(--tracking-normal) - 0.025em)",
|
||||
"tracking-wide": "calc(var(--tracking-normal) + 0.025em)",
|
||||
"tracking-wider": "calc(var(--tracking-normal) + 0.05em)",
|
||||
"tracking-widest": "calc(var(--tracking-normal) + 0.1em)"
|
||||
},
|
||||
"light": {
|
||||
"background": "oklch(0.96 0.03 106.92)",
|
||||
"foreground": "oklch(0.40 0.07 90.80)",
|
||||
"card": "oklch(0.98 0.04 97.73)",
|
||||
"card-foreground": "oklch(0.32 0 0)",
|
||||
"popover": "oklch(0.98 0.04 97.73)",
|
||||
"popover-foreground": "oklch(0.32 0 0)",
|
||||
"primary": "oklch(0.77 0.14 91.27)",
|
||||
"primary-foreground": "oklch(0 0 0)",
|
||||
"secondary": "oklch(0.67 0.13 61.58)",
|
||||
"secondary-foreground": "oklch(0 0 0)",
|
||||
"muted": "oklch(0.93 0.03 106.94)",
|
||||
"muted-foreground": "oklch(0.32 0 0)",
|
||||
"accent": "oklch(0.89 0.18 95.47)",
|
||||
"accent-foreground": "oklch(0.32 0 0)",
|
||||
"destructive": "oklch(0.69 0.20 32.29)",
|
||||
"border": "oklch(0.83 0.11 93.01)",
|
||||
"input": "oklch(0.65 0.13 81.66)",
|
||||
"ring": "oklch(0.75 0.15 84.05)",
|
||||
"chart-1": "oklch(0.89 0.18 95.47)",
|
||||
"chart-2": "oklch(0.67 0.13 61.58)",
|
||||
"chart-3": "oklch(0.65 0.13 81.66)",
|
||||
"chart-4": "oklch(0.75 0.15 84.05)",
|
||||
"chart-5": "oklch(0.77 0.14 91.27)",
|
||||
"sidebar": "oklch(0.96 0.03 106.92)",
|
||||
"sidebar-foreground": "oklch(0.32 0 0)",
|
||||
"sidebar-primary": "oklch(0.77 0.14 91.27)",
|
||||
"sidebar-primary-foreground": "oklch(0.32 0 0)",
|
||||
"sidebar-accent": "oklch(0.89 0.18 95.47)",
|
||||
"sidebar-accent-foreground": "oklch(0.32 0 0)",
|
||||
"sidebar-border": "oklch(0.65 0.13 81.66)",
|
||||
"sidebar-ring": "oklch(0.75 0.15 84.05)",
|
||||
"font-sans": "Delius Swash Caps",
|
||||
"font-serif": "Delius Swash Caps",
|
||||
"font-mono": "Delius Swash Caps",
|
||||
"radius": "0.625rem",
|
||||
"shadow-color": "oklch(0.70 0.17 28.12 / 30%)",
|
||||
"shadow-opacity": "0.05",
|
||||
"shadow-blur": "3px",
|
||||
"shadow-spread": "0px",
|
||||
"shadow-offset-x": "0px",
|
||||
"shadow-offset-y": "1px",
|
||||
"spacing": "0.25rem",
|
||||
"shadow-2xs": "0px 1px 3px 0px oklch(0.70 0.17 28.12 / 0.03)",
|
||||
"shadow-xs": "0px 1px 3px 0px oklch(0.70 0.17 28.12 / 0.03)",
|
||||
"shadow-sm": "0px 1px 3px 0px oklch(0.70 0.17 28.12 / 0.05), 0px 1px 2px -1px oklch(0.70 0.17 28.12 / 0.05)",
|
||||
"shadow": "0px 1px 3px 0px oklch(0.70 0.17 28.12 / 0.05), 0px 1px 2px -1px oklch(0.70 0.17 28.12 / 0.05)",
|
||||
"shadow-md": "0px 1px 3px 0px oklch(0.70 0.17 28.12 / 0.05), 0px 2px 4px -1px oklch(0.70 0.17 28.12 / 0.05)",
|
||||
"shadow-lg": "0px 1px 3px 0px oklch(0.70 0.17 28.12 / 0.05), 0px 4px 6px -1px oklch(0.70 0.17 28.12 / 0.05)",
|
||||
"shadow-xl": "0px 1px 3px 0px oklch(0.70 0.17 28.12 / 0.05), 0px 8px 10px -1px oklch(0.70 0.17 28.12 / 0.05)",
|
||||
"shadow-2xl": "0px 1px 3px 0px oklch(0.70 0.17 28.12 / 0.13)",
|
||||
"tracking-normal": "0em"
|
||||
},
|
||||
"dark": {
|
||||
"background": "oklch(0.32 0 0)",
|
||||
"foreground": "oklch(0.96 0.03 106.92)",
|
||||
"card": "oklch(0.41 0 0)",
|
||||
"card-foreground": "oklch(0.96 0.03 106.92)",
|
||||
"popover": "oklch(0.41 0 0)",
|
||||
"popover-foreground": "oklch(0.96 0.03 106.92)",
|
||||
"primary": "oklch(0.84 0.17 83.07)",
|
||||
"primary-foreground": "oklch(0 0 0)",
|
||||
"secondary": "oklch(0.47 0.11 50.64)",
|
||||
"secondary-foreground": "oklch(0.96 0.03 106.92)",
|
||||
"muted": "oklch(0.44 0 0)",
|
||||
"muted-foreground": "oklch(0.96 0.03 106.92)",
|
||||
"accent": "oklch(0.66 0.14 79.74)",
|
||||
"accent-foreground": "oklch(0 0 0)",
|
||||
"destructive": "oklch(0.66 0.23 35.22)",
|
||||
"border": "oklch(0.47 0.11 50.64)",
|
||||
"input": "oklch(0.47 0.11 50.64)",
|
||||
"ring": "oklch(0.65 0.13 81.66)",
|
||||
"chart-1": "oklch(0.75 0.15 84.05)",
|
||||
"chart-2": "oklch(0.47 0.11 50.64)",
|
||||
"chart-3": "oklch(0.65 0.13 81.66)",
|
||||
"chart-4": "oklch(0.75 0.15 84.05)",
|
||||
"chart-5": "oklch(0.65 0.13 81.66)",
|
||||
"sidebar": "oklch(0.32 0 0)",
|
||||
"sidebar-foreground": "oklch(1.00 0 0)",
|
||||
"sidebar-primary": "oklch(0.61 0.13 79.65)",
|
||||
"sidebar-primary-foreground": "oklch(1.00 0 0)",
|
||||
"sidebar-accent": "oklch(0.75 0.15 84.05)",
|
||||
"sidebar-accent-foreground": "oklch(0.96 0.03 106.92)",
|
||||
"sidebar-border": "oklch(0.47 0.11 50.64)",
|
||||
"sidebar-ring": "oklch(0.65 0.13 81.66)",
|
||||
"radius": "0.625rem",
|
||||
"shadow-color": "oklch(0.00 0 0 / 0.05)",
|
||||
"shadow-opacity": "0.05",
|
||||
"shadow-blur": "3px",
|
||||
"shadow-spread": "0px",
|
||||
"shadow-offset-x": "0px",
|
||||
"shadow-offset-y": "1px",
|
||||
"letter-spacing": "0em",
|
||||
"spacing": "0.25rem",
|
||||
"font-sans": "'Geist', 'Geist Fallback', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
|
||||
"font-serif": "\"Geist\", \"Geist Fallback\", ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif",
|
||||
"font-mono": "\"Geist Mono\", \"Geist Mono Fallback\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
|
||||
"shadow-2xs": "0px 1px 3px 0px oklch(0 0 0 / 0.03)",
|
||||
"shadow-xs": "0px 1px 3px 0px oklch(0 0 0 / 0.03)",
|
||||
"shadow-sm": "0px 1px 3px 0px oklch(0 0 0 / 0.05), 0px 1px 2px -1px oklch(0 0 0 / 0.05)",
|
||||
"shadow": "0px 1px 3px 0px oklch(0 0 0 / 0.05), 0px 1px 2px -1px oklch(0 0 0 / 0.05)",
|
||||
"shadow-md": "0px 1px 3px 0px oklch(0 0 0 / 0.05), 0px 2px 4px -1px oklch(0 0 0 / 0.05)",
|
||||
"shadow-lg": "0px 1px 3px 0px oklch(0 0 0 / 0.05), 0px 4px 6px -1px oklch(0 0 0 / 0.05)",
|
||||
"shadow-xl": "0px 1px 3px 0px oklch(0 0 0 / 0.05), 0px 8px 10px -1px oklch(0 0 0 / 0.05)",
|
||||
"shadow-2xl": "0px 1px 3px 0px oklch(0 0 0 / 0.13)"
|
||||
}
|
||||
},
|
||||
"css": {
|
||||
"@layer base": {
|
||||
"body": {
|
||||
"letter-spacing": "var(--tracking-normal)"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
public/r/avatar-01.json
Normal file
18
public/r/avatar-01.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-01",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 1",
|
||||
"description": "Basic avatar with profile image and fallback initials.",
|
||||
"registryDependencies": [
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-01.tsx",
|
||||
"content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\n\nconst AvatarDemo = () => {\n return (\n <Avatar>\n <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />\n <AvatarFallback className='text-xs'>HR</AvatarFallback>\n </Avatar>\n )\n}\n\nexport default AvatarDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-01.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/avatar-02.json
Normal file
18
public/r/avatar-02.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-02",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 2",
|
||||
"description": "Avatar with ring border highlighting for active or selected states.",
|
||||
"registryDependencies": [
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-02.tsx",
|
||||
"content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\n\nconst AvatarRingDemo = () => {\n return (\n <Avatar className='ring-ring ring-2'>\n <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />\n <AvatarFallback className='text-xs'>HR</AvatarFallback>\n </Avatar>\n )\n}\n\nexport default AvatarRingDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-02.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/avatar-03.json
Normal file
18
public/r/avatar-03.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-03",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 3",
|
||||
"description": "Small sized avatar variant with compact dimensions.",
|
||||
"registryDependencies": [
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-03.tsx",
|
||||
"content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\n\nconst AvatarRoundedDemo = () => {\n return (\n <Avatar className='rounded-sm'>\n <AvatarImage\n src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png'\n alt='Hallie Richards'\n className='rounded-sm'\n />\n <AvatarFallback className='text-xs'>HR</AvatarFallback>\n </Avatar>\n )\n}\n\nexport default AvatarRoundedDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-03.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/avatar-04.json
Normal file
18
public/r/avatar-04.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-04",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 4",
|
||||
"description": "Large sized avatar variant with expanded dimensions.",
|
||||
"registryDependencies": [
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-04.tsx",
|
||||
"content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\n\nconst AvatarSizeDemo = () => {\n return (\n <Avatar className='size-12'>\n <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />\n <AvatarFallback className='text-xs'>HR</AvatarFallback>\n </Avatar>\n )\n}\n\nexport default AvatarSizeDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-04.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/avatar-05.json
Normal file
18
public/r/avatar-05.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-05",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 5",
|
||||
"description": "Circular avatar with fallback initials.",
|
||||
"registryDependencies": [
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-05.tsx",
|
||||
"content": "import { Avatar, AvatarFallback } from '@/components/ui/avatar'\n\nconst AvatarFallbackDemo = () => {\n return (\n <Avatar>\n <AvatarFallback className='text-xs'>HR</AvatarFallback>\n </Avatar>\n )\n}\n\nexport default AvatarFallbackDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-05.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/avatar-06.json
Normal file
21
public/r/avatar-06.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-06",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 6",
|
||||
"description": "Icon avatar using Lucide icon with colored background.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-06.tsx",
|
||||
"content": "import { HomeIcon } from 'lucide-react'\n\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\n\nconst AvatarIconDemo = () => {\n return (\n <Avatar>\n <AvatarFallback className='bg-indigo-500/10 text-indigo-500'>\n <HomeIcon className='size-4' />\n </AvatarFallback>\n </Avatar>\n )\n}\n\nexport default AvatarIconDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-06.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/avatar-07.json
Normal file
18
public/r/avatar-07.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-07",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 7",
|
||||
"description": "Status avatar with busy indicator showing red status dot.",
|
||||
"registryDependencies": [
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-07.tsx",
|
||||
"content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\n\nconst AvatarStatusBusyDemo = () => {\n return (\n <div className='relative w-fit'>\n <Avatar>\n <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />\n <AvatarFallback className='text-xs'>HR</AvatarFallback>\n </Avatar>\n <span className='border-background bg-destructive absolute -right-0.5 -bottom-0.5 size-3 rounded-full border-2'>\n <span className='sr-only'>Busy</span>\n </span>\n </div>\n )\n}\n\nexport default AvatarStatusBusyDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-07.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/avatar-08.json
Normal file
21
public/r/avatar-08.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-08",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 8",
|
||||
"description": "Status avatar with online indicator showing green status dot.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-08.tsx",
|
||||
"content": "import { CheckIcon } from 'lucide-react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\n\nconst AvatarStatusRingDemo = () => {\n return (\n <div className='relative w-fit'>\n <Avatar className='ring-offset-background ring-2 ring-green-600 ring-offset-2 dark:ring-green-400'>\n <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />\n <AvatarFallback className='text-xs'>HR</AvatarFallback>\n </Avatar>\n <span className='absolute -right-1.5 -bottom-1.5 inline-flex size-4 items-center justify-center rounded-full bg-green-600 dark:bg-green-400'>\n <CheckIcon className='size-3 text-white' />\n </span>\n </div>\n )\n}\n\nexport default AvatarStatusRingDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-08.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/avatar-09.json
Normal file
18
public/r/avatar-09.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-09",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 9",
|
||||
"description": "Status avatar with away indicator showing amber status dot for absent/away state.",
|
||||
"registryDependencies": [
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-09.tsx",
|
||||
"content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\n\nconst AvatarStatusAwayDemo = () => {\n return (\n <div className='relative w-fit'>\n <Avatar className='rounded-sm'>\n <AvatarImage\n src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png'\n alt='Hallie Richards'\n className='rounded-sm'\n />\n <AvatarFallback className='text-xs'>HR</AvatarFallback>\n </Avatar>\n <span className='border-background absolute -top-1.5 -right-1.5 size-3 rounded-full border-2 bg-amber-600 dark:bg-amber-400'>\n <span className='sr-only'>Away</span>\n </span>\n </div>\n )\n}\n\nexport default AvatarStatusAwayDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-09.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/avatar-10.json
Normal file
21
public/r/avatar-10.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-10",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 10",
|
||||
"description": "Avatar with plus icon overlay for adding or editing profile functionality.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-10.tsx",
|
||||
"content": "import { PlusCircleIcon } from 'lucide-react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\n\nconst AvatarPlusDemo = () => {\n return (\n <div className='relative w-fit'>\n <Avatar className='size-10'>\n <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />\n <AvatarFallback className='text-xs'>HR</AvatarFallback>\n </Avatar>\n <button className='focus-visible:ring-ring/50 absolute -right-1 -bottom-1 inline-flex cursor-pointer items-center justify-center rounded-full focus-visible:ring-[3px] focus-visible:outline-none'>\n <PlusCircleIcon className='text-background size-5 fill-slate-400' />\n <span className='sr-only'>Add</span>\n </button>\n </div>\n )\n}\n\nexport default AvatarPlusDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-10.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
19
public/r/avatar-11.json
Normal file
19
public/r/avatar-11.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-11",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 11",
|
||||
"description": "Avatar with notification badge showing count number for alerts and messages.",
|
||||
"registryDependencies": [
|
||||
"avatar",
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-11.tsx",
|
||||
"content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\n\nconst AvatarNotificationBadgeDemo = () => {\n return (\n <div className='relative w-fit'>\n <Avatar className='size-10 rounded-sm'>\n <AvatarImage\n src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png'\n alt='Hallie Richards'\n className='rounded-sm'\n />\n <AvatarFallback className='text-xs'>HR</AvatarFallback>\n </Avatar>\n <Badge className='absolute -top-2.5 -right-2.5 h-5 min-w-5 bg-indigo-500 px-1 tabular-nums'>8</Badge>\n </div>\n )\n}\n\nexport default AvatarNotificationBadgeDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-11.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/avatar-12.json
Normal file
21
public/r/avatar-12.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-12",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 12",
|
||||
"description": "Avatar with verified badge showing check mark icon for verified accounts.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-12.tsx",
|
||||
"content": "import { BadgeCheckIcon } from 'lucide-react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\n\nconst AvatarVerifiedDemo = () => {\n return (\n <div className='relative w-fit'>\n <Avatar className='size-10'>\n <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />\n <AvatarFallback className='text-xs'>HR</AvatarFallback>\n </Avatar>\n <span className='absolute -top-1.5 -right-1.5'>\n <span className='sr-only'>Verified</span>\n <BadgeCheckIcon className='text-background size-5 fill-sky-500' />\n </span>\n </div>\n )\n}\n\nexport default AvatarVerifiedDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-12.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/avatar-13.json
Normal file
18
public/r/avatar-13.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-13",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 13",
|
||||
"description": "Avatar group displaying multiple overlapping users with ring borders.",
|
||||
"registryDependencies": [
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-13.tsx",
|
||||
"content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\n\nconst avatars = [\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png',\n fallback: 'OS',\n name: 'Olivia Sparks'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-6.png',\n fallback: 'HL',\n name: 'Howard Lloyd'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png',\n fallback: 'HR',\n name: 'Hallie Richards'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-16.png',\n fallback: 'JW',\n name: 'Jenny Wilson'\n }\n]\n\nconst AvatarGroupDemo = () => {\n return (\n <div className='flex -space-x-2'>\n {avatars.map((avatar, index) => (\n <Avatar key={index} className='ring-background ring-2'>\n <AvatarImage src={avatar.src} alt={avatar.name} />\n <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>\n </Avatar>\n ))}\n </div>\n )\n}\n\nexport default AvatarGroupDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-13.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/avatar-14.json
Normal file
18
public/r/avatar-14.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-14",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 14",
|
||||
"description": "Avatar group with count indicator showing additional users (+9) in overflow.",
|
||||
"registryDependencies": [
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-14.tsx",
|
||||
"content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\n\nconst avatars = [\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png',\n fallback: 'OS',\n name: 'Olivia Sparks'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-6.png',\n fallback: 'HL',\n name: 'Howard Lloyd'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png',\n fallback: 'HR',\n name: 'Hallie Richards'\n }\n]\n\nconst AvatarGroupMaxDemo = () => {\n return (\n <div className='flex -space-x-2'>\n {avatars.map((avatar, index) => (\n <Avatar key={index} className='ring-background ring-2'>\n <AvatarImage src={avatar.src} alt={avatar.name} />\n <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>\n </Avatar>\n ))}\n <Avatar className='ring-background ring-2'>\n <AvatarFallback className='text-xs'>+9</AvatarFallback>\n </Avatar>\n </div>\n )\n}\n\nexport default AvatarGroupMaxDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-14.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/avatar-15.json
Normal file
18
public/r/avatar-15.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-15",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 15",
|
||||
"description": "Large-sized avatar group with bigger dimensions for prominent display.",
|
||||
"registryDependencies": [
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-15.tsx",
|
||||
"content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\n\nconst avatars = [\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png',\n fallback: 'OS',\n name: 'Olivia Sparks'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-6.png',\n fallback: 'HL',\n name: 'Howard Lloyd'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png',\n fallback: 'HR',\n name: 'Hallie Richards'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-16.png',\n fallback: 'JW',\n name: 'Jenny Wilson'\n }\n]\n\nconst AvatarGroupSizeDemo = () => {\n return (\n <div className='flex -space-x-2'>\n {avatars.map((avatar, index) => (\n <Avatar key={index} className='ring-background size-12 ring-2'>\n <AvatarImage src={avatar.src} alt={avatar.name} />\n <AvatarFallback>{avatar.fallback}</AvatarFallback>\n </Avatar>\n ))}\n </div>\n )\n}\n\nexport default AvatarGroupSizeDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-15.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
19
public/r/avatar-16.json
Normal file
19
public/r/avatar-16.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-16",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 16",
|
||||
"description": "Avatar group with tooltip hover effects and elevation animation.",
|
||||
"registryDependencies": [
|
||||
"avatar",
|
||||
"tooltip"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-16.tsx",
|
||||
"content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'\n\nconst avatars = [\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png',\n fallback: 'OS',\n name: 'Olivia Sparks'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-6.png',\n fallback: 'HL',\n name: 'Howard Lloyd'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png',\n fallback: 'HR',\n name: 'Hallie Richards'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-16.png',\n fallback: 'JW',\n name: 'Jenny Wilson'\n }\n]\n\nconst AvatarGroupTooltipDemo = () => {\n return (\n <div className='flex -space-x-2'>\n {avatars.map((avatar, index) => (\n <Tooltip key={index}>\n <TooltipTrigger asChild>\n <Avatar className='ring-background ring-2 transition-all duration-300 ease-in-out hover:z-1 hover:-translate-y-1 hover:shadow-md'>\n <AvatarImage src={avatar.src} alt={avatar.name} />\n <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>\n </Avatar>\n </TooltipTrigger>\n <TooltipContent>{avatar.name}</TooltipContent>\n </Tooltip>\n ))}\n </div>\n )\n}\n\nexport default AvatarGroupTooltipDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-16.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/avatar-17.json
Normal file
18
public/r/avatar-17.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-17",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 17",
|
||||
"description": "Avatar group with smooth spacing transition on hover interaction.",
|
||||
"registryDependencies": [
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-17.tsx",
|
||||
"content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\n\nconst avatars = [\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png',\n fallback: 'OS',\n name: 'Olivia Sparks'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-6.png',\n fallback: 'HL',\n name: 'Howard Lloyd'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png',\n fallback: 'HR',\n name: 'Hallie Richards'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-16.png',\n fallback: 'JW',\n name: 'Jenny Wilson'\n }\n]\n\nconst AvatarGroupTransitionDemo = () => {\n return (\n <div className='flex -space-x-2 hover:space-x-1'>\n {avatars.map((avatar, index) => (\n <Avatar key={index} className='ring-background ring-2 transition-all duration-300 ease-in-out'>\n <AvatarImage src={avatar.src} alt={avatar.name} />\n <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>\n </Avatar>\n ))}\n </div>\n )\n}\n\nexport default AvatarGroupTransitionDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-17.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
19
public/r/avatar-18.json
Normal file
19
public/r/avatar-18.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-18",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 18",
|
||||
"description": "Avatar group with tooltip transitions and hover spacing effects.",
|
||||
"registryDependencies": [
|
||||
"avatar",
|
||||
"tooltip"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-18.tsx",
|
||||
"content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'\n\nconst avatars = [\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png',\n fallback: 'OS',\n name: 'Olivia Sparks'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-6.png',\n fallback: 'HL',\n name: 'Howard Lloyd'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png',\n fallback: 'HR',\n name: 'Hallie Richards'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-16.png',\n fallback: 'JW',\n name: 'Jenny Wilson'\n }\n]\n\nconst AvatarGroupTooltipTransitionDemo = () => {\n return (\n <div className='flex -space-x-2 hover:space-x-1'>\n {avatars.map((avatar, index) => (\n <Tooltip key={index}>\n <TooltipTrigger asChild>\n <Avatar className='ring-background ring-2 transition-all duration-300 ease-in-out'>\n <AvatarImage src={avatar.src} alt={avatar.name} />\n <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>\n </Avatar>\n </TooltipTrigger>\n <TooltipContent>{avatar.name}</TooltipContent>\n </Tooltip>\n ))}\n </div>\n )\n}\n\nexport default AvatarGroupTooltipTransitionDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-18.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
22
public/r/avatar-19.json
Normal file
22
public/r/avatar-19.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-19",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 19",
|
||||
"description": "Avatar group with dropdown menu showing additional users and actions.",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"avatar",
|
||||
"dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-19.tsx",
|
||||
"content": "import { PlusIcon } from 'lucide-react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'\n\nconst avatars = [\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png',\n fallback: 'OS',\n name: 'Olivia Sparks'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-6.png',\n fallback: 'HL',\n name: 'Howard Lloyd'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png',\n fallback: 'HR',\n name: 'Hallie Richards'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-16.png',\n fallback: 'JW',\n name: 'Jenny Wilson'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-1.png',\n fallback: 'DR',\n name: 'Darlene Robertson'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-2.png',\n fallback: 'LA',\n name: 'Leslie Alexander'\n }\n]\n\nconst AvatarGroupDropdownDemo = () => {\n return (\n <div className='flex -space-x-2'>\n {avatars.slice(0, 3).map((avatar, index) => (\n <Avatar key={index} className='ring-background ring-2'>\n <AvatarImage src={avatar.src} alt={avatar.name} />\n <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>\n </Avatar>\n ))}\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <button className='bg-muted has-focus-visible:ring-ring/50 ring-background flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full ring-2'>\n <PlusIcon className='size-4' />\n <span className='sr-only'>Add</span>\n </button>\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n {avatars.slice(3).map((avatar, index) => (\n <DropdownMenuItem key={index}>\n <Avatar>\n <AvatarImage src={avatar.src} alt={avatar.name} />\n <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>\n </Avatar>\n <span>{avatar.name}</span>\n </DropdownMenuItem>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n\nexport default AvatarGroupDropdownDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-19.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/avatar-20.json
Normal file
18
public/r/avatar-20.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-20",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 20",
|
||||
"description": "Avatar group with outlined container and background styling.",
|
||||
"registryDependencies": [
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-20.tsx",
|
||||
"content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\n\nconst avatars = [\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png',\n fallback: 'OS',\n name: 'Olivia Sparks'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-6.png',\n fallback: 'HL',\n name: 'Howard Lloyd'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png',\n fallback: 'HR',\n name: 'Hallie Richards'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-16.png',\n fallback: 'JW',\n name: 'Jenny Wilson'\n }\n]\n\nconst AvatarGroupOutlineDemo = () => {\n return (\n <div className='bg-background flex items-center rounded-full border p-1 shadow-sm'>\n <div className='flex -space-x-2'>\n {avatars.map((avatar, index) => (\n <Avatar key={index} className='ring-background ring-2'>\n <AvatarImage src={avatar.src} alt={avatar.name} />\n <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>\n </Avatar>\n ))}\n </div>\n <span className='text-muted-foreground hover:text-foreground flex items-center justify-center rounded-full bg-transparent px-2 text-xs shadow-none hover:bg-transparent'>\n +3\n </span>\n </div>\n )\n}\n\nexport default AvatarGroupOutlineDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-20.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/avatar-21.json
Normal file
18
public/r/avatar-21.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-21",
|
||||
"type": "registry:component",
|
||||
"title": "Avatar 21",
|
||||
"description": "Avatar group with popularity indicator styling and text showcasing community trust.",
|
||||
"registryDependencies": [
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/avatar/avatar-21.tsx",
|
||||
"content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\n\nconst avatars = [\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png',\n fallback: 'OS',\n name: 'Olivia Sparks'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-6.png',\n fallback: 'HL',\n name: 'Howard Lloyd'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png',\n fallback: 'HR',\n name: 'Hallie Richards'\n },\n {\n src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-16.png',\n fallback: 'JW',\n name: 'Jenny Wilson'\n }\n]\n\nconst AvatarGroupPopularityIndicatorDemo = () => {\n return (\n <div className='bg-background flex flex-wrap items-center justify-center rounded-full border p-1 shadow-sm'>\n <div className='flex -space-x-1'>\n {avatars.map((avatar, index) => (\n <Avatar key={index} className='ring-background size-6 ring-2'>\n <AvatarImage src={avatar.src} alt={avatar.name} />\n <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>\n </Avatar>\n ))}\n </div>\n <p className='text-muted-foreground px-2 text-xs'>\n Loved by <strong className='text-foreground font-medium'>10K+</strong> developers.\n </p>\n </div>\n )\n}\n\nexport default AvatarGroupPopularityIndicatorDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/avatar/avatar-21.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/badge-01.json
Normal file
18
public/r/badge-01.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-01",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 1",
|
||||
"description": "Default badge demonstrating basic styling with standard text display",
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-01.tsx",
|
||||
"content": "import { Badge } from '@/components/ui/badge'\n\nconst BadgeDemo = () => {\n return <Badge>Default</Badge>\n}\n\nexport default BadgeDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-01.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/badge-02.json
Normal file
18
public/r/badge-02.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-02",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 2",
|
||||
"description": "Secondary variant badge with muted styling for less prominent labels",
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-02.tsx",
|
||||
"content": "import { Badge } from '@/components/ui/badge'\n\nconst BadgeSecondaryDemo = () => {\n return <Badge variant='secondary'>Secondary</Badge>\n}\n\nexport default BadgeSecondaryDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-02.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/badge-03.json
Normal file
18
public/r/badge-03.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-03",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 3",
|
||||
"description": "Destructive variant badge with red styling for error or warning states",
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-03.tsx",
|
||||
"content": "import { Badge } from '@/components/ui/badge'\n\nconst BadgeDestructiveDemo = () => {\n return <Badge variant='destructive'>Destructive</Badge>\n}\n\nexport default BadgeDestructiveDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-03.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/badge-04.json
Normal file
18
public/r/badge-04.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-04",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 4",
|
||||
"description": "Outline variant badge with bordered styling for subtle emphasis",
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-04.tsx",
|
||||
"content": "import { Badge } from '@/components/ui/badge'\n\nconst BadgeOutlineDemo = () => {\n return <Badge variant='outline'>Outline</Badge>\n}\n\nexport default BadgeOutlineDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-04.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
15
public/r/badge-05.json
Normal file
15
public/r/badge-05.json
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-05",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 5",
|
||||
"description": "Dot indicator badge with colored circle for compact status representation",
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-05.tsx",
|
||||
"content": "const BadgeDotDemo = () => {\n return (\n <span className='inline-flex w-fit shrink-0 items-center justify-center gap-1 px-2 py-0.5 text-xs font-medium whitespace-nowrap'>\n <span className='bg-primary size-2 rounded-full' aria-hidden='true' />\n Dot Badge\n </span>\n )\n}\n\nexport default BadgeDotDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-05.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/badge-06.json
Normal file
18
public/r/badge-06.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-06",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 6",
|
||||
"description": "Rounded badge with full border radius for pill-shaped appearance",
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-06.tsx",
|
||||
"content": "import { Badge } from '@/components/ui/badge'\n\nconst BadgeRoundedDemo = () => {\n return <Badge className='rounded-sm'>Rounded</Badge>\n}\n\nexport default BadgeRoundedDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-06.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/badge-07.json
Normal file
18
public/r/badge-07.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-07",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 7",
|
||||
"description": "Number badge with circular design for count and notification displays",
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-07.tsx",
|
||||
"content": "import { Badge } from '@/components/ui/badge'\n\nconst BadgeNumberDemo = () => {\n return <Badge className='h-5 min-w-5 px-1 tabular-nums'>8</Badge>\n}\n\nexport default BadgeNumberDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-07.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/badge-08.json
Normal file
18
public/r/badge-08.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-08",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 8",
|
||||
"description": "Large size badge with increased padding for prominence",
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-08.tsx",
|
||||
"content": "import { Badge } from '@/components/ui/badge'\n\nconst BadgeLargeDemo = () => {\n return <Badge className='px-3 py-1'>Large</Badge>\n}\n\nexport default BadgeLargeDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-08.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/badge-09.json
Normal file
18
public/r/badge-09.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-09",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 9",
|
||||
"description": "Small size badge with reduced padding for compact display areas",
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-09.tsx",
|
||||
"content": "import { Badge } from '@/components/ui/badge'\n\nconst BadgeSmallDemo = () => {\n return <Badge className='px-1.5 py-px'>Small</Badge>\n}\n\nexport default BadgeSmallDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-09.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/badge-10.json
Normal file
18
public/r/badge-10.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-10",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 10",
|
||||
"description": "Badge with icon integration for enhanced visual context",
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-10.tsx",
|
||||
"content": "import { StarIcon } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\n\nconst BadgeWithIconDemo = () => {\n return (\n <Badge>\n <StarIcon className='size-3' />\n With Icon\n </Badge>\n )\n}\n\nexport default BadgeWithIconDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-10.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/badge-11.json
Normal file
21
public/r/badge-11.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-11",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 11",
|
||||
"description": "Link badge that can be used as clickable navigation element",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-11.tsx",
|
||||
"content": "import { ArrowRightIcon } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\n\nconst BadgeLinkDemo = () => {\n return (\n <Badge asChild>\n <a href='#' className='focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-0'>\n Link <ArrowRightIcon className='size-3' />\n </a>\n </Badge>\n )\n}\n\nexport default BadgeLinkDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-11.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/badge-12.json
Normal file
21
public/r/badge-12.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-12",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 12",
|
||||
"description": "Closable badge with X button for dismissible notifications",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-12.tsx",
|
||||
"content": "'use client'\n\nimport { useState } from 'react'\n\nimport { XIcon } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\n\nconst BadgeClosableDemo = () => {\n const [isActive, setIsActive] = useState(true)\n\n if (!isActive) return null\n\n return (\n <Badge>\n Closable\n <button\n className='focus-visible:border-ring focus-visible:ring-ring/50 text-primary-foreground/60 hover:text-primary-foreground -my-px -ms-px -me-1.5 inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[inherit] p-0 transition-[color,box-shadow] outline-none focus-visible:ring-[3px]'\n aria-label='Close'\n onClick={() => setIsActive(false)}\n >\n <XIcon className='size-3' aria-hidden='true' />\n </button>\n </Badge>\n )\n}\n\nexport default BadgeClosableDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-12.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
22
public/r/badge-13.json
Normal file
22
public/r/badge-13.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-13",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 13",
|
||||
"description": "Selectable badge with checkbox functionality for interactive selection",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"badge",
|
||||
"checkbox"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-13.tsx",
|
||||
"content": "'use client'\n\nimport { useState, useId } from 'react'\n\nimport { CheckCircleIcon } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Checkbox } from '@/components/ui/checkbox'\n\nconst BadgeSelectableDemo = () => {\n const [selected, setSelected] = useState(false)\n\n const id = useId()\n\n return (\n <Badge\n variant={selected ? 'secondary' : 'outline'}\n className='has-focus-visible:border-ring/50 has-focus-visible:ring-ring/50 relative cursor-pointer rounded-sm outline-none has-focus-visible:ring-2'\n >\n <Checkbox\n id={id}\n className='peer sr-only after:absolute after:inset-0'\n checked={selected}\n onCheckedChange={checked => setSelected(!!checked)}\n />\n <CheckCircleIcon\n className='hidden size-3 text-green-600 peer-data-[state=checked]:block dark:text-green-400'\n aria-hidden='true'\n />\n <label htmlFor={id} className='cursor-pointer select-none after:absolute after:inset-0'>\n {selected ? 'Selected' : 'Selectable'}\n </label>\n </Badge>\n )\n}\n\nexport default BadgeSelectableDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-13.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/badge-14.json
Normal file
18
public/r/badge-14.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-14",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 14",
|
||||
"description": "Gradient styled badge with vibrant indigo-to-pink color transition",
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-14.tsx",
|
||||
"content": "import { Badge } from '@/components/ui/badge'\n\nconst BadgeGradientDemo = () => {\n return (\n <Badge className='rounded-sm border-transparent bg-gradient-to-r from-indigo-500 to-pink-500 [background-size:105%] bg-center text-white'>\n Gradient\n </Badge>\n )\n}\n\nexport default BadgeGradientDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-14.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/badge-15.json
Normal file
18
public/r/badge-15.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-15",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 15",
|
||||
"description": "Gradient outline badge with bordered gradient effect",
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-15.tsx",
|
||||
"content": "import { Badge } from '@/components/ui/badge'\n\nconst BadgeGradientOutlineDemo = () => {\n return (\n <div className='flex items-center justify-center rounded-full bg-gradient-to-r from-indigo-500 to-pink-500 p-0.5'>\n <Badge className='bg-background hover:bg-background text-foreground border-none'>Gradient Outline</Badge>\n </div>\n )\n}\n\nexport default BadgeGradientOutlineDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-15.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/badge-16.json
Normal file
18
public/r/badge-16.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-16",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 16",
|
||||
"description": "In-progress status badge with amber color and dot indicator",
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-16.tsx",
|
||||
"content": "import { Badge } from '@/components/ui/badge'\n\nconst BadgeInProgressDemo = () => {\n return (\n <Badge className='border-none bg-amber-600/10 text-amber-600 focus-visible:ring-amber-600/20 focus-visible:outline-none dark:bg-amber-400/10 dark:text-amber-400 dark:focus-visible:ring-amber-400/40 [a&]:hover:bg-amber-600/5 dark:[a&]:hover:bg-amber-400/5'>\n <span className='size-1.5 rounded-full bg-amber-600 dark:bg-amber-400' aria-hidden='true' />\n In Progress\n </Badge>\n )\n}\n\nexport default BadgeInProgressDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-16.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/badge-17.json
Normal file
18
public/r/badge-17.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-17",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 17",
|
||||
"description": "Blocked status badge with destructive color and dot indicator",
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-17.tsx",
|
||||
"content": "import { Badge } from '@/components/ui/badge'\n\nconst BadgeBlockedDemo = () => {\n return (\n <Badge className='bg-destructive/10 [a&]:hover:bg-destructive/5 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive border-none focus-visible:outline-none'>\n <span className='bg-destructive size-1.5 rounded-full' aria-hidden='true' />\n Blocked\n </Badge>\n )\n}\n\nexport default BadgeBlockedDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-17.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/badge-18.json
Normal file
18
public/r/badge-18.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-18",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 18",
|
||||
"description": "Completed status badge with green color and dot indicator",
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-18.tsx",
|
||||
"content": "import { Badge } from '@/components/ui/badge'\n\nconst BadgeCompletedDemo = () => {\n return (\n <Badge className='border-none bg-green-600/10 text-green-600 focus-visible:ring-green-600/20 focus-visible:outline-none dark:bg-green-400/10 dark:text-green-400 dark:focus-visible:ring-green-400/40 [a&]:hover:bg-green-600/5 dark:[a&]:hover:bg-green-400/5'>\n <span className='size-1.5 rounded-full bg-green-600 dark:bg-green-400' aria-hidden='true' />\n Completed\n </Badge>\n )\n}\n\nexport default BadgeCompletedDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-18.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/badge-19.json
Normal file
21
public/r/badge-19.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-19",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 19",
|
||||
"description": "Pending status badge with amber outline and alert icon",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-19.tsx",
|
||||
"content": "import { AlertCircleIcon } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\n\nconst BadgePendingDemo = () => {\n return (\n <Badge\n variant='outline'\n className='rounded-sm border-amber-600 text-amber-600 dark:border-amber-400 dark:text-amber-400 [a&]:hover:bg-amber-600/10 [a&]:hover:text-amber-600/90 dark:[a&]:hover:bg-amber-400/10 dark:[a&]:hover:text-amber-400/90'\n >\n <AlertCircleIcon className='size-3' />\n Pending\n </Badge>\n )\n}\n\nexport default BadgePendingDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-19.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/badge-20.json
Normal file
21
public/r/badge-20.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-20",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 20",
|
||||
"description": "Failed status badge with destructive outline and ban icon",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-20.tsx",
|
||||
"content": "import { BanIcon } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\n\nconst BadgeFailedDemo = () => {\n return (\n <Badge\n variant='outline'\n className='text-destructive [a&]:hover:bg-destructive/10 [a&]:hover:text-destructive/90 border-destructive rounded-sm'\n >\n <BanIcon className='size-3' />\n Failed\n </Badge>\n )\n}\n\nexport default BadgeFailedDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-20.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
public/r/badge-21.json
Normal file
21
public/r/badge-21.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-21",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 21",
|
||||
"description": "Successful status badge with green outline and check icon",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-21.tsx",
|
||||
"content": "import { CheckCircleIcon } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\n\nconst BadgeSuccessfulDemo = () => {\n return (\n <Badge\n variant='outline'\n className='rounded-sm border-green-600 text-green-600 dark:border-green-400 dark:text-green-400 [a&]:hover:bg-green-600/10 [a&]:hover:text-green-600/90 dark:[a&]:hover:bg-green-400/10 dark:[a&]:hover:text-green-400/90'\n >\n <CheckCircleIcon className='size-3' />\n Successful\n </Badge>\n )\n}\n\nexport default BadgeSuccessfulDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-21.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/badge-22.json
Normal file
18
public/r/badge-22.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-22",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 22",
|
||||
"description": "Avatar badge combining user profile image with label text",
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-22.tsx",
|
||||
"content": "import { Badge } from '@/components/ui/badge'\n\nconst BadgeAvatarDemo = () => {\n return (\n <Badge variant='outline' className='p-1 pr-2'>\n <img\n src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png'\n alt='Hallie Richards'\n className='size-6 rounded-full'\n />\n Avatar\n </Badge>\n )\n}\n\nexport default BadgeAvatarDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-22.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
22
public/r/badge-23.json
Normal file
22
public/r/badge-23.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-23",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 23",
|
||||
"description": "Cart notification badge with count display over shopping icon",
|
||||
"dependencies": [
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"avatar",
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-23.tsx",
|
||||
"content": "import { ShoppingCartIcon } from 'lucide-react'\n\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\n\nconst BadgeCartDemo = () => {\n return (\n <div className='relative w-fit'>\n <Avatar className='size-9 rounded-sm'>\n <AvatarFallback className='rounded-sm'>\n <ShoppingCartIcon className='size-5' />\n </AvatarFallback>\n </Avatar>\n <Badge className='absolute -top-2.5 -right-2.5 h-5 min-w-5 px-1 tabular-nums'>8</Badge>\n </div>\n )\n}\n\nexport default BadgeCartDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-23.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
public/r/badge-24.json
Normal file
18
public/r/badge-24.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-24",
|
||||
"type": "registry:component",
|
||||
"title": "Badge 24",
|
||||
"description": "Online status indicator badge with green dot over avatar",
|
||||
"registryDependencies": [
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "src/components/shadcn-studio/badge/badge-24.tsx",
|
||||
"content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\n\nconst BadgeStatusOnlineDemo = () => {\n return (\n <div className='relative w-fit'>\n <Avatar className='size-10'>\n <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />\n <AvatarFallback>HR</AvatarFallback>\n </Avatar>\n <span className='border-background absolute -right-0.5 -bottom-0.5 size-3 rounded-full border-2 bg-green-600 dark:bg-green-400'>\n <span className='sr-only'>Online</span>\n </span>\n </div>\n )\n}\n\nexport default BadgeStatusOnlineDemo\n",
|
||||
"type": "registry:component",
|
||||
"target": "components/shadcn-studio/badge/badge-24.tsx"
|
||||
}
|
||||
]
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue