Build beautiful interfaces with the gluestack-ui Card component. This React Native card offers a clean, modern design for any project. Perfect for seamless card design UI integration.This is an illustration of Card component.
size
Installation
npx gluestack-ui@alpha add card
API Reference
To use this component in your project, include the following import statement in your file.
import { Card } from '@/components/ui/card';
export default () => <Card />;
Component Props
This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
Card
Renders a
<div />
on web and a
View
on native.
Platform
Output
Web
<div />
Native
<View />
Prop
Type
Default
size
sm | md | lg
md
variant
elevated | outline | ghost | filled
elevated
Examples
The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
Card with Image
This is an example of a Card component with an image.
Advanced Composition
This is an example of a Card component with other components like Avatar, Image and Button.
Product Card
This example illustrates a card showcasing a product
Blog Card
This is an example of a Card component with a blog post.