문서
변경 로그
변경 로그
최신 업데이트 및 공지 사항입니다.
2024년 9월 - 새로운 컴포넌트
네비게이션 메뉴 (Navigation Menu)
웹사이트 탐색을 위한 링크 모음입니다.
import { siteConfig } from "@/config/site";
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuDescription,
NavigationMenuItem,
NavigationMenuItemLabel,
NavigationMenuLink,
NavigationMenuTrigger,
} from "@repo/tailwindcss/ui/navigation-menu";
import type { ParentProps } from "solid-js";
import { For } from "solid-js";
const ListItem = (props: ParentProps<{ title: string; href: string }>) => {
return (
<NavigationMenuLink
href={props.href}
class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-[box-shadow,background-color] duration-200 hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring"
>
<NavigationMenuItemLabel class="text-sm font-medium leading-none">
{props.title}
</NavigationMenuItemLabel>
<NavigationMenuDescription class="line-clamp-2 text-sm leading-snug text-muted-foreground">
{props.children}
</NavigationMenuDescription>
</NavigationMenuLink>
);
};
const components: { title: string; href: string; description: string }[] = [
{
title: "Data Table",
href: "/docs/components/data-table",
description: "Powerful table and datagrids built using TanStack Table.",
},
{
title: "Date Picker",
href: "/docs/components/date-picker",
description:
"A component that allows users to select a date from a calendar.",
},
{
title: "OTP Field",
href: "/docs/components/otp-field",
description: "An accessible and customizable OTP Input component.",
},
{
title: "Resizable",
href: "/docs/components/resizable",
description:
"A component that divides your interface into resizable sections.",
},
{
title: "Sonner",
href: "/docs/components/sonner",
description: "An opinionated toast component for Solid.",
},
{
title: "Toggle Group",
href: "/docs/components/toggle-group",
description:
"A set of two-state buttons that can be toggled on (pressed) or off (not pressed).",
},
];
const NavigationMenuDemo = () => {
return (
<NavigationMenu>
<NavigationMenuItem>
<NavigationMenuTrigger class="transition-[box-shadow,background-color] focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring data-[expanded]:bg-accent">
Learn
</NavigationMenuTrigger>
<NavigationMenuContent class="grid gap-3 p-4 w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr] [&>li:first-of-type]:row-span-3">
<NavigationMenuLink
href="/"
class="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none transition-shadow duration-200 hover:shadow-md focus-visible:shadow-md focus-visible:ring-[1.5px] focus-visible:ring-ring"
>
<NavigationMenuItemLabel class="mb-2 mt-4 text-lg font-medium">
{siteConfig.title}
</NavigationMenuItemLabel>
<NavigationMenuDescription class="text-sm leading-tight text-muted-foreground">
{siteConfig.description}
</NavigationMenuDescription>
</NavigationMenuLink>
<ListItem href="/docs" title="Introduction">
{siteConfig.description}.
</ListItem>
<ListItem href="/docs/installation" title="Installation">
How to install dependencies and structure your app.
</ListItem>
<ListItem href="/docs/components/typography" title="Typography">
Styles for headings, paragraphs, lists...etc.
</ListItem>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger class="transition-[box-shadow,background-color] focus-visible:outline-none focus-visible:ring-1.5px focus-visible:ring-ring data-[expanded]:bg-accent">
Overview
</NavigationMenuTrigger>
<NavigationMenuContent class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
<For each={components}>
{(item) => (
<ListItem href={item.href} title={item.title}>
{item.description}
</ListItem>
)}
</For>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuTrigger
as="a"
href="/docs"
class="transition-[box-shadow,background-color] focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring data-[expanded]:bg-accent"
>
Documentation
</NavigationMenuTrigger>
</NavigationMenu>
);
};
export default NavigationMenuDemo;2024년 6월 - 새로운 컴포넌트
숫자 필드 (Number Field)
사용자가 키보드로 사용자 지정 숫자 항목을 입력할 수 있는 숫자 입력 필드입니다.
import {
NumberField,
NumberFieldDecrementTrigger,
NumberFieldGroup,
NumberFieldIncrementTrigger,
NumberFieldInput,
NumberFieldLabel,
} from "@repo/tailwindcss/ui/number-field";
const NumberFieldDemo = () => {
const thisYear = () => new Date(Date.now()).getUTCFullYear();
const age = () => thisYear() - 2001;
return (
<NumberField defaultValue={age()} minValue={0}>
<NumberFieldLabel>Age</NumberFieldLabel>
<NumberFieldGroup>
<NumberFieldDecrementTrigger aria-label="Decrement" />
<NumberFieldInput />
<NumberFieldIncrementTrigger aria-label="Increment" />
</NumberFieldGroup>
</NumberField>
);
};
export default NumberFieldDemo;OTP 필드 (OTP Field)
모든 기능을 갖춘 OTP 입력 컴포넌트입니다. 모든 기본 키 바인딩을 지원하며 접근성이 뛰어납니다. Android 및 iOS의 복사, 붙여넣기, 잘라내기 및 그 외 많은 기능을 지원합니다. @corvu/otp-field를 기반으로 구축되었습니다. Jasmin의 훌륭한 작업물입니다.
import {
OTPField,
OTPFieldGroup,
OTPFieldInput,
OTPFieldSeparator,
OTPFieldSlot,
} from "@repo/tailwindcss/ui/otp-field";
const OtpFieldDemo = () => {
return (
<OTPField maxLength={6}>
<OTPFieldInput />
<OTPFieldGroup>
<OTPFieldSlot index={0} />
<OTPFieldSlot index={1} />
<OTPFieldSlot index={2} />
</OTPFieldGroup>
<OTPFieldSeparator />
<OTPFieldGroup>
<OTPFieldSlot index={3} />
<OTPFieldSlot index={4} />
<OTPFieldSlot index={5} />
</OTPFieldGroup>
</OTPField>
);
};
export default OtpFieldDemo;메뉴바 (Menubar)
데스크톱 애플리케이션에서 흔히 볼 수 있는 시각적으로 고정된 메뉴로, 일관된 명령어 집합에 빠르게 접근할 수 있도록 합니다.
import {
Menubar,
MenubarCheckboxItem,
MenubarContent,
MenubarItem,
MenubarMenu,
MenubarRadioGroup,
MenubarRadioItem,
MenubarSeparator,
MenubarShortcut,
MenubarSub,
MenubarSubContent,
MenubarSubTrigger,
MenubarTrigger,
} from "@repo/tailwindcss/ui/menubar";
const MenubarDemo = () => {
return (
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>
New Tab <MenubarShortcut>⌘T</MenubarShortcut>
</MenubarItem>
<MenubarItem>
New Window <MenubarShortcut>⌘N</MenubarShortcut>
</MenubarItem>
<MenubarItem disabled>New Incognito Window</MenubarItem>
<MenubarSeparator />
<MenubarSub>
<MenubarSubTrigger>Share</MenubarSubTrigger>
<MenubarSubContent>
<MenubarItem>Email link</MenubarItem>
<MenubarItem>Messages</MenubarItem>
<MenubarItem>Notes</MenubarItem>
</MenubarSubContent>
</MenubarSub>
<MenubarSeparator />
<MenubarItem>
Print... <MenubarShortcut>⌘P</MenubarShortcut>
</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>Edit</MenubarTrigger>
<MenubarContent>
<MenubarItem>
Undo <MenubarShortcut>⌘Z</MenubarShortcut>
</MenubarItem>
<MenubarItem>
Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
</MenubarItem>
<MenubarSeparator />
<MenubarSub>
<MenubarSubTrigger>Find</MenubarSubTrigger>
<MenubarSubContent>
<MenubarItem>Search the web</MenubarItem>
<MenubarSeparator />
<MenubarItem>Find...</MenubarItem>
<MenubarItem>Find Next</MenubarItem>
<MenubarItem>Find Previous</MenubarItem>
</MenubarSubContent>
</MenubarSub>
<MenubarSeparator />
<MenubarItem>Cut</MenubarItem>
<MenubarItem>Copy</MenubarItem>
<MenubarItem>Paste</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>View</MenubarTrigger>
<MenubarContent>
<MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
<MenubarCheckboxItem checked>
Always Show Full URLs
</MenubarCheckboxItem>
<MenubarSeparator />
<MenubarItem inset>
Reload <MenubarShortcut>⌘R</MenubarShortcut>
</MenubarItem>
<MenubarItem disabled inset>
Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
</MenubarItem>
<MenubarSeparator />
<MenubarItem inset>Toggle Fullscreen</MenubarItem>
<MenubarSeparator />
<MenubarItem inset>Hide Sidebar</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>Profiles</MenubarTrigger>
<MenubarContent>
<MenubarRadioGroup value="benoit">
<MenubarRadioItem value="andy">Andy</MenubarRadioItem>
<MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
<MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
</MenubarRadioGroup>
<MenubarSeparator />
<MenubarItem inset>Edit...</MenubarItem>
<MenubarSeparator />
<MenubarItem inset>Add Profile...</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>
);
};
export default MenubarDemo;캘린더 (Calendar)
새로운 Calendar 데모입니다.
import {
DatePicker,
DatePickerContent,
DatePickerContext,
DatePickerRangeText,
DatePickerTable,
DatePickerTableBody,
DatePickerTableCell,
DatePickerTableCellTrigger,
DatePickerTableHead,
DatePickerTableHeader,
DatePickerTableRow,
DatePickerView,
DatePickerViewControl,
DatePickerViewTrigger,
} from "@repo/tailwindcss/ui/date-picker";
import { For } from "solid-js";
const CalendarDemo = () => {
return (
<DatePicker open>
<DatePickerContent>
<DatePickerView view="day">
<DatePickerContext>
{(context) => (
<>
<DatePickerViewControl>
<DatePickerViewTrigger>
<DatePickerRangeText />
</DatePickerViewTrigger>
</DatePickerViewControl>
<DatePickerTable>
<DatePickerTableHead>
<DatePickerTableRow>
<For each={context().weekDays}>
{(weekDay) => (
<DatePickerTableHeader>
{weekDay.short}
</DatePickerTableHeader>
)}
</For>
</DatePickerTableRow>
</DatePickerTableHead>
<DatePickerTableBody>
<For each={context().weeks}>
{(week) => (
<DatePickerTableRow>
<For each={week}>
{(day) => (
<DatePickerTableCell value={day}>
<DatePickerTableCellTrigger>
{day.day}
</DatePickerTableCellTrigger>
</DatePickerTableCell>
)}
</For>
</DatePickerTableRow>
)}
</For>
</DatePickerTableBody>
</DatePickerTable>
</>
)}
</DatePickerContext>
</DatePickerView>
<DatePickerView view="month">
<DatePickerContext>
{(context) => (
<>
<DatePickerViewControl>
<DatePickerViewTrigger>
<DatePickerRangeText />
</DatePickerViewTrigger>
</DatePickerViewControl>
<DatePickerTable>
<DatePickerTableBody>
<For
each={context().getMonthsGrid({
columns: 4,
format: "short",
})}
>
{(months) => (
<DatePickerTableRow>
<For each={months}>
{(month) => (
<DatePickerTableCell value={month.value}>
<DatePickerTableCellTrigger>
{month.label}
</DatePickerTableCellTrigger>
</DatePickerTableCell>
)}
</For>
</DatePickerTableRow>
)}
</For>
</DatePickerTableBody>
</DatePickerTable>
</>
)}
</DatePickerContext>
</DatePickerView>
<DatePickerView view="year">
<DatePickerContext>
{(context) => (
<>
<DatePickerViewControl>
<DatePickerViewTrigger>
<DatePickerRangeText />
</DatePickerViewTrigger>
</DatePickerViewControl>
<DatePickerTable>
<DatePickerTableBody>
<For
each={context().getYearsGrid({
columns: 4,
})}
>
{(years) => (
<DatePickerTableRow>
<For each={years}>
{(year) => (
<DatePickerTableCell value={year.value}>
<DatePickerTableCellTrigger>
{year.label}
</DatePickerTableCellTrigger>
</DatePickerTableCell>
)}
</For>
</DatePickerTableRow>
)}
</For>
</DatePickerTableBody>
</DatePickerTable>
</>
)}
</DatePickerContext>
</DatePickerView>
</DatePickerContent>
</DatePicker>
);
};
export default CalendarDemo;2024년 5월 - CLI 및 컴포넌트 업데이트
CLI 업데이트
diff
diff를 사용하여 업스트림 컴포넌트 업데이트를 추적하세요.
diff 명령어를 실행하여 업데이트가 가능한 컴포넌트 목록을 확인하세요.
npx shadcn-solid diff┌ shadcn-solid
│
◇ The following components have updates avaiable
│
● alert - path\to\my-ap\components\ui\alert.tsx
│
● card - path\to\my-ap\components\ui\card.tsx
│
└ Run diff <component> to see the changes그런 다음 diff [component]를 실행하여 변경 사항을 확인하세요.
npx shadcn-solid diff alertconst alertVariants = cva(
- "relative w-full rounded-lg border",
+ "relative w-full pl-12 rounded-lg border"
) add
여러 컴포넌트를 추가하거나 —all을 사용하는 것이 훨씬 빨라졌습니다.
스키마 업데이트
components.json 스키마가 업데이트되었습니다.
{
"$schema": "https://ko.shadcn-solid.com/schema.json",
"tailwind": {
"config": "tailwind.config.cjs",
"css": {
"path": "src/app.css",
"variable": true
},
"color": "slate",
"prefix": ""
},
"alias": {
"component": "@/components",
"cn": "@/libs/cn"
}
}컴포넌트 업데이트
shadcn-solid에 새로운 컴포넌트를 추가했습니다.
- 토글 그룹 (Toggle Group) - 켜짐(눌림) 또는 꺼짐(눌리지 않음) 상태로 토글할 수 있는 두 가지 상태의 버튼 세트입니다.
- Sonner - Solid를 위한 독창적인 토스트(toast) 컴포넌트입니다.
토글 그룹 (Toggle Group)
import {
ToggleGroup,
ToggleGroupItem,
} from "@repo/tailwindcss/ui/toggle-group";
const ToggleGroupDemo = () => {
return (
<ToggleGroup multiple>
<ToggleGroupItem value="bold" aria-label="Toggle bold">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
/>
</svg>
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5h6M7 19h6m1-14l-4 14"
/>
</svg>
</ToggleGroupItem>
<ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
/>
</svg>
</ToggleGroupItem>
</ToggleGroup>
);
};
export default ToggleGroupDemo;Sonner
import { Button } from "@repo/tailwindcss/ui/button";
import { toast } from "solid-sonner";
const SonnerDemo = () => {
return (
<Button
variant="outline"
onClick={() =>
toast("Event has been created", {
description: "Sunday, December 03, 2023 at 9:00 AM",
action: {
label: "Undo",
onClick: () => console.log("Undo"),
},
})
}
>
Show Toast
</Button>
);
};
export default SonnerDemo;기존 컴포넌트인 Splitter와 Command를 각각 corvu의 새로운 Resizable과 cmdk의 Solid 포트를 활용하도록 전환했습니다.
2024년 4월 - UnoCSS.
즉각적인 아토믹 CSS 엔진인 UnoCSS를 지원하게 된 것을 기쁘게 생각합니다.
프레임워크 선택
init 명령어를 사용하여 프로젝트 설정 중에 선호하는 CSS 프레임워크를 선택할 수 있습니다.
◆ Which CSS framework would you like to use?
│ ○ TailwindCSS
│ ● UnoCSS컴포넌트 설치
add 명령어에 새로운 --all 옵션이 추가되었습니다. 이 개선 사항은 사용 가능한 모든 컴포넌트를 한 번에 설치하는 것을 단순화합니다.
2024년 3월 - Drawer.
- Drawer - 뷰포트의 어느 쪽이든 부착할 수 있는 드래그 가능한 다이얼로그입니다.
Drawer
Corvu의 Drawer 컴포넌트를 기반으로 구축되었습니다.
2024년 3월 - 문서 및 UI 업데이트, 버그 수정.
- Date Picker의 스타일을 업데이트했습니다.
- Toggle 및 Toast의 문서를 업데이트했습니다.
- Checkbox의 포커스 문제를 수정했습니다.
- Toast에서 발생하던 중복 문제를 해결했습니다.
- Tabs의 스타일링을 수정했습니다.
2024년 2월 - 새로운 컴포넌트, CLI 등
shadcn-solid에 새로운 컴포넌트를 추가하고 CLI를 개선했습니다.
새로운 기능에 대한 간략한 개요입니다.
- Carousel - 모션, 스와이프 제스처 및 키보드를 지원하는 캐러셀 컴포넌트입니다.
- Pagination - 사용자가 페이지 범위에서 특정 페이지를 선택할 수 있게 해주는 페이지네이션 컴포넌트입니다.
- Command - 조합 가능한 커맨드 메뉴 컴포넌트입니다.
- Date Picker - 사용자가 캘린더에서 날짜를 선택할 수 있게 해주는 컴포넌트입니다.
- CLI 업데이트 - 사용자 지정 Tailwind 접두사 지원,
style제거 등.
날짜 선택기 (Date Picker)
import {
DatePicker,
DatePickerContent,
DatePickerContext,
DatePickerControl,
DatePickerInput,
DatePickerPositioner,
DatePickerRangeText,
DatePickerTable,
DatePickerTableBody,
DatePickerTableCell,
DatePickerTableCellTrigger,
DatePickerTableHead,
DatePickerTableHeader,
DatePickerTableRow,
DatePickerTrigger,
DatePickerView,
DatePickerViewControl,
DatePickerViewTrigger,
} from "@repo/tailwindcss/ui/date-picker";
import { Index } from "solid-js";
import { Portal } from "solid-js/web";
const DatePickerDemo = () => {
return (
<DatePicker>
<DatePickerControl>
<DatePickerInput />
<DatePickerTrigger />
</DatePickerControl>
<Portal>
<DatePickerPositioner>
<DatePickerContent>
<DatePickerView view="day">
<DatePickerContext>
{(context) => (
<>
<DatePickerViewControl>
<DatePickerViewTrigger>
<DatePickerRangeText />
</DatePickerViewTrigger>
</DatePickerViewControl>
<DatePickerTable>
<DatePickerTableHead>
<DatePickerTableRow>
<Index each={context().weekDays}>
{(weekDay) => (
<DatePickerTableHeader>
{weekDay().short}
</DatePickerTableHeader>
)}
</Index>
</DatePickerTableRow>
</DatePickerTableHead>
<DatePickerTableBody>
<Index each={context().weeks}>
{(week) => (
<DatePickerTableRow>
<Index each={week()}>
{(day) => (
<DatePickerTableCell value={day()}>
<DatePickerTableCellTrigger>
{day().day}
</DatePickerTableCellTrigger>
</DatePickerTableCell>
)}
</Index>
</DatePickerTableRow>
)}
</Index>
</DatePickerTableBody>
</DatePickerTable>
</>
)}
</DatePickerContext>
</DatePickerView>
<DatePickerView view="month">
<DatePickerContext>
{(context) => (
<>
<DatePickerViewControl>
<DatePickerViewTrigger>
<DatePickerRangeText />
</DatePickerViewTrigger>
</DatePickerViewControl>
<DatePickerTable>
<DatePickerTableBody>
<Index
each={context().getMonthsGrid({
columns: 4,
format: "short",
})}
>
{(months) => (
<DatePickerTableRow>
<Index each={months()}>
{(month) => (
<DatePickerTableCell value={month().value}>
<DatePickerTableCellTrigger>
{month().label}
</DatePickerTableCellTrigger>
</DatePickerTableCell>
)}
</Index>
</DatePickerTableRow>
)}
</Index>
</DatePickerTableBody>
</DatePickerTable>
</>
)}
</DatePickerContext>
</DatePickerView>
<DatePickerView view="year">
<DatePickerContext>
{(context) => (
<>
<DatePickerViewControl>
<DatePickerViewTrigger>
<DatePickerRangeText />
</DatePickerViewTrigger>
</DatePickerViewControl>
<DatePickerTable>
<DatePickerTableBody>
<Index
each={context().getYearsGrid({
columns: 4,
})}
>
{(years) => (
<DatePickerTableRow>
<Index each={years()}>
{(year) => (
<DatePickerTableCell value={year().value}>
<DatePickerTableCellTrigger>
{year().label}
</DatePickerTableCellTrigger>
</DatePickerTableCell>
)}
</Index>
</DatePickerTableRow>
)}
</Index>
</DatePickerTableBody>
</DatePickerTable>
</>
)}
</DatePickerContext>
</DatePickerView>
</DatePickerContent>
</DatePickerPositioner>
</Portal>
</DatePicker>
);
};
export default DatePickerDemo;Command
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandShortcut,
} from "@repo/tailwindcss/ui/command";
import { For, type JSXElement } from "solid-js";
type Option = {
icon: JSXElement;
label: string;
disabled: boolean;
shortcut?: JSXElement;
};
type List = {
label: string;
options: Option[];
};
export const commandData: List[] = [
{
label: "Suggestions",
options: [
{
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="mr-2 h-4 w-4"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm12-4v4M8 3v4m-4 4h16m-9 4h1m0 0v3"
/>
</svg>
),
label: "Calendar",
disabled: false,
},
{
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
class="mr-2 h-4 w-4"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m6-2h.01M15 10h.01" />
<path d="M9.5 15a3.5 3.5 0 0 0 5 0" />
</g>
</svg>
),
label: "Search emoji",
disabled: false,
},
{
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
class="mr-2 h-4 w-4"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3-5a9 9 0 0 0 6-8a3 3 0 0 0-3-3a9 9 0 0 0-8 6a6 6 0 0 0-5 3" />
<path d="M7 14a6 6 0 0 0-3 6a6 6 0 0 0 6-3m4-8a1 1 0 1 0 2 0a1 1 0 1 0-2 0" />
</g>
</svg>
),
label: "Launch",
disabled: false,
},
],
},
{
label: "Settings",
options: [
{
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
class="mr-2 h-4 w-4"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"
/>
</svg>
),
label: "Profile",
disabled: true,
shortcut: <CommandShortcut>⌘P</CommandShortcut>,
},
{
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
class="mr-2 h-4 w-4"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
<path d="m3 7l9 6l9-6" />
</g>
</svg>
),
label: "Mail",
disabled: false,
shortcut: <CommandShortcut>⌘B</CommandShortcut>,
},
{
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
class="mr-2 h-4 w-4"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065" />
<path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0" />
</g>
</svg>
),
label: "Setting",
disabled: false,
shortcut: <CommandShortcut>⌘S</CommandShortcut>,
},
],
},
];
const CommandDemo = () => {
return (
<Command class="rounded-lg border shadow-md">
<CommandInput placeholder="Type a command or search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<For each={commandData}>
{(item) => (
<CommandGroup heading={item.label}>
<For each={item.options}>
{(item) => (
<CommandItem disabled={item.disabled}>
{item.icon}
<span>{item.label}</span>
{item.shortcut}
</CommandItem>
)}
</For>
</CommandGroup>
)}
</For>
</CommandList>
</Command>
);
};
export default CommandDemo;캐러셀 (Carousel)
모션, 스와이프 제스처 및 키보드를 지원하는 모든 기능을 갖춘 캐러셀 컴포넌트를 추가했습니다. Embla Carousel을 기반으로 구축되었습니다.
무한 루프, 자동 재생, 수직 방향 등을 지원합니다.
import { Card, CardContent } from "@repo/tailwindcss/ui/card";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@repo/tailwindcss/ui/carousel";
import { Index } from "solid-js";
const CarouselDemo = () => {
return (
<Carousel class="w-full max-w-xs">
<CarouselContent>
<Index each={Array.from({ length: 5 })}>
{(_, index) => (
<CarouselItem>
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-4xl font-semibold">{index + 1}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
)}
</Index>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
);
};
export default CarouselDemo;페이지네이션 (Pagination)
페이지 탐색, 이전 및 다음 버튼이 있는 페이지네이션 컴포넌트를 추가했습니다. 간단하고 유연합니다.
import {
Pagination,
PaginationEllipsis,
PaginationItem,
PaginationItems,
PaginationNext,
PaginationPrevious,
} from "@repo/tailwindcss/ui/pagination";
const PaginationDemo = () => {
return (
<Pagination
fixedItems
count={10}
itemComponent={(props) => (
<PaginationItem page={props.page}>{props.page}</PaginationItem>
)}
ellipsisComponent={() => <PaginationEllipsis />}
>
<PaginationPrevious />
<PaginationItems />
<PaginationNext />
</Pagination>
);
};
export default PaginationDemo;CLI 업데이트
-
아이콘 라이브러리
아이콘 라이브러리를 제거하고 더 많은 유연성을 위해 SVG를 사용합니다.
-
style속성 제거이번 업데이트에서는
style속성이 제거되었지만, 향후 업데이트에서 추가적인 스타일링 기능이 도입될 경우 다시 추가될 가능성이 있습니다. -
사용자 지정 ui 디렉터리 지원
이 설정을 사용하여
ui컴포넌트의 설치 디렉터리를 사용자 지정할 수 있습니다.components.json { "aliases": { "ui": "@/ui" } } -
사용자 지정 Tailwind 접두사 지원
이제 사용자 지정 Tailwind 접두사를 구성할 수 있으며, CLI는 컴포넌트를 추가할 때 유틸리티 클래스에 자동으로 접두사를 붙여줍니다.
기존 디자인 시스템에 충돌 없이 바로 사용할 수 있습니다. 🔥
<AlertDialog class="tw-grid tw-gap-4 tw-border tw-bg-background tw-shadow-lg" />cn,cva및 CSS 변수와 함께 작동합니다.
이상입니다. 즐거운 설날 보내세요.