Astryx Bottom Sheet

Component

About

A mobile Astryx surface for filters, actions, forms, and detail views that rises from the bottom of the viewport.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Astryx Bottom Sheet to your project and fits it to your theme.

Code

How Astryx Bottom Sheet is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import {useState} from 'react';
import {BottomSheet} from '@/components/ui/astryx-bottom-sheet';
import {Button} from '@astryxdesign/core/Button';
import {Divider} from '@astryxdesign/core/Divider';
import {Heading} from '@astryxdesign/core/Heading';
import {Section} from '@astryxdesign/core/Section';
import {VStack} from '@astryxdesign/core/Stack';
import {Text} from '@astryxdesign/core/Text';

function BottomSheetNoScrim() {
  const [isOpen, setIsOpen] = useState(false);
  const [backgroundClicks, setBackgroundClicks] = useState(0);

  return (
    <Section padding={4}>
      <VStack gap={3}>
        <Heading level={3}>Nearby places</Heading>
        <Text type="body">Background interactions: {backgroundClicks}</Text>
        <Button
          label="Interact with page"
          variant="secondary"
          onClick={() => setBackgroundClicks(count => count + 1)}
        />
        <Button label="Show place details" onClick={() => setIsOpen(true)} />
      </VStack>
      <BottomSheet
        isOpen={isOpen}
        onOpenChange={setIsOpen}
        label="Place details"
        height="hug"
        hasScrim={false}>
        <VStack gap={4}>
          <Heading level={3}>Central Park</Heading>
          <Divider />
          <Text type="body">
            The page remains visible and interactive behind this sheet.
          </Text>
          <Button label="Close details" onClick={() => setIsOpen(false)} />
        </VStack>
      </BottomSheet>
    </Section>
  );
}

export default function BottomSheetNoScrimDemo() {
  return (
    <div
      data-astryx-theme="neutral"
      data-theme="light"
      style={{colorScheme: 'light', display: 'contents'}}>
      <BottomSheetNoScrim />
    </div>
  );
}