Foxcore Cloud Components
Comprehensive showcase of all UI components in the design system. Use this page to visualize and customize component styles to match your brand.
Buttons
Various button styles and sizes for different actions
Variants
Sizes
States
Badges
Small status indicators and labels
Variants
With Icons
Cards
Content containers with various layouts
Basic Card
This is a card description that explains the content.
This is the main content area of the card. It can contain any type of content.
Card Variants
Standard card styling
Card with primary accent
Card with destructive accent
Form Elements
Input fields, labels, and form controls
Input Fields
We'll never share your email.
Field States
This field is valid
Field Groups
Navigation
Navigation menus and components
Navigation Menu
Overlays
Popovers and modal-like components
Popover
Layout
Separators and layout components
Separator
Horizontal separator:
Vertical separator:
Between content
Brand Colors
Current color palette used throughout the design system
Primary
oklch(0.705 0.213 47.604)
Secondary
oklch(0.967 0.001 286.375)
Destructive
oklch(0.577 0.245 27.325)
Muted
oklch(0.967 0.001 286.375)
Accent
oklch(0.967 0.001 286.375)
Border
oklch(0.92 0.004 286.32)