JSPM

  • Created
  • Published
  • Downloads 2418
  • Score
    100M100P100Q114767F
  • License MIT

Published version of @shadcn/ui

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/ui

Yarn

yarn add @lshay/ui

PNPM

pnpm add @lshay/ui

2. Install peer dependencies

NPM

npm install --save-dev tailwindcss@latest postcss@latest autoprefixer@latest tailwindcss-animate@latest

Yarn

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest tailwindcss-animate@latest

PNPM

pnpm add -D tailwindcss@latest postcss@latest autoprefixer@latest tailwindcss-animate@latest

3. Initiailize Tailwind

NPM

npm exec tailwindcss -- init

Yarn

yarn tailwindcss init

PNPM

pnpm exec tailwindcss -- init

4. 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";
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";
import { Menubar } from "@lshay/ui/components/menubar";
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