Arctic Design
Get Started
Foundations
Components
Examples
⌘
K
Getting Started
Foundations
Components
Home
Components
Fast Performance
Experience lightning-fast load times and seamless interactions with our optimized platform.
Secure Data
Your data is protected with top-notch security measures, ensuring privacy and integrity.
24/7 Support
Our dedicated support team is available around the clock to assist you with any inquiries.
Accordion
Organizes content into collapsible sections, allowing users to toggle visibility for streamlined navigation and information access.
See live examples
Edit
ActionMenu
Presents a list of actionable items in a dropdown menu, offering users quick access to relevant commands or options.
See live examples
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sunt corporis natus veniam quis.
Alert
Displays contextual feedback messages for typical user actions with options for customizable appearance.
See live examples
Default Button
Button
Triggers an action or event in response to user interaction, with customizable styles and behaviors.
See live examples
First
Second
Third
Fourth
ButtonGroup
Groups multiple buttons together, enabling related actions to be displayed and managed cohesively.
See live examples
December 2024
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
Calendar
Displays dates in a structured format, allowing users to view, select, and interact with specific days.
See live examples
Create New Event
Organize and manage your upcoming events effortlessly.
Event Name
Category
Select a category
Date
Select event date
Card
Displays a card component with sections of header, content and footer equally spaced
See live examples
Combobox
A Combobox component allows users to select an option from a dropdown list
See live examples
MM/DD/YYYY
DatePicker
Allows users to select a date from an interactive calendar interface for streamlined date input.
See live examples
Toggle Drawer
Drawer
Displays a sliding panel from the edge of the screen, offering access to additional content or actions without leaving the current view.
See live examples
Cookie Settings
Manage your cookie settings here.
Strictly Necessary
These cookies are essential in order to use the website and use its features.
Functional Cookies
These cookies allow the website to provide personalized functionality.
Performance Cookies
These cookies help to improve the performance of the website.
List
Displays a List component with sections of ListItem containing title and description equally spaced
See live examples
Open Modal
Modals
Displays a focused overlay that temporarily interrupts the current workflow to present critical content or actions.
See live examples
MultiSelect
Enables users to select multiple options from a dropdown or list, with the ability to display selected choices.
See live examples
Open popover
Popover
Displays a floating, contextual overlay anchored to a trigger element, providing additional information or actions.
See live examples
Ford Mustang
Chevrolet Camaro
Porsche 911
Tesla Model S
Ferrari F40
Lamborghini Aventador
Audi R8
BMW M3
Radio
Groups radio buttons, allowing users to select one option from a set of mutually exclusive choices.
See live examples
React
Angular
Vue
Preact
Svelte
SegmentedControl
Allows users to toggle between multiple, mutually exclusive options presented as segmented buttons.
See live examples
Select
Enables users to choose a single option from a dropdown menu for streamlined selection.
See live examples
Switch
Allows users to toggle between two states, typically representing on and off, with a sliding switch control.
See live examples
Full name
Email
Group
Danilo Sousa
danilo@example.com
Developer
Zahra Ambessa
zahra@example.com
Admin
Jasper Eriksson
jasper@example.com
Developer
Table
A Table component which represents the html table
See live examples
ToggleGroup
Manages a set of toggle items, allowing users to select either multiple options or a single option based on configuration
See live examples
Hover over me
Tooltip
Displays brief, contextual information when users hover over or focus on an element.
See live examples
View component docs to see more live examples
View docs
Icons
Accordion