@loke/design-system-beta

A design system with individually importable components, inspired by Radix with shadcn styling.

Installation

To install the design system, run the following command:

npm install @loke/design-system-beta

or if you're using yarn:

yarn add @loke/design-system-beta

Usage

This design system provides a wide range of components and utilities that can be imported individually. Here's a basic example of how to use a component:

import { Button } from '@loke/design-system-beta/button';

function MyComponent() {
  return <Button variant="default">Click me</Button>;
}

Available Components

The design system includes the following components:

• Alert
• AlertDialog
• Badge
• Button
• Card
• Checkbox
• Collapsible
• Dialog
• DropdownMenu
• Input
• Label
• Menu
• Pagination
• RadioGroup
• Select
• Separator
• Sheet
• Skeleton
• Switch
• Table
• Tabs
• Textarea
• Toast
• Tooltip

Each component can be imported from its respective path. For example:

import { Alert } from '@loke/design-system-beta/alert';
import { Card } from '@loke/design-system-beta/card';

Utilities

The design system also provides several utility functions and hooks:

• cn (for combining class names)
• useId
• useCallbackRef
• useControllableState
• useEscapeKeydown
• usePrevious
• useSize
• useDirection
• useLayoutEffect

These can be imported similarly to components:

import { cn } from '@loke/design-system-beta/cn';
import { useId } from '@loke/design-system-beta/use-id';

Styling

This design system uses Tailwind CSS for styling. The styles are included in the package and can be imported in your project:

import '@loke/design-system-beta/styles';

Development

To start the development environment:

npm run dev

To build the package:

npm run build