Components

Quick Install

Add any component to your project with a single command:

npx @sickui/cli add [component-name]

Available Components

Badge

A versatile badge component for displaying status, labels, or categories.

Installation:

npx @sickui/cli add badge

Dependencies:

• class-variance-authority
• clsx
• tailwind-merge

View Badge Documentation →

Button

Displays a button or a component that looks like a button.

Installation:

npx @sickui/cli add button

Dependencies:

• @radix-ui/react-slot
• class-variance-authority
• clsx
• tailwind-merge

View Button Documentation →

Calendar

A beautiful, animated calendar component for date selection with Framer Motion animations.

Installation:

npx @sickui/cli add calendar

Dependencies:

• framer-motion
• @emotion/is-prop-valid
• lucide-react
• class-variance-authority
• clsx
• tailwind-merge

View Calendar Documentation →

Skeleton

Loading placeholder components with pulse and shimmer animations.

Installation:

npx @sickui/cli add skeleton

Dependencies:

• class-variance-authority
• clsx
• tailwind-merge

View Skeleton Documentation →

---

Coming Soon

More components are being added regularly. Here's what's planned:

Card

Displays a card with header, content, and footer.

Input

Displays a form input field.

Badge

Displays a badge or a component that looks like a badge.

Dialog

A modal dialog that interrupts the user with important content.

Dropdown Menu

Displays a menu to the user triggered by a button.

Tabs

A set of layered sections of content—known as tab panels.

Tooltip

A popup that displays information related to an element.

Avatar

An image element with a fallback for representing the user.

Checkbox

A control that allows the user to toggle between checked and not checked.

Radio Group

A set of checkable buttons—known as radio buttons.

Select

Displays a list of options for the user to pick from.

Slider

An input where the user selects a value from within a given range.

Switch

A control that allows the user to toggle between checked and not checked.

Textarea

Displays a form textarea or a component that looks like a textarea.

Progress

Displays an indicator showing the completion progress of a task.

Separator

Visually or semantically separates content.

Sheet

Extends the Dialog component to display content that complements the main content.

Skeleton

Use to show a placeholder while content is loading.

Table

A responsive table component.

Toast

A succinct message that is displayed temporarily.

Toggle

A two-state button that can be either on or off.

Command

Fast, composable, unstyled command menu for React.

Calendar

A date field component that allows users to enter and edit date.

Date Picker

A date picker component with range and presets.

Navigation Menu

A collection of links for navigating websites.

Pagination

Pagination with page navigation, next and previous links.

Resizable

Accessible resizable panel groups and layouts with keyboard support.

Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

Sonner

An opinionated toast component for React.

Request a Component

Don't see a component you need? Open an issue on GitHub to request it.

Contributing

Want to contribute a component? Check out our contribution guide to get started.