Components

Buttons

Button

Buttons be the real MVPs, man! They're all about gettin' stuff done, whether it’s slamming that form submit or hoppin' to another page.
View

File Trigger

File Triggers are your go-to for grabbing files from the file system, acting like a digital fishing rod to hook up goodies from local or cloud storage.
View

Toggle

Toggle is like light switches for your digital digs. Flip 'em on, and they light stuff up; flip 'em off, and it's lights out.
View

Touch Target

Touch Target's a slick component used in other parts of your project that need trigger, like button, link, menu trigger, and more.
View

Collections

Menu

A sleek, interactive component that reveals options on click, perfect for seamless navigation and organizing choices in a compact space.
View

List Box

ListBox are designed to present and manage lists of options or data entries, allowing users to view and select from multiple choices efficiently.
View

Tag Group

This organizer keeps your tags tight and right, making sure they’re lined up and making sense, just like a librarian sorting books on a shelf.
View

Table

Lay out your data grid-style, like setting dishes on a dinner table clear and organized, perfect for comparison and review.sink/
View

Accordion

Accordion is a vertical stack of headers that expand or collapse to show or hide content, providing an organized, user-friendly way to manage information.
View

Grid List

A grid list is where your interactive items chill, letting you navigate with your keyboard, pick one or multiple, and even drop some row actions.
View

Choicebox

A bigger, juiced-up version of a Radio or Checkbox, giving users a chunky tap target and extra deets.
View

Dropdown

Dropdown's a slick component used in other parts of your project that need dropdown, like menu, select, combo box, and more.
View

Colors

Color Picker

A Color Picker keeps color values in sync across React Aria color components. It makes building color pickers with custom layouts a breeze through composition.
View

Color Field

A color field allows users to adjust a hex color or fine-tune individual color channels, offering precise control over color customization.
View

Color Area

A color area lets users tweak two channels of an RGB, HSL, or HSB color against a 2D gradient backdrop.
View

Color Slider

Slide through gradients, picking the intensity or shade you need, as smoothly as sliding into your favorite jeans.
View

Color Swatch

A visual lineup of colors, letting you pick with a click, just like choosing your next outfit from your wardrobe.
View

Color Wheel

Spin through the color spectrum on this wheel, picking hues like a game show contestant spins for a prize—fun and functional.
View

Controls

Slider

Swipe left or right to adjust values, like sliding the volume on your stereo, perfect for gradual control.
View

Switch

Toggle on or off like a light switch, ideal for binary decisions where a simple tap effortlessly changes states, providing clear and immediate control.
View

Toolbar

A toolbar's your go-to spot for a bunch of handy controls like buttons, dropdowns, and checkboxes. Navigate through 'em using your arrow keys smooth and simple!
View

Command Menu

A command is like a button with a twist, it opens a menu of options. It's a cooler version of a combobox, ideal for command palettes, menus, and more.
View

Keyboard

Keyboard and focus support ensures smooth navigation with keys, essential for users without a mouse and appreciated by power users for quick access.
View

Context Menu

Pops a menu right where you click or hold down long, perfect for a right-click or a solid long press. It's all about quick access and easy picks!
View

Date and Time

Calendar

Manage your dates, plan your schedule, and keep track of important events, all in one place, like a personal assistant for your time.
View

Range Calendar

Manage your dates, plan your schedule, and keep track of important events, all in one place, like a personal assistant for your time.
View

Date Field

Enter dates directly into this field, perfect for logging events or deadlines with the precision of a historian noting important events.
View

Time Field

Punch in times down to the minute, ideal for setting reminders or scheduling meetings, like setting your alarm clock for another busy day..
View

Date Picker

Pop up a calendar, click a date, and it’s set. It’s like pointing at a day on the wall calendar, but digital and without the thumbtacks..
View

Date Range Picker

Date Range Pickers are crucial for conveying date-based info effectively, improving user interaction with accurate date selections.
View

Drag and Drop

Drop Zone

Drag and drop files here is like droppin' postcards into a mailbox easy and effective for quick uploads.
View

Forms

Form

Gather all your input fields in one place, like a survey collecting data, making it easy to organize and submit info.
View

Field

Field's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.
View

Text Field

Enter text like jotting notes on your phone, offering versatility for typing and accommodating various types of information.
View

Search Field

Type and search, exploring your data like searching for stars with a telescope, quick and responsive.
View

Textarea

Provides ample space for detailed text, like drafting an email, allowing you to elaborate on thoughts and present comprehensive information easily.
View

Input OTP

The only lit, all-in-one Input OTP component you’ll find online. Easy to use, highly customizable, and packed with features.
View

Number Field

Type in numbers for precise entries, like dialing in your favorite radio station, ensuring accuracy in data input.
View

Checkbox Group

A checkbox group lets users select multiple items from a list of options, offering flexible choices for enhanced user interaction and control.
View

Checkbox

Click to check or uncheck, like making a choice on a quiz, simple and straightforward for quick decisions.
View

Radio Group

Select one from a set, like choosing your favorite pizza topping; only one can win, ensuring clear choices.
View

Tag Field

A tag field lets users add labels to items for categorization. They can type, select from a list, or create new tags as needed.
View

Layouts

Sidebar

A sidebar is a component that helps you organize your content and navigation.
View

Container

A container is a wrapper that helps you center and pad your content, and it's great for laying out your page.
View

Media

Avatar

It’s more than a picture with curved corners. It’s a vibe, subtly revealing secrets. A cheeky peek into depth, grabbing more than just your gaze.
View

Carousel

A carousel is a sleek, rotating display for images or videos, showcasing one at a time and highlighting multiple pieces of content seamlessly.
View

Navigation

Breadcrumbs

Navigate your way through pages, like following a trail back home, essential for easy site navigation.
View

Pagination

Click through pages of content, like turning the pages of a book, controlling the flow of your data presentation.
View

Tabs

Switch between views like flipping through file folders at a desk, organizing content without clutter.
View

Overlays

Modal

Pop up a dialog box, demanding attention like a traffic stop sign, ideal for critical interactions..
View

Dialog

Dialog's a slick component used in other parts of your project that need dialog, like modal, sheet, color picker, and more.
View

Sheet

Slide out a panel for extra info, like pulling a drawer to find more tools, perfect for additional context without leaving the page..
View

Drawer

Pull out a side menu or extra options, like opening a side drawer, handy for accessing additional functionalities.
View

Popover

Hover or click to see more content, like popping open a tent, useful for additional info without leaving the context..
View

Tooltip

Hover to reveal details, like a secret whispering info, perfect for extra hints or help where needed.
View

Pickers

Combo Box

Drop down a list, type to narrow it down, like flipping through a phone book with a quick finder tool.
View

Select

Select a start and end date, perfect for booking a vacation or setting periods efficiently, streamlining the process of defining time spans with ease.
View

Multiple Select

Multiple select lets you pick more than one option from a list. It's like checking off items on your to-do list just click, click, click, and you're good to go!
View

Statuses

Badge

Small count or info chip, like a merit badge, highlighting status or providing quick alerts at a glance.
View

Progress Bar

Watch it fill up as tasks complete, like a loading bar on a game console, offering visual progress updates.
View

Meter

Visualize values in a meter, like checking your car’s fuel gauge, great for displaying measurements at a glance..
View

Note

Jot down reminders or info, like sticking a post-it on your monitor, simple yet effective for quick memos and alerts.
View

Toast

Gives the vibe and easy access for a toast component. Toasts show quick, temporary alerts about actions, errors, or other events in an app.
View

Loader

A loader indicates an unknown wait time or process duration, keeping users informed and enhancing their experience by providing visual feedback during delays.
View

Skeleton

Skeleton shows a placeholder while your content loads, keeping the layout intact and users chillin' till the real deal pops in.
View

Surfaces

Card

Cards are a flexible and extensible content container. They are commonly used within a page layout or as part of a related group of content.
View

Grid

Check out this Responsive Grid component! It adjusts columns and gaps for any device, enhancing your UI’s vibe and usability across all screen sizes.
View

Separator

Lays down the access creds for a separator. It’s the visual boss that splits up chunks of content, like menu items or page sections.
View

Heading

Heading is a component used to display titles and subtitles, providing a clear structure and emphasis for organizing and presenting content.
View

Show More

When you need to toggle visibility of additional content in a responsive and accessible manner, the ShowMore component provides the functionality.
View

Utilities

Visually Hidden

Visually Hidden is a component that hides an element from the screen but still keeps it accessible to screen readers.
View