+
+
+
+ New message received
++ You have a new message from John Doe +
+2m ago
+Task completed
++ Project X has been successfully deployed +
+1h ago
+
+
{{ code }}|
+
+ {{ column.label }}
+
+
+ |
+
|---|
|
+ |
+
+ {{ isDragging ? "Drop files here" : "Upload your files" }} +
++ Drag & drop or click to select +
+Maximum file size: {{ formatFileSize(maxSize) }}
+Accepted files: {{ accept }}
+{{ file.name }}
++ {{ formatFileSize(file.size) }} +
+
+
+
+ {{ + error?.message || + "Sorry, we couldn't find the page you're looking for." + }} +
+A vertically stacked set of interactive headings that each reveal a section of content. Built with accessibility and customization in mind.
+| Component | +Prop | +Type | +Default | +Description | +
|---|---|---|---|---|
| Accordion | +type | +string | +'single' | ++ Type of accordion ('single' or 'multiple') + | +
| Accordion | +defaultValue | +string | array | +'' | ++ Default expanded item(s) + | +
| AccordionItem | +value | +string | +- | +Unique identifier for the item | +
| AccordionTrigger | +- | +- | +- | +Clickable trigger element | +
| AccordionContent | +- | +- | +- | +Expandable content section | +
Displays important messages and feedback to users with various styles and states. Built with accessibility in mind.
+| Component | +Prop | +Type | +Default | +Description | +
|---|---|---|---|---|
| Alert | +variant | +string | +'default' | ++ Alert style variant (default, info, success, warning, danger) + | +
| AlertTitle | +- | +- | +- | +Title component for the alert | +
| AlertDescription | +- | +- | +- | +Description component for the alert | +
A versatile avatar component for displaying user images with fallback support and group functionality.
+| Prop | +Type | +Default | +Description | +
|---|---|---|---|
| src | +string | +'' | +URL of the avatar image | +
| alt | +string | +required | +Alternative text and used for generating initials | +
| fallback | +string | +'' | +Custom fallback text when image fails to load | +
| size | +string | +'default' | +Size of the avatar (sm, default, lg) | +
| Prop | +Type | +Default | +Description | +
|---|---|---|---|
| max | +number | +4 | +Maximum number of avatars to display before showing count | +
A versatile badge component for displaying status, labels, and counts with various styles.
+| Prop | +Type | +Default | +Description | +
|---|---|---|---|
| variant | +string | +'default' | ++ Style variant (default, secondary, info, success, warning, danger, outline, ghost) + | +
A navigation component that helps users understand their current location within a website's hierarchy.
+| Prop | +Type | +Default | +Description | +
|---|---|---|---|
| separator | +string | +'/' | +Text separator between breadcrumb items | +
| separatorIcon | +string | +'' | +Icon name to use as separator (overrides text separator) | +
| Prop | +Type | +Default | +Description | +
|---|---|---|---|
| href | +string | +'' | +Navigation URL for the breadcrumb item | +
| disabled | +boolean | +false | +Whether the breadcrumb item is disabled | +
A versatile button component with various styles, sizes, and states. Built with accessibility and customization in mind.
+| Prop | +Type | +Default | +Description | +
|---|---|---|---|
| variant | +string | +'primary' | ++ Button style variant (primary, secondary, info, success, + warning, danger, outline, ghost) + | +
| size | +string | +'default' | +Button size (default, sm, lg, icon) | +
| disabled | +boolean | +false | +Whether the button is disabled | +
| type | +string | +'button' | ++ HTML button type (button, submit, reset) + | +
A flexible card component for displaying content in a contained format with optional header and footer sections.
+| Component | +Prop | +Type | +Default | +Description | +
|---|---|---|---|---|
| Card | +variant | +string | +'default' | ++ Card style variant (default, muted, accent) + | +
| CardHeader | +- | +- | +- | ++ Container for card header with padding (p-6) + | +
| CardContent | +- | +- | +- | ++ Container for main content with padding (p-6 pt-0) + | +
| CardTitle | +- | +- | +- | +Title component for the card | +
| CardDescription | +- | +- | +- | +Description component for the card | +
| CardFooter | +- | +- | +- | +Container for card footer content | +
A carousel component for cycling through elements, with support for navigation and indicators.
+Add any content you want
+Not just limited to images
+| Prop | +Type | +Default | +Description | +
|---|---|---|---|
| autoplay | +boolean | +false | +Enable automatic slide transitions | +
| interval | +number | +5000 | +Time between slide transitions (in milliseconds) | +
| wrap | +boolean | +true | +Whether to wrap around to the first slide after the last | +
| controls | +boolean | +true | +Show navigation arrows | +
| indicators | +boolean | +true | +Show slide indicators | +
A context menu component that displays a menu when right-clicking or long-pressing an element.
+| Prop | +Type | +Default | +Description | +
|---|---|---|---|
| disabled | +boolean | +false | +Whether the menu item is disabled | +
| inset | +boolean | +false | +Adds left padding to align with items that have icons | +
| Event | +Description | +
|---|---|
| @click | +Emitted when a menu item is clicked (not emitted if disabled) | +
A powerful data table component with sorting, filtering, pagination, and row selection capabilities.
+| Prop | +Type | +Default | +Description | +
|---|---|---|---|
| data | +Array | +required | +Array of data objects to display in the table | +
| columns | +Array | +required | +Array of column configuration objects | +
| Property | +Type | +Default | +Description | +
|---|---|---|---|
| key | +string | +required | +Unique identifier for the column, matches data object property | +
| label | +string | +required | +Display label for the column header | +
| sortable | +boolean | +false | +Whether the column can be sorted | +
| filterable | +boolean | +false | +Whether the column can be filtered | +
| Name | +Props | +Description | +
|---|---|---|
| [column.key] | +{ row, value } | +Custom cell content for the specified column | +
A dropdown menu component for displaying a list of actions or options triggered by a button.
+| Prop | +Type | +Default | +Description | +
|---|---|---|---|
| disabled | +boolean | +false | +Whether the menu item is disabled | +
| inset | +boolean | +false | +Adds left padding to align with items that have icons | +
| Event | +Description | +
|---|---|
| @click | +Emitted when a menu item is clicked (not emitted if disabled) | +
A card that appears when hovering over an element, perfect for displaying additional information.
+Software developer and open source contributor.
+This card appears on the right side.
+This card appears after a 500ms delay.
++ High-quality widget with premium features and lifetime support. +
+| Prop | +Type | +Default | +Description | +
|---|---|---|---|
| delay | +number | +200 | +Delay in milliseconds before showing the hover card | +
| Prop | +Type | +Default | +Description | +
|---|---|---|---|
| side | +string | +'bottom' | +Position of the hover card (top, right, bottom, left) | +
| align | +string | +'center' | +Alignment of the hover card (start, center, end) | +
A modal dialog component for displaying content that requires user interaction, with customizable sizes and positions.
+Modal content goes here.
+This is the outer modal.
+ +This is the inner modal.
+This is a small modal (384px).
+A popover component that displays floating content when clicking on a trigger element.
+This is the popover content.
+This popover appears on top
+This popover appears on the right
+This popover appears at the bottom
+This popover appears on the left
+Aligned to start
+Aligned to center
+Aligned to end
+A progress indicator component that displays the completion status of a task or process.
+A custom scrollable container with a native-like scrollbar design.
+{{ longText }}
+Always Visible
+{{ longText }}
+Visible While Scrolling
+{{ longText }}
+Visible on Hover
+{{ longText }}
+Native Behavior
+{{ longText }}
+Vertical Scrolling
+{{ longText }}
+Both Directions
+{{ longText }}
+A placeholder loading state that mimics the shape of the content that will be loaded.
+A step-by-step navigation component for guiding users through a process or workflow.
+A responsive table component for displaying tabular data with various styling options.
+A tabbed interface component for organizing and switching between different views.
+This is the account settings panel.
+This is the password change panel.
+This is the account settings panel.
+This is the password change panel.
+This is the settings panel.
+This is the profile settings panel.
+This is the notifications panel.
+This is the appearance settings panel.
+This is the active tab content.
+This is the disabled tab content.
+A notification component that displays brief, temporary messages to users.
+A popup component that displays informative text when users hover over or focus on an element.
++ FormKit checkbox component for boolean input and multiple selection with support for grouping and validation. +
++ FormKit color picker component for selecting and displaying colors with various formats and validation support. +
++ A custom FormKit input that provides a searchable dropdown with multi-select capability. +
++ FormKit date and time input components for selecting dates, months, weeks, and datetime values with validation support. +
++ A custom FormKit input for file uploads with drag and drop support, file preview, and validation capabilities. +
++ FormKit file upload component for handling single and multiple file uploads with validation support. +
++ A custom FormKit input that enforces specific input patterns for formatted data entry. +
++ FormKit input components for collecting user text input with built-in + validation and customization options. +
++ A custom FormKit input for one-time password (OTP) entry with individual digit boxes and auto-focus functionality. +
++ FormKit radio component for single selection from a list of options with various styling and validation capabilities. +
++ FormKit select component for single and multiple option selection with support for grouping and validation. +
++ A custom FormKit input for toggle switches with support for labels, colors, and states. +
++ FormKit textarea component for multi-line text input with various configuration options. +
++ FormKit time picker component for selecting time values with validation support. +
++ Create responsive and flexible form layouts using CSS Grid system. +
++ Organize form content into logical sections using cards and collapsible + containers. +
++ Enter your address details. +
++ Create multi-step forms with FormKit's built-in wizard functionality. +
+Welcome back, John Doe
+{{ stat.name }}
+{{ activity.user }}
+{{ activity.action }}
++ Customize your admin interface layout and direction +
+Set the font you want to use in the dashboard.
+Select the theme for the dashboard.
+Choose the layout style for your dashboard navigation.
+Set the text direction for your dashboard interface.
++ Change your account password and security settings +
++ Add an extra layer of security to your account +
++ Receive email notifications for password resets +
+Manage your account profile and preferences
++ JPG, GIF or PNG. Max size of 800K +
++ A collection of reusable UI components +
++ {{ sections[0].description }} +
++ {{ sections[1].description }} +
++ {{ sections[15].description }} +
+ ++ {{ sections[6].description }} +
+ ++ {{ sections[19].description }} +
+ ++ {{ sections[22].description }} +
++ {{ sections[7].description }} +
++ {{ sections[12].description }} +
+ ++ {{ sections[4].description }} +
+Card Content
++ {{ sections[17].description }} +
+ ++ {{ sections[16].description }} +
+ ++ {{ sections[3].description }} +
+ ++ {{ sections[14].description }} +
+ ++ Set the dimensions for the layer. +
++ This popover appears on the right side. +
++ {{ sections[13].description }} +
+ ++ The Vue Framework – created and maintained by @nuxt. +
++ This card appears on the right side with a custom delay. +
++ {{ sections[9].description }} +
++ {{ sections[23].description }} +
+ ++ {{ sections[10].description }} +
++ {{ sections[11].description }} +
++ {{ sections[21].description }} +
+ ++ {{ sections[8].description }} +
++ {{ sections[20].description }} +
++ {{ sections[18].description }} +
+ ++ {{ sections[5].description }} +
++ "This library has saved me countless hours of work and helped me + deliver stunning designs to my clients faster than ever before." ++
Sofia Davis
++ Enter your email address and we'll send you a link to reset your + password +
+ ++ Visual reference for the theme system components and utilities +
+{{ variantLabel }}
++ {{ variant === "DEFAULT" ? color : `${color}-${variant}` }} +
+{{ label }}
+{{ surface }}
+Regular paragraph text (text-base)
+Large text (text-lg)
++ Small muted text (text-sm) +
+Extra small text (text-xs)
+Italic text
+Semibold text
+Bold text
+{{ space.label }}
+{{ shadow.label }}
+{{ shadow.class }}
+{{ radius.label }}
++ "This library has saved me countless hours of work and helped me + deliver stunning designs to my clients faster than ever before." ++
Sofia Davis
++ Enter your credentials to access your account +
+ +
+ Don't have an account?
+
+ We collect information you provide directly to us when you create an + account, make a purchase, or communicate with us. This may include: +
++ We use the information we collect to provide, maintain, and improve + our services. This includes: +
++ We do not share your personal information with third parties except + as described in this privacy policy or with your consent. +
+ ++ We take reasonable measures to help protect information about you + from loss, theft, misuse, unauthorized access, disclosure, + alteration, and destruction. +
+ ++ You have the right to access, update, or delete your personal + information. You can do this through your account settings or by + contacting us directly. +
++ Last updated: March 14, 2024 +
++ Contact us at: + privacy@acme.com +
++ "This library has saved me countless hours of work and helped me + deliver stunning designs to my clients faster than ever before." ++
Sofia Davis
++ Enter your details below to create your account +
+ +
+ By clicking continue, you agree to our
+
+ By accessing this Website, you are agreeing to be bound by these + Website Terms and Conditions of Use and agree that you are + responsible for the agreement with any applicable local laws. +
+ ++ Permission is granted to temporarily download one copy of the + materials (information or software) on Corrad's Website for + personal, non-commercial transitory viewing only. +
+ ++ All the materials on Corrad's Website are provided "as is". Acme + Inc makes no warranties, may it be expressed or implied, therefore + negates all other warranties. +
+ ++ Corrad or its suppliers will not be held accountable for any + damages that will arise with the use or inability to use the + materials on Corrad's Website. +
+ ++ The materials appearing on Corrad's Website may include technical, + typographical, or photographic errors. Corrad will not promise + that any of the materials in this Website are accurate, complete, or + current. +
++ Last updated: March 14, 2024 +
+