Skip to Content

Axiom Design System

Guides Components Styling

- Getting Started
- Installation
- Test Environments
- MCP Server
- Guides
- CSS Imports
- CSS Layers
- Icons
- Module Federation
- React Select
- Migrations
- Flex to Group migration
- Primitives
- Box
- Cover
- Flex LEGACY
- Grid
- Group
- Heading
- Separator
- Text
- Providers
- AxiomProvider
- AuthProvider
- Components
- Alert
- AlertDialog
- Avatar
- Badge
- Banner
- Breadcrumb
- Button
- Card
- Checkbox
- DataTable
- DateInput
- DateRangePicker
- DetailsPanel ALPHA
- Dialog
- Disclosure
- DropdownMenu LEGACY
- Field
- FileUpload ALPHA
- HoverCard ALPHA
- Indicator
- Input
- Layout ALPHA
- Link
- Menu
- Pagination
- Pill ALPHA
- PillMenu ALPHA
- Popover
- Progress
- RadioGroup
- Range ALPHA
- SearchInput
- SegmentedControl
- Select
- Sidebar
- Skeleton
- Sortable ALPHA
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- ToggleButton
- Tooltip
- Utilities
- ModalLayer
- Styling
- Style Props
- Design Tokens
- Responsive Styles
- Colors
- Layout
- Display
- Margin
- Object Fit
- Overflow
- Padding
- Z-Index
- Flexbox & Grid
- Align Items
- Align Self
- Flex
- Flex Direction
- Flex Wrap
- Gap
- Grid Column
- Grid Template Columns
- Justify Content
- Sizing
- Height
- Max Height
- Max Width
- Size
- Width
- Typography
- Font Family
- Font Size
- Font Weight
- Text Align
- Text Color
- Backgrounds
- Background Color
- Borders
- Border Color
- Border Radius
- Border Width
- Effects
- Box Shadow
- Transitions & Animation
- Animation
- Transition Property

Axiom Design System

Axiom is a modular design system for efficiently designing and building UI at Optimizely.

Last updated on December 8, 2025

Copyright 2024-present © Optimizely.