Package Exports
- @lshay/ui
- @lshay/ui/components/accordion
- @lshay/ui/components/alert
- @lshay/ui/components/alert-dialog
- @lshay/ui/components/aspect-ratio
- @lshay/ui/components/avatar
- @lshay/ui/components/badge
- @lshay/ui/components/button
- @lshay/ui/components/calendar
- @lshay/ui/components/card
- @lshay/ui/components/checkbox
- @lshay/ui/components/collapsible
- @lshay/ui/components/command
- @lshay/ui/components/context-menu
- @lshay/ui/components/dialog
- @lshay/ui/components/dropdown-menu
- @lshay/ui/components/hover-card
- @lshay/ui/components/input
- @lshay/ui/components/label
- @lshay/ui/components/menubar
- @lshay/ui/components/metadata
- @lshay/ui/components/navigation-menu
- @lshay/ui/components/popover
- @lshay/ui/components/progress
- @lshay/ui/components/radio-group
- @lshay/ui/components/scroll-area
- @lshay/ui/components/select
- @lshay/ui/components/separator
- @lshay/ui/components/sheet
- @lshay/ui/components/skeleton
- @lshay/ui/components/slider
- @lshay/ui/components/switch
- @lshay/ui/components/table
- @lshay/ui/components/tabs
- @lshay/ui/components/textarea
- @lshay/ui/components/toast
- @lshay/ui/components/toaster
- @lshay/ui/components/toggle
- @lshay/ui/components/tooltip
- @lshay/ui/components/use-toast
- @lshay/ui/lib/utils
Readme
Components from shadcn/ui
This packages contains the components from shadcn/ui. The date published can be found at the bottom of this readme. The version bumps do not correspond to the changes to the components.
Installation
1. Install this package
NPM
npm install @lshay/uiYarn
yarn add @lshay/uiPNPM
pnpm add @lshay/ui2. Install peer dependencies
NPM
npm install --save-dev tailwindcss@latest postcss@latest autoprefixer@latest tailwindcss-animate@latestYarn
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest tailwindcss-animate@latestPNPM
pnpm add -D tailwindcss@latest postcss@latest autoprefixer@latest tailwindcss-animate@latest3. Initiailize Tailwind
NPM
npm exec tailwindcss -- initYarn
yarn tailwindcss initPNPM
pnpm exec tailwindcss -- init4. Configure Tailwind
Follow steps linked here.
Add "node_modules/@lshay/ui/dist/components/**/*.{js,jsx}" to the content array.
5. Configure Styles
Follow steps linked here.
Usage
import { Button } from "@lshay/ui/components/button"; // You can also import from "@lshay/ui"
export const ClickMeButton = () => <Button>{"Click Me"}</Button>;Components
Accordion
import { Accordion } from "@lshay/ui/components/accordion";Alert
import { Alert } from "@lshay/ui/components/alert";AlertDialog
import { AlertDialog } from "@lshay/ui/components/alert-dialog";AspectRatio
import { AspectRatio } from "@lshay/ui/components/aspect-ratio";Avatar
import { Avatar } from "@lshay/ui/components/avatar";Badge
import { Badge } from "@lshay/ui/components/badge";Button
import { Button } from "@lshay/ui/components/button";Calendar
import { Calendar } from "@lshay/ui/components/calendar";Card
import { Card } from "@lshay/ui/components/card";Checkbox
import { Checkbox } from "@lshay/ui/components/checkbox";Collapsible
import { Collapsible } from "@lshay/ui/components/collapsible";Command
import { Command } from "@lshay/ui/components/command";ContextMenu
import { ContextMenu } from "@lshay/ui/components/context-menu";Dialog
import { Dialog } from "@lshay/ui/components/dialog";DropdownMenu
import { DropdownMenu } from "@lshay/ui/components/dropdown-menu";HoverCard
import { HoverCard } from "@lshay/ui/components/hover-card";Input
import { Input } from "@lshay/ui/components/input";Label
import { Label } from "@lshay/ui/components/label";Menubar
import { Menubar } from "@lshay/ui/components/menubar";NavigationMenu
import { NavigationMenu } from "@lshay/ui/components/navigation-menu";Popover
import { Popover } from "@lshay/ui/components/popover";Progress
import { Progress } from "@lshay/ui/components/progress";RadioGroup
import { RadioGroup } from "@lshay/ui/components/radio-group";ScrollArea
import { ScrollArea } from "@lshay/ui/components/scroll-area";Select
import { Select } from "@lshay/ui/components/select";Separator
import { Separator } from "@lshay/ui/components/separator";Sheet
import { Sheet } from "@lshay/ui/components/sheet";Skeleton
import { Skeleton } from "@lshay/ui/components/skeleton";Slider
import { Slider } from "@lshay/ui/components/slider";Switch
import { Switch } from "@lshay/ui/components/switch";Table
import { Table } from "@lshay/ui/components/table";Tabs
import { Tabs } from "@lshay/ui/components/tabs";Textarea
import { Textarea } from "@lshay/ui/components/textarea";Toast
import { Toast } from "@lshay/ui/components/toast";Toggle
import { Toggle } from "@lshay/ui/components/toggle";Tooltip
import { Tooltip } from "@lshay/ui/components/tooltip";Updated At
2023-07-03T21:27:52.579Z