# Flexnative > Open source shadcn/ui blocks for landing pages and marketing sites: hero, feature, content, CTA, testimonial and bento sections, plus patterns and Motion illustrations. Copy, paste and own the code. Every item is source code added to the user's project with the shadcn CLI, so the user owns and edits it. Items use shadcn/ui components, Tailwind CSS theme tokens and lucide-react icons. - Install any item: `npx shadcn@latest add @flx/`. The `@flx` registry is listed in the shadcn directory, or use the full URL `https://ui.flexnative.com/r/.json`. - Without the CLI, copy the code from the item's page. - Full registry index: https://ui.flexnative.com/r/registry.json ## Hero blocks - [Hero 01](https://ui.flexnative.com/blocks/hero/hero-01): A centered serif hero with a soft gradient wash, pill CTA, and a floating integration cloud. - [Hero 02](https://ui.flexnative.com/blocks/hero/hero-02): A left-aligned serif hero with a media panel: an image backdrop with a floating dashboard mockup on top. - [Hero 03](https://ui.flexnative.com/blocks/hero/hero-03): A centered hero with dual CTAs and an image that fades into the page below the copy. - [Hero 04](https://ui.flexnative.com/blocks/hero/hero-04): A two-column editorial hero with a soft background wash and a layered collage of two overlapping images. - [Hero 05](https://ui.flexnative.com/blocks/hero/hero-05): An editorial hero with a left tagline, right-aligned headline and copy, and a full-width image below. - [Hero 06](https://ui.flexnative.com/blocks/hero/hero-06): A split product hero with dual CTA, a compact logo row, and the Spot 01 illustration. - [Hero 07](https://ui.flexnative.com/blocks/hero/hero-07): An editorial hero with a full-width image above, a top-aligned tagline, and right-aligned headline and copy below. - [Hero 08](https://ui.flexnative.com/blocks/hero/hero-08): A split hero with a bold headline, avatar social proof, and two image cards with invertible overlay text and CTAs. - [Hero 09](https://ui.flexnative.com/blocks/hero/hero-09): A centered real-estate hero with a search bar, a masked architecture image that fades into the page, and a split closing statement. - [Hero 10](https://ui.flexnative.com/blocks/hero/hero-10): A centered hero with a highlighted headline, dual CTAs, social proof, and a fanned collage of three overlapping images. - [Hero 11](https://ui.flexnative.com/blocks/hero/hero-11): A split-copy hero with a light product studio mock — issue feed, properties, and a floating agent panel that fades into the page. - [Hero 12](https://ui.flexnative.com/blocks/hero/hero-12): A full-bleed image hero with an oversized name, an established label, and a floating pill CTA anchored to the corner. - [Hero 13](https://ui.flexnative.com/blocks/hero/hero-13): Asymmetric editorial hero with serif brand title, supporting copy, and two overlapping media frames. - [Hero 14](https://ui.flexnative.com/blocks/hero/hero-14): A centered product hero with dual CTAs, a full-width photo with a floating block-builder demo panel, and a logo strip. ## Content blocks - [Content 02](https://ui.flexnative.com/blocks/content/content-02): A grid of media cards with a section header and item details below each image. - [Content 04](https://ui.flexnative.com/blocks/content/content-04): Two-column card grid with a serif section header and copy above each image. - [Content 06](https://ui.flexnative.com/blocks/content/content-06): Two-column split with serif headline, supporting copy, optional CTA, and a media panel. - [Content 07](https://ui.flexnative.com/blocks/content/content-07): Two-column grid with serif header, media on top, copy, and optional CTA per column. - [Content 09](https://ui.flexnative.com/blocks/content/content-09): Two-column icon card grid with a serif section header. - [Content 11](https://ui.flexnative.com/blocks/content/content-11): A billing overview split with a dashboard preview card and two feature highlights, built for the app-shell preset. ## Feature blocks - [Feature 01](https://ui.flexnative.com/blocks/feature/feature-01): List of items: select one to reveal its description and media. - [Feature 02](https://ui.flexnative.com/blocks/feature/feature-02): A process section with a split title/description header and a portrait image flanked by two columns of numbered step cards. - [Feature 03](https://ui.flexnative.com/blocks/feature/feature-03): A sticky title/description column paired with a scrolling list of features, each with its own title, description, and media. ## Call to Action blocks - [Call to Action 01](https://ui.flexnative.com/blocks/cta/cta-01): A centered text block with a title, description, and CTA. ## Bento grids blocks - [Bento grids 01](https://ui.flexnative.com/blocks/bento-grids/bento-grids-01): Three-column bento: primary tile (two-thirds) with title, description, CTA and media, plus supporting image cards. ## Testimonials blocks - [Testimonials 01](https://ui.flexnative.com/blocks/testimonials/testimonials-01): A single testimonial with quote, avatar, author name and role. ## Carousel blocks - [Carousel 01](https://ui.flexnative.com/blocks/carousel/carousel-01): Auto-scroll carousel that pauses on item hover and reveals title. - [Carousel 02](https://ui.flexnative.com/blocks/carousel/carousel-02): A carousel of media with a title and description. - [Carousel 03](https://ui.flexnative.com/blocks/carousel/carousel-03): A carousel of cards with a title and description. ## Logos blocks - [Logos 01](https://ui.flexnative.com/blocks/logos/logos-01): Logo carousel with auto-scroll, edge gradient and minimalist style. ## Scroll blocks - [Scroll 01](https://ui.flexnative.com/blocks/scroll/scroll-01): Sticky media that changes as you scroll through text content. ## Illustrations - [Metrics](https://ui.flexnative.com/illustrations): A stat card with trend and sparkline, layered over a second. - [Notifications](https://ui.flexnative.com/illustrations): A fanned stack of notification cards. - [Media card](https://ui.flexnative.com/illustrations): An image card with a soft gradient fade and caption. - [Analytics](https://ui.flexnative.com/illustrations): A card with a gradient area chart. - [Dashboard preview](https://ui.flexnative.com/illustrations): A layered app dashboard with a floating notification. ## Patterns - [Avatar](https://ui.flexnative.com/patterns/avatar): Represent a user or entity with an image or initials. - [Badge](https://ui.flexnative.com/patterns/badge): Compact labels for status, counts, and metadata. - [Banner](https://ui.flexnative.com/patterns/banner): Page-level announcements, alerts, and promos that span the full width. - [Accordion](https://ui.flexnative.com/patterns/accordion): Stacked sections that expand and collapse to show or hide their content. - [Card](https://ui.flexnative.com/patterns/card): Group related content and actions in a bordered surface. - [Select](https://ui.flexnative.com/patterns/select): Pick one option from a list. - [Checkbox](https://ui.flexnative.com/patterns/checkbox): Toggle one or many options on and off. - [Switch](https://ui.flexnative.com/patterns/switch): Toggle a single setting on or off. - [Table](https://ui.flexnative.com/patterns/table): Display rows and columns of structured data. - [Dialog](https://ui.flexnative.com/patterns/dialog): Focused panel that opens above the page. - [Dropdown](https://ui.flexnative.com/patterns/dropdown): Menu of actions and choices triggered by a button. - [Input](https://ui.flexnative.com/patterns/input): Fields for typing and entering values. - [Button](https://ui.flexnative.com/patterns/button): Triggers for clicks and actions. - [Item](https://ui.flexnative.com/patterns/item): Show entries in lists, feeds, and settings rows. - [Tabs](https://ui.flexnative.com/patterns/tabs): Switch between views on the same page. - [Popover](https://ui.flexnative.com/patterns/popover): Floating panels triggered by a click. - [Tooltip](https://ui.flexnative.com/patterns/tooltip): Quick hints that appear on hover or focus. - [Breadcrumb](https://ui.flexnative.com/patterns/breadcrumb): Show the path to the current page. - [Pagination](https://ui.flexnative.com/patterns/pagination): Split content across pages and navigate between them. - [Collapsible](https://ui.flexnative.com/patterns/collapsible): Show and hide a section of content with a trigger. - [Command](https://ui.flexnative.com/patterns/command): Fast, composable command menu and searchable pickers. - [Skeleton](https://ui.flexnative.com/patterns/skeleton): Placeholder shapes that mimic content while it loads. - [Empty](https://ui.flexnative.com/patterns/empty): Placeholder states when there is nothing to show.