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.

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.

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.

Collections

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.

Table

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

Tree

The Tree component is designed to display a hierarchical list of items, allowing users to navigate through nested structures effortlessly.

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.

Choicebox

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

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.

Color Field

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

Color Area

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

Color Slider

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

Color Swatch Picker

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

Color Swatch

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

Color Wheel

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

Color Thumb

A color thumb is a circular element that can be dragged to change the color value.

Controls

Slider

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

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.

Keyboard

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

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.

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.

Date Field

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

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..

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..

Date Range Picker

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

Drag and Drop

Drop Zone

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

Forms

Form

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

Field

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

Text Field

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

Search Field

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

Textarea

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

Input OTP

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

Number Field

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

Checkbox Group

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

Checkbox

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

Radio Group

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

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.

Layouts

Container

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

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.

Carousel

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

Breadcrumbs

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

Pagination

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

Overlays

Dialog

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

Sheet

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

Drawer

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

Popover

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

Tooltip

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

Pickers

Combo Box

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

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.

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!

Statuses

Badge

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

Progress Bar

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

Progress Circle

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

Meter

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

Note

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

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.

Loader

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

Skeleton

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

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.

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.

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.

Heading

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

Show More

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

Description List

A description list is typically used to display pairs of terms and details, like in invoices or product specifications, enhancing clarity and organization of information.

Chart

A chart component visually represents data, such as bar, line, or pie charts. It takes in data and configuration props (labels, values, colors) and renders a chart.

Utilities