@ludekarts/base-ui v0.1.0-beta.15

Basic UI Components for React projects

Basic Components

GlobalStyles

Wrapper component that provides all base-ui utility classes.

  import { GlobalStyles } from "@ludekarts/base-ui";

  const App = props => <GlobalStyles><App/></GlobalStyles>;

Props

Available classes

CSS variables

Flex modifiers

Block modifiers

Spacing outside (margin)

Spacing inset (padding)

Push content in flex containers (margin)

Verical flex alignment

Horizontal flex alignment

|

Default focus

Cover Link

Text

Component for convinient text formatting.

  import { Text } from "@ludekarts/base-ui";

  . . .

  <Text as="h1" color="red" size="1.4em">This is h1 tag</Text>

Props

Form

Regular form with customized onSubmit handler with utilities for handling form data.

  import { Form } from "@ludekarts/base-ui";

  . . .

  const handleSubmit = data => {
    // data: object with all input fields names and their values e.g: { inputName: inputValue }.
  };

  <Form onSubmit={handleSubmit}>...</Form>

Props

Static helpers

Badge

Rounded badge.

  import { Badge } from "@ludekarts/base-ui";

  . . .

  <Badge>20</Badge>

Props

Interactive

Collapse

Animated container that can expand on it's content.

  import { Collapse } from "@ludekarts/base-ui/interactive";

  . . .

  const [showCollapse, toggleCollapse] = useState(false);

  <Collapse open={showCollapse} mnh={36}>Lorem ipsum dolor sit ammet...</Collapse>

Props

Slider

Container that slides its content horizontally or vertically.

  import { Slider } from "@ludekarts/base-ui/interactive";

  . . .

  const [activeSlide, setActiveSlide] = useState(0);

  <Wrapper styles={{width: "200px", height: "200px", position: "relative"}}>
    <Slider activeIndex={activeSlide} variant="vertical" loop>
      <div>SLIDE 1</div>
      <div>SLIDE 2</div>
      <div>SLIDE 3</div>
      <div>SLIDE 4</div>
      <div>SLIDE 5</div>
    </Slider>
  </Wrapper>

Props

NOTE:

By default Slider expands to fill its container. You need to define the dimensions for the container.

BreakpointClass

Switches classes base on given brakpoint.

  import { BreakpointClass } from "@ludekarts/base-ui/interactive";

  . . .
  
  <BreakpointClass breakpoint="(max-width: 980px)" beforeClass="class-a" afterClass="class-b">
    <div>Element 1</div>
    <div>Element 2</div>
  </BreakpointClass>

Props

Buttons

Basic

Simple, regular button.

  import { Button } from "@ludekarts/base-ui/buttons";

  . . .

  <Button>Hello</Button>

Props

NOTE:

All buttons have their boolean attributes defined as bool/number type. This allows to convert a button into Link tag from react-router-dom. When used as Link set boolean attribute (e.g. inverse) should ne set to numeric value: 1/0.

Underline

Button with animated underline .

  import { Underline } from "@ludekarts/base-ui/buttons";

  . . .

  <Underline>Hello</Underline>

Props

Ghost

Button with thick border empty inside.

  import { Ghost } from "@ludekarts/base-ui/buttons";

  . . .

  <Ghost>Hello</Ghost>

Props

Highlight

Button for highlight icons or glyphs.

  import { Highlight } from "@ludekarts/base-ui/buttons";

  . . .

  <Highlight>+</Highlight>

Props

Switch

Checkbox/Radio component with visual appearance of dot slider.

  import { Switch } from "@ludekarts/base-ui/buttons";

  . . .

  <Switch name="mySwitch" size="lg" color="red" offColor="gray" />

Props

Checkbox

Checkbox/Radio component with visual appearance of checkbox with a checkmark inside.

  import { Checkbox } from "@ludekarts/base-ui/buttons";

  . . .

  <Checkbox name="c3" color="red" defaultChecked />

Props

Close

Internally used close button for panels.

  import { Close } from "@ludekarts/base-ui/buttons";

  . . .

  <Close onClick={() => {}} size="2em" />

Props

Layout

Container

Description

  import { Container } from "@ludekarts/base-ui/layout";

  . . .

  <Container mxw="1200px">
    Content
  </Container>

Props

Stack

Arranges content items one under another.

  import { Stack } from "@ludekarts/base-ui/layout";

  . . .

  <Stack breakpoint="14rem">
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    ...
  </Stack>

Props

Rail

Arranges content items one next to another.

  import { Rail } from "@ludekarts/base-ui/layout";

  . . .

  <Rail gap="0.5em">
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    ...
  </Rail>

Props

NOTE:

Most effective usage of this component can be achieved with accompaniment of Vertical & Horizontal Alignment from <Global Styles/> component.

Grid

Organize content in dynamic grid.

  import { Grid } from "@ludekarts/base-ui/layout";

  . . .

  <Grid>
    <div>Cell</div>
    <div>Cell</div>
    <div>Cell</div>
    <div>Cell</div>
    ...
  </Grid>

Props

Columns

Displays children in columns.

  import { Columns } from "@ludekarts/base-ui/layout";

  . . .

  <Columns>
    <div>1 column</div>
    <div>2 column</div>
    ...
  </Columns>

Props

Cover

Covers parent container.

  import { Cover, Space } from "@ludekarts/base-ui/layout";

  . . .

  <Cover className="--v-center --h-center">
    <Space space="0 0 0 auto">Top right corner</Space>
    <Space space="auto">Center content</Space>
    <Space space="0 auto 0 0">Bottom left corner</Space>
  </Cover>

Sidebar

Displays children (only 2) as a sidebar and main content.

  import { Sidebar } from "@ludekarts/base-ui/layout";

  . . .

  <Sidebar>
    <aside>Sidebar content</aside>
    <main>Main content</main>
  </Sidebar>

Props

Space

Manipulates negative space.

  import { Space } from "@ludekarts/base-ui/layout";

  . . .

  <Space />

  <Space>
    Content
  </Space>

Props

Media

Image

Displats image with additional fallback error to image placeholder.

  import { Image } from "@ludekarts/base-ui/media";

  . . .

  <Image src="https://url/to/image.jpg" alt="This is image description" />

Props

Avatar

Image with same width and height.

  import { Avatar } from "@ludekarts/base-ui/media";

  . . .

  <Avatar src="https://url/to/image.jpg" size="2em" />

Props

AspectRatio

Renders container size with given ratio

  import { AspectRatio } from "@ludekarts/base-ui/media";

  . . .

  <AspectRatio>
    Content
  </AspectRatio>

Props

Ratios

Panels

Overlay

Black animated panel that covers entire screen.

  import { Overlay } from "@ludekarts/base-ui/panels";

  . . .

  <Overlay>
    Content
  </Overlay>

Props

Drawer

Animated panels that slides-in from right side of the screen.

  import { Drawer } from "@ludekarts/base-ui/panels";

  . . .

  const [showDrawer, toggleDrawer] = useState(false);

  <Drawer open={showDrawer} onClose={() => toggleDrawer(false)}>
    Content
  </Drawer>

Props

Modal

Description

  import { Modal } from "@ludekarts/base-ui/panels";

  . . .

    const [showModal, togglwModal] = useState(false);

  <Modal open={showModal} onClose={() => togglwModal(false)}>
    Content
  </Modal>

Props

Dropdown

Animated dropdown panel that can be triggered by adding data-bui-dropdown-target attribute with a dropdownName to any element.

  import { Dropdown } from "@ludekarts/base-ui/panels";

  . . .

  <button data-bui-dropdown-target="dropdownName">Toggle my dropdown</button>

  <Dropdown name="dropdownName" onToggle={ toggleState => {} } autoHide>
    Content
  </Dropdown>

Props

Progress

In progress ...