O

Origin UI

@originui

Beautiful UI components built with Tailwind CSS and Next.js. By @pacovitiello, and @DavidePacilio.

Theme Mode Toggle
O

Theme Mode Toggle

0
1
Search input with icon and button
O

Search input with icon and button

0
0
Copy to clipboard button
O

Copy to clipboard button

0
4
Slider with increment and decrement labels
O

Slider with increment and decrement labels

0
0
Popover with Notificaition
O

Popover with Notificaition

0
3
Circle Tabs for navigation
O

Circle Tabs for navigation

0
3
Simple Tabs with underline
O

Simple Tabs with underline

0
1
Input with label animation
O

Input with label animation

0
2
Copy to clipboard
O

Copy to clipboard

0
0
Payment Method Card Radio Group
O

Payment Method Card Radio Group

0
0
Input with inner tags
O

Input with inner tags

0
1
Input with start add-on
O

Input with start add-on

0
1
Input with end inline add-on
O

Input with end inline add-on

0
0
Alert Dialog
O

Alert Dialog

0
2
Notification button
O

Notification button

0
1
Cards Radio Group
O

Cards Radio Group

0
1
Dropdown avatar profile options
O

Dropdown avatar profile options

0
1
Date range picker
O

Date range picker

0
1
Show/hide password input
O

Show/hide password input

0
1
Underline Tabs for navigation
O

Underline Tabs for navigation

0
2
Select with inset label
O

Select with inset label

0
0
OTP input (spaced)
O

OTP input (spaced)

0
1
Date picker
O

Date picker

0
0
Simple Tabs for navigation
O

Simple Tabs for navigation

0
2
Select with search
O

Select with search

0
1
Banner with button and countdown
O

Banner with button and countdown

0
1
Price Slider
O

Price Slider

0
3
Input with end icon
O

Input with end icon

0
1
Multiselect
O

Multiselect

0
1
Select with search and button
O

Select with search and button

0
1
Dropdown profile options with avatar
O

Dropdown profile options with avatar

0
0
Side selector
O

Side selector

0
1
Hero Pill
O

Hero Pill

0
1
Button with dropdown
O

Button with dropdown

0
2
Options with icon and number
O

Options with icon and number

0
2
Number input with chevrons
O

Number input with chevrons

0
0
Input with end inline button
O

Input with end inline button

0
0
Textarea with label animation
O

Textarea with label animation

0
1
Select with description and right indicator
O

Select with description and right indicator

0
1
Multi-level Accordion with icon
O

Multi-level Accordion with icon

0
1
Banner with link and close button
O

Banner with link and close button

0
0
Textarea with button
O

Textarea with button

0
1
Input with inline add-ons
O

Input with inline add-ons

0
2
Popover dashboard with navigation
O

Popover dashboard with navigation

0
0
Textarea with characters left
O

Textarea with characters left

0
1
Payment Method Radio Group
O

Payment Method Radio Group

0
0
Simple tooltip
O

Simple tooltip

0
2
Accordion tabs with chevron
O

Accordion tabs with chevron

0
0
Toggle Group socials
O

Toggle Group socials

0
0
Tabs like bookmark for navigation
O

Tabs like bookmark for navigation

0
3
Date input
O

Date input

0
2
Search input with loader
O

Search input with loader

0
1
Plus button
O

Plus button

0
0
Choose Color Radio Group
O

Choose Color Radio Group

0
0
Tabs simple squared
O

Tabs simple squared

0
0
Input with gray background
O

Input with gray background

0
1
Days of the week toggle group
O

Days of the week toggle group

0
1
Sidebar / Menu animated button
O

Sidebar / Menu animated button

0
1
Input with tags
O

Input with tags

0
0
Social links login
O

Social links login

0
0
Slider with experience changing
O

Slider with experience changing

0
0
Notification with link and button
O

Notification with link and button

0
0
Button with animated icon
O

Button with animated icon

0
1
Dropdown with the same width as trigger
O

Dropdown with the same width as trigger

0
1
Dropdown radio items
O

Dropdown radio items

0
1
Payment Plan Radio Group
O

Payment Plan Radio Group

0
0
Input with start icon
O

Input with start icon

0
0
Input with mask
O

Input with mask

0
0
Success alert with link and button
O

Success alert with link and button

0
1
Input with overlapping label
O

Input with overlapping label

0
1
Cookie banner
O

Cookie banner

0
0
Accordion tabs with plus-minus
O

Accordion tabs with plus-minus

0
0
Go back button
O

Go back button

0
0
useSliderWithInput
O

useSliderWithInput

0
1
OTP input double
O

OTP input double

0
0
Listbox with multiple options
O

Listbox with multiple options

0
0
Input with inline start and end add-on
O

Input with inline start and end add-on

0
0
Tabs simple square in cell
O

Tabs simple square in cell

0
0
Badge link
O

Badge link

0
0
Rounded button
O

Rounded button

0
0
Select with placeholder
O

Select with placeholder

0
1
Banner with update button
O

Banner with update button

0
2
Alert success
O

Alert success

0
0
Simple Dropdown
O

Simple Dropdown

0
1
Input with hint
O

Input with hint

0
1
Button loading without text
O

Button loading without text

0
0
Tooltip with charts
O

Tooltip with charts

0
0
Error alert with button
O

Error alert with button

0
0
Requirements alert colored
O

Requirements alert colored

0
0
Input with clear button
O

Input with clear button

0
1
Input with password strength indicator
O

Input with password strength indicator

0
2
Tooltip with title
O

Tooltip with title

0
0
Squared Tabs in cell with underline
O

Squared Tabs in cell with underline

0
1
Search input with <kbd>
O

Search input with <kbd>

0
0
Number input with plus/minus buttons
O

Number input with plus/minus buttons

0
1
Accordion with icon and chevron
O

Accordion with icon and chevron

0
1
Select with icon
O

Select with icon

0
1
Avatar with verfication check
O

Avatar with verfication check

0
0
Button with tooltip
O

Button with tooltip

0
1
Avatars and more
O

Avatars and more

0
0
Slider with output
O

Slider with output

0
1
Social links colored
O

Social links colored

0
0
Outline button with icon
O

Outline button with icon

0
0
Avatar with online status
O

Avatar with online status

0
0
Dual range slider
O

Dual range slider

0
0
Popover share socials and link
O

Popover share socials and link

0
0
Time input
O

Time input

0
0
Slider with experience rating
O

Slider with experience rating

0
0
Messages button with count
O

Messages button with count

0
0
Time input with start icon
O

Time input with start icon

0
0
Slider with labels
O

Slider with labels

0
0
OTP input single
O

OTP input single

0
0
Textarea with error
O

Textarea with error

0
1
Input with button
O

Input with button

0
0
Accordion tabs with left plus-minus
O

Accordion tabs with left plus-minus

0
0
Underline Tabs for navigation with icons
O

Underline Tabs for navigation with icons

0
0
Accordion table with left plus-minus
O

Accordion table with left plus-minus

0
0
Select with helper text
O

Select with helper text

0
0
Cookie acceptance notification
O

Cookie acceptance notification

0
0
Button with icon
O

Button with icon

0
0
Triple choose checkbox vertical
O

Triple choose checkbox vertical

0
1
Accordion table with left chevron
O

Accordion table with left chevron

0
0
Select with disabled options
O

Select with disabled options

0
0
Disabled checkbox
O

Disabled checkbox

0
1
Status select
O

Status select

0
1
Required textarea
O

Required textarea

0
1
Textarea with left button
O

Textarea with left button

0
0
Textarea with inset label
O

Textarea with inset label

0
0
Rate Experience radio group
O

Rate Experience radio group

0
0
Select options with flag
O

Select options with flag

0
1
Select options with icons
O

Select options with icons

0
0
Textarea with helper text
O

Textarea with helper text

0
1
Textarea with overlapping label
O

Textarea with overlapping label

0
0
Autogrowing Textarea
O

Autogrowing Textarea

0
0
Textarea with no resize
O

Textarea with no resize

0
0
Select with overlapping label
O

Select with overlapping label

0
0
Alert with redirect and close buttons
O

Alert with redirect and close buttons

0
1
Disabled textarea
O

Disabled textarea

0
1
Tooltip with stats
O

Tooltip with stats

0
2
Simple slider
O

Simple slider

0
0
Three buttons selector
O

Three buttons selector

0
0
Error alert
O

Error alert

0
0
Select with right indicator
O

Select with right indicator

0
0
Listbox with single option
O

Listbox with single option

0
0
Select options with icon and right indicator
O

Select options with icon and right indicator

0
2
Options with portrait
O

Options with portrait

0
1
Requirements alert
O

Requirements alert

0
1
Notification alert with button
O

Notification alert with button

0
0
Textarea with gray background
O

Textarea with gray background

0
0
Banner with two buttons and close button
O

Banner with two buttons and close button

0
0
Banner with two buttons
O

Banner with two buttons

0
0
Banner with learn more link
O

Banner with learn more link

0
0
Group of buttons
O

Group of buttons

0
0
Textarea with hint
O

Textarea with hint

0
1
Notification alert with link colored
O

Notification alert with link colored

0
0
Accordion table with plus-minus
O

Accordion table with plus-minus

0
0
Timezone select with search
O

Timezone select with search

0
1
Simple todo checkbox
O

Simple todo checkbox

0
0
Popover with button
O

Popover with button

0
0
Attention alert colored
O

Attention alert colored

0
0
Notification with undo view and close buttons
O

Notification with undo view and close buttons

0
0
Select with error
O

Select with error

0
0
Select with auto-width
O

Select with auto-width

0
0
Input with helper text
O

Input with helper text

0
0
Dropdown profile options
O

Dropdown profile options

0
0
Colored checkbox
O

Colored checkbox

0
1
Volume slider
O

Volume slider

0
0
Squared Avatar
O

Squared Avatar

0
0
Avatar with offline status
O

Avatar with offline status

0
0
Raiting Radio Group
O

Raiting Radio Group

0
0
Avatar with notifications
O

Avatar with notifications

0
1
Popover dashboard with steps
O

Popover dashboard with steps

0
0
Page selector
O

Page selector

0
0
Popover feedback textarea
O

Popover feedback textarea

0
0
Tabs with circle selecting
O

Tabs with circle selecting

0
0
Required select
O

Required select

0
0
Banner with texted link
O

Banner with texted link

0
0
Input with end add-on
O

Input with end add-on

0
0
Avatar with named placeholder
O

Avatar with named placeholder

0
0
Avatar
O

Avatar

0
0
Select with gray background
O

Select with gray background

0
0
Card Details
O

Card Details

0
1
Terms agreement
O

Terms agreement

0
1
Banner with rounded and close buttons
O

Banner with rounded and close buttons

0
0
Popover menu filters
O

Popover menu filters

0
0
Avatars
O

Avatars

0
0
Avatars and more smooth
O

Avatars and more smooth

0
0
Input with characters left
O

Input with characters left

0
0
Checkbox with expansion
O

Checkbox with expansion

0
0
Right aligned checkbox
O

Right aligned checkbox

0
1
Select (Native)
O

Select (Native)

0
0
Accordion with icon and plus-minus
O

Accordion with icon and plus-minus

0
0
Avatar Placeholder
O

Avatar Placeholder

0
0
Avatar squared
O

Avatar squared

0
0
Card Number
O

Card Number

0
0
Input with end icon button
O

Input with end icon button

0
0
Pan with titles
O

Pan with titles

0
2
Show more button
O

Show more button

0
1
Accordion tabs with left chevron
O

Accordion tabs with left chevron

0
0
Info notification with redirect and close buttons
O

Info notification with redirect and close buttons

0
0
Share Popover
O

Share Popover

0
1
Select options with icon and number
O

Select options with icon and number

0
3
Button with arrow
O

Button with arrow

0
0
Tooltip-like popover
O

Tooltip-like popover

0
1
Social links login colored
O

Social links login colored

0
0
Input with character limit
O

Input with character limit

0
0
Accordion with chevron
O

Accordion with chevron

0
0
Simple select with default value
O

Simple select with default value

0
0
Tooltip-like popover with steps