# Surface components

> Browse 19 Surface components for React, styled with Tailwind CSS and ready for your Next.js project.

19 components available. Showing all of them below.

- [Surface](https://21st.dev/@hero_ui/components/heroui-surface.md) — by Hero Ui
- [Surface](https://21st.dev/@hero_ui/components/heroui-surface/transparent.md) — by Hero Ui
- [Surface](https://21st.dev/@hero_ui/components/heroui-surface/tertiary.md) — by Hero Ui
- [Surface](https://21st.dev/@hero_ui/components/heroui-surface/secondary.md) — by Hero Ui
- [Card](https://21st.dev/@hero_ui/components/heroui-card/variants.md) — by Hero Ui
- [Material](https://21st.dev/@shugar/components/material-1.md) — by tigran tumasov
- [HeroUI Accordion](https://21st.dev/@hero_ui/components/heroui-accordion/surface.md) — by Hero Ui
- [Iridescent Foil](https://21st.dev/@dqnamo/components/iridescent-foil.md) — by dqnamo
- [Input](https://21st.dev/@hero_ui/components/heroui-input/on-surface.md) — by Hero Ui
- [Material](https://21st.dev/@shugar/components/material.md) — by tigran tumasov
- [HeroUI Checkbox Group](https://21st.dev/@hero_ui/components/heroui-checkbox-group/in-surface.md) — by Hero Ui
- [HeroUI Radio Group](https://21st.dev/@hero_ui/components/heroui-radio-group/in-surface.md) — by Hero Ui
- [Morph Surface](https://21st.dev/@cult-ui/components/morph-surface.md) — by cult/ui
- [Reshaped Card](https://21st.dev/@reshaped/components/reshaped-card/height.md) — by reshaped
- [Reshaped Card](https://21st.dev/@reshaped/components/reshaped-card/bleed.md) — by reshaped
- [Reshaped Card](https://21st.dev/@reshaped/components/reshaped-card/padding.md) — by reshaped
- [Reshaped Card](https://21st.dev/@reshaped/components/reshaped-card/raised.md) — by reshaped
- [HeroUI Input OTP](https://21st.dev/@hero_ui/components/heroui-input-otp/in-surface.md) — by Hero Ui
- [HeroUI Separator](https://21st.dev/@hero_ui/components/heroui-separator/with-surface.md) — by Hero Ui

Full component directory: https://21st.dev/llms.txt