Cards are used to group related information and actions, providing a consistent container with proper styling and spacing.

Peter ParkerBiochemist
import Card from "@radui/ui/Card"
        
const CardExample = () => (
    <Card>
        Hello Card content
    </Card>
)
  • Provides a consistent container with proper spacing and borders
  • Supports custom styling through className and customRootClass
  • Can be customized with accent colors
  • Works well with other components to create structured layouts

A container component that groups related content and actions with consistent styling.

PropTypeDefault

children

ReactNode--

className

string''

customRootClass

string--

data-accent-color

string--
Edit this page on GitHub