Usage Basics

import { Button, Stack } from '@vaneui/ui';

function SizeExample() {
  return (
    <Stack>
      <Button xs>Extra Small</Button>
      <Button sm>Small</Button>
      <Button md>Medium</Button>
      <Button lg>Large</Button>
      <Button xl>Extra Large</Button>
    </Stack>
  );
}

import { Button, Row } from '@vaneui/ui';

function AppearanceExample() {
  return (
    <Row>
      <Button default>Default</Button>
      <Button primary>Primary</Button>
      <Button secondary>Secondary</Button>
      <Button success>Success</Button>
      <Button danger>Danger</Button>
      <Button warning>Warning</Button>
    </Row>
  );
}

import { Button, Card, Row } from '@vaneui/ui';

function ShapeExample() {
  return (
    <Row>
      <Button sharp>Sharp</Button>
      <Button rounded>Rounded</Button>
      <Button pill>Pill</Button>
    </Row>
  );
}

import { Stack, Text } from '@vaneui/ui';

function StackExample() {
  return (
    <Stack lg>
      <Text>Item 1</Text>
      <Text>Item 2</Text>
      <Text>Item 3</Text>
    </Stack>
  );
}

import { Row, Col, Card } from '@vaneui/ui';

function GridExample() {
  return (
    <Row>
      <Col>
        <Card>Column 1</Card>
      </Col>
      <Col>
        <Card>Column 2</Card>
      </Col>
    </Row>
  );
}

import { PageTitle, SectionTitle, Title, Text } from '@vaneui/ui';

function TypographyExample() {
  return (
    <Stack>
      <PageTitle>Page Title</PageTitle>
      <SectionTitle>Section Title</SectionTitle>
      <Title>Subsection Title</Title>
      <Text>Body text</Text>
    </Stack>
  );
}

import { Text, Stack } from '@vaneui/ui';

function ResponsiveExample() {
  return (
    <Stack>
      <Text>Always visible</Text>
      <Text smHide>Hidden on small screens</Text>
      <Text mdHide>Hidden on medium screens</Text>
      <Text lgHide>Hidden on large screens</Text>
    </Stack>
  );
}

import { Text, Button } from '@vaneui/ui';

function TagExample() {
  return (
    <div>
      <Text tag="h1">Heading</Text>
      <Text tag="span">Span text</Text>
      <Button tag="a" href="/link">Link Button</Button>
    </div>
  );
}