Arek UI React - Ark UI + TailwindCSS

accordions:

Single

React is a JavaScript library for building user interfaces.

Collapsible

React is a JavaScript library for building user interfaces.

Disabled

React is a JavaScript library for building user interfaces.

alerts:

Basic Alert!

You can add components and dependencies to your app using the cli.

Error Alert!

You can add components and dependencies to your app using the cli.

Basic Alert! - no icon

You can add components and dependencies to your app using the cli.

avatars:

Normal

CN

Placeholder

CN

Fallback icon

badges:

Default

Secondary

Outline

Destructive

buttons:

calendars:

Shadcn calendar

April 2025

Standalone datepicker

M	T	W	T	F	S	S

cards:

Create project

Deploy your new project in one-click.

checkboxes:

collapsibles:

comboboxes:

Single combobox

Single combobox - open on click

Multiple combobox

Disabled combobox

With input group

With Error

context menus:

Right click here

date pickers:

Date Picker

Label

Range Date Picker

With Input Group

With Input Group - readonly input

Range - single readonly input

dialogs:

drawers:

forms:

highlight:

Default highlight "a"

abcde abc aaa

Default highlight "a" and "test"

abctestde abc atestaa test a

Custom highlight "a" and "test"

bcde bc

Case sensitive highlight "A"

abcteAstdAe aAbc ateAAstaa test A a

hover cards:

@grizzly_codes

icon buttons:

inputs:

InputInput 2xsInput xsInput smInput mdInput lgInput xlInput 2xlDisabledPlaceholderErrorError placeholder

input groups:

Normal

Input Group 2xs

Input Group xs

Input Group sm

Input Group md (default)

Input Group lg

Input Group xl

Input Group 2xl

Left addon

Right addon

Disabled

Error

menus:

paginations:

popovers:

progress:

Linear sm

0%

Linear md

0%

Linear lg

0%

Linear indeterminate

Circle sm0%

Circle md0%

Circle lg0%

Circle indeterminate

radio groups:

scroll areas:

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

skeletons:

sliders:

Slider sm: 33

Slider md: 33

Slider lg: 33

Range md: 33 - 55

Range 3 md: 33 - 55 - 66

spinners:

xs

sm

md

lg

xl

alternate

reverse

reverse alternate

custom icon

custom animation

switches:

tables:

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00
Total			$2,500.00

tabs:

Normal sm

Account

Make changes to your account here. Click save when you're done.

Name

Username

Normal md

Account

Make changes to your account here. Click save when you're done.

Name

Username

Normal lg

Account

Make changes to your account here. Click save when you're done.

Name

Username

Disabled

Know React? Check out Solid!

Custom Indicator

▷

Know React? Check out Solid!

tags inputs:

Normal

With input group

Disabled

test

With combobox

textareas:

toasts:

toggle groups:

Small

outline

ghost

Medium

outline

ghost

Large

outline

ghost

tooltips:

tree views:

Tree

node_modules

src

panda.config.ts

package.json

renovate.json

README.md

Su	Mo	Tu	We	Th	Fr	Sa

Sun	Mon	Tue	Wed	Thu	Fri	Sat

Jan	Feb	Mar	Apr
May	Jun	Jul	Aug
Sep	Oct	Nov	Dec

2019	2020	2021	2022
2023	2024	2025	2026
2027	2028	2029	2030

Single

Collapsible

Disabled

Basic Alert!

Error Alert!

Basic Alert! - no icon

Create project

Tags

Radix Primitives

Account

Password

Account

Password

Account

Password

Disabled

Custom Indicator

Small

Medium

Large