DOCSEARCHbyAlgolia
Submit Docs

Slipstream UI Documentation

website·Indexed 31 days ago

https://slipstreamui.com

A React component library featuring a comprehensive set of general, form, layout, and navigation components. Includes documentation for components such as Button, Input, Table, and TabSet, as well as pre-built form templates for login, registration, and billing.

Tokens
14.3K
Snippets
98
Records
108
Agent score
57%

What's inside Slipstream UI

  1. Overview of SlipstreamUI features

    SlipstreamUI is a UI library built with Tailwind CSS that integrates with existing Tailwind implementations without overriding current styles. It supports RTL (right-to-left) layouts for multi-language support and provides opinionated components that remain customizable via Tailwind CSS classes.

  2. Overview of the Slipstream component library

    Slipstream is a component library built with React and Tailwind CSS. It combines the structure of traditional component-based CSS libraries with the flexibility of utility CSS frameworks, designed to be integrated into existing React and Tailwind applications.

  3. Use React components in Markdown with MDX

    SlipstreamUI supports MDX, which allows you to write JSX and embed React components directly within Markdown content. While not strictly required, using the .mdx file extension is recommended to ensure better support from IDEs and formatting tools like Prettier.

  4. Configure Label visual states and sizing

    The Label component supports several boolean and string props to modify its appearance:

    • Use the required prop to indicate a mandatory field (typically adds an asterisk).
    • Use the disabled prop to apply a disabled UI state.
    • Use the size prop to control the element size, accepting values sm, md, or lg (defaults to md).
    {/* Required Label */}
<Label required>I am a required label</Label>

{/* Disabled Label */}
<Label disabled>I am a disabled label</Label>

{/* Large Label */}
<Label size="lg">I am a large label</Label>

  5. Create tables in Markdown

    Tables are created using pipes (|) and dashes (-). Use colons in the separator row to align columns (left, center, or right). There must be at least 3 dashes separating each header cell.
    | Tables        | Are           | Cool    |
| ------------- | ------------- | -------:|
| col 3 is      | right-aligned | $1600   |
| col 2 is      | :---:         | $12     |
| zebra stripes | are neat      | $1      |

  6. Implement a responsive layout using the Col component

    The Col component is used within a Row and Container to create grid layouts. You can define the width of a column across different screen breakpoints using the xs, sm, md, lg, and xl props. Width values are typically expressed as fractions (e.g., "1/2", "1/3", "1/4") or keywords like "full".
    import { Col, Row, Container } from "slipstream-ui";

const Example = () => (
  <Container>
    <Row>
      <Col sm="1/2" md="1/3" lg="1/4">
        {/* Column content */}
      </Col>
    </Row>
  </Container>
);

  7. Implement a basic Avatar component

    The Avatar component from slipstream-ui can be used to display a user's profile image or initials. It supports basic text content as children or a specific label for initials.
    import { Avatar } from "slipstream-ui";

const Example = () => <Avatar>I am a message</Avatar>;

  8. Use the Row component to manage layout columns

    The Row component is an HTML element with associated styling used to control layout column components and manage the spacing or gaps between them. It is typically used as a wrapper for Col components inside a Container.
    import { Container, Row, Col } from "slipstream-ui";

const LayoutExample = () => (
  <Container>
    <Row>
      <Col>Column 1</Col>
      <Col>Column 2</Col>
      <Col>Column 3</Col>
    </Row>
  </Container>
);

  9. Write content using GitHub-flavored Markdown

    The platform supports GitHub-flavored Markdown (GFM) syntax for creating documentation content. This includes standard elements such as headers (H1-H6), emphasis (bold, italics, strikethrough), lists (ordered and unordered), links, images, tables, blockquotes, and inline HTML.

  10. Use FormGroup to group form elements

    The FormGroup component acts as a wrapper to create a controlled hierarchy of inner form elements. By default, it includes a bottom margin to visually separate different form groupings.
    import { FormGroup, Label, Input } from "slipstream-ui";

const Example = () => (
  <FormGroup>
    <Label>First Name</Label>
    <Input name="firstName" type="text" />
  </FormGroup>
);

  11. Install Slipstream UI

    Slipstream UI is a component library built on Tailwind CSS. Ensure Tailwind CSS is installed in your project before proceeding. Use the version of Slipstream UI that matches your Tailwind version:

    • For Tailwind 2.x: use slipstream-ui@1.x
    • For Tailwind 3.x: use slipstream-ui@2.x
    npm i slipstream-ui
# or
yarn add slipstream-ui