VOOZH about

URL: https://gluestack.io/ui/docs/components/card

⇱ gluestack-ui Card Component | Card Installation, Usage, and API

Home
Components
Hooks
Apps
Guides

Card

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@latest 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.
PlatformOutput
Web
<div />
Native
<View />
PropTypeDefault
size
sm | md | lgmd
variant
elevated | outline | ghost | filledelevated

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.
Edit this page on GitHub