Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Attachment
- Avatar
- Badge
- Breadcrumb
- Bubble
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input OTP
- Input Group
- Item
- Kbd
- Label
- Marker
- Menubar
- Message
- Message Scroller
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle
- Toggle Group
- Tooltip
- New Component
Elements
Charts
Icons
New Icon
Replace this description with a one-line summary of what the icon set covers.
import { NewIcon } from "@/components/ui/new-icon";
export const NewIconDemo = () => <NewIcon size={32} />;Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes |
size | number | 24 | Icon size in pixels |
Usage
import { NewIcon } from "@/components/ui/new-icon";
<NewIcon />Specs
# i-new-icon — Icon Specs
## Component
- name: new-icon
- file: registry/mint/new-icon.tsx
- installs to: components/ui/new-icon.tsx
- dependencies: (none — add if needed)
- registryDependencies: (none — add if needed)
## What is it
Replace this with a description of what the icon set covers, when to use it
instead of the default `lucide-react` set, and any brand-specific meaning
individual glyphs carry.
## Visual identity
Describe the visual character of this icon set in this theme.
- Stroke/fill: (e.g. stroke-based, 1.5px, currentColor)
- Grid: (e.g. 24x24 viewBox)
- Weight: (e.g. light, regular, bold)
- Key trait: (the one thing that makes it recognisable)
## Design tokens
--foreground: oklch(0.145 0 0)
--muted-foreground: oklch(0.52 0.06 155)
--primary: oklch(0.5 0.14 155)
## shadcn config (components.json)
- style: new-york
- rsc: true
- tsx: true
- baseColor: neutral
- cssVariables: true
- iconLibrary: lucide
- aliases:
- components → @/components
- ui → @/components/ui
- utils → @/lib/utils
- lib → @/lib
- hooks → @/hooks
## Variants
- default → currentColor, inherits from parent text color
- (add more variants as needed, e.g. filled, duotone)
## States
- default: (describe the resting appearance)
- disabled: opacity-50
## Conventions
- Use cn() from @/lib/utils for all conditional classNames
- Icons use the i- prefix to distinguish from elements (e-), blocks (b-), and charts (c-)
- Use currentColor for stroke/fill so icons inherit text color by default
- Accept a `size` prop (number, in pixels) — do not hardcode dimensions
- Tailwind CSS 4 utility classes only — no inline styles
- No external dependencies unless declared in registry.json
- Decorative icons need aria-hidden; meaningful icons need aria-labelInstallation
$ npx shadcn add \https://gin-design.vercel.app/new-iconOn This Page