Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • How to Read This Documentation
    • Composition Philosophy
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Get Started

Getting Started with Clay

Clay is an extensive Component Library, where you'll find useful components—with extensive code examples—for your web application.

It is composed by 3 different layers, each one easy to understand and designed to fit different needs, allowing the developer to choose what to use without limitations

Advanced This is the final layer, ready to be used in your project with minimum customization and effort
Standard Built with React, this layer represents the right option for those who need an advanced set of components without any limitation
Simple Composed of HTML and CSS this is the perfect layer for those who want to use Clay as a simple library for their projects

Bootstrap

Clay is based on Bootstrap. This means it has a very solid foundation and it is easy to use because you are already familiar with it and it follows the same general patterns.

Lexicon

Because Clay is modeled after Lexicon's experience language, you can rest assured that your web application will have a consistent style and user experience.

Customizable 100%

Clay's powerful SCSS foundation allows you to create your own customizations easily.

React

Built with React to reduce the learning curve and simplify the integration with your other React projects.

How can this be improved? Create an issue!