DOCSEARCHbyAlgolia
Submit Docs

Kube Design System

website·Indexed 31 days ago

https://kube.design

A design system and component library featuring layout components like Grid, Card, and Modal, as well as state management hooks including useToggle, useClickOutside, and useForceUpdate. Includes a KubedConfigProvider for customization and installation guides.

Tokens
19.3K
Snippets
150
Records
159
Agent score
58%

What's inside Kube Design

  1. Overview of Kube-design

    Kube-design is a suite of components, hooks, and icons. While it was originally built for the KubeSphere Console, it is designed to be used for developing any React-based web applications.

  2. Use the Group component for flexbox layouts

    The Group component is a vertically centered flex box used to arrange elements. By default, it centers elements vertically and allows for customization of horizontal alignment, spacing, and direction.
    import { Group, Button } from '@kubed/components';

function Example() {
  return (
    <Group>
      <Button>1</Button>
      <Button>2</Button>
      <Button>3</Button>
    </Group>
  );
}

  3. Use the Tag component for marking and selection

    The Tag component is used for marking and selection. It can be imported from the @kubed/components package.
    import { Tag } from '@kubed/components';

  4. Use the Popover component for floating content and actions

    The Popover component displays a floating card when a user clicks or hovers over a trigger element. Unlike a Tooltip, which only provides information, a Popover can contain interactive action elements such as links and buttons. It is ideal for providing extra information or a simple popup menu of operations.

  5. Display an empty state placeholder with the Empty component

    The Empty component is used to provide a friendly visual tip or placeholder when no data is available to be displayed in the UI.
    import { Empty } from '@kubed/components';

const App = () => {
  return <Empty desc={'No_Data'} />;
};

  6. Install the @kubed/icons package

    To use icon components in your project, you must install the @kubed/icons package via npm.
    npm install @kubed/icons

  7. Install Kube Design components

    Kube Design is a suite of components, hooks, and icons originally developed for the KubeSphere Console, but it is compatible with any React web application. To add Kube Design to your project, install the @kubed/components package via npm.
    npm install @kubed/components

  8. Implement global notifications using the Notify component

    The Notify component is used to display global notification messages. To trigger notifications, use the notify method and its variants (success, error, loading). The <Notify /> component must be placed in the JSX tree to render the notifications, and its position prop determines where the toasts appear (e.g., top-right).
    import { Notify, notify, Button, Group } from '@kubed/components';

const App = () => {
  const trigger = () => notify('Here is your Info.');
  const triggerSuccess = () => notify.success('Here is your success message.');
  const triggerError = () => notify.error('Here is your error message.');
  const triggerLoading = () => notify.loading('Here is your loading message.');

  return (
    <div>
      <Group>
        <Button onClick={trigger}>Blank</Button>
        <Button onClick={triggerSuccess}>Success</Button>
        <Button onClick={triggerError}>Error</Button>
        <Button onClick={triggerLoading}>Loading</Button>
      </Group>
      <Notify position="top-right" />
    </div>
  );
};

  9. Switch between two custom values using useToggle

    The useToggle hook allows you to switch between two specific state values. It takes an initial value and a tuple containing the two possible options. The hook returns the current value and a toggle function. Calling toggle() without arguments cycles between the two options, while passing a specific value sets the state to that value.
    import { useToggle } from '@kubed/hooks';
import { Button, Group } from '@kubed/components';

export default function App() {
  // initialValue: 'light', options: ['light', 'dark']
  const [value, toggle] = useToggle('light', ['light', 'dark']);

  return (
    <div>
      <p>themeType: `{value}`</p>
      <Group spacing="xl">
        <Button onClick={() => toggle()}>toggle</Button>
        <Button onClick={() => toggle('light')}>Set light</Button>
        <Button onClick={() => toggle('dark')}>Set dark</Button>
      </Group>
    </div>
  );
}

  10. Implement a side panel using the Sheet component

    The Sheet component is used to display content that complements the main screen content. It extends the Radix UI Dialog primitive. For core Dialog APIs, refer to the Radix UI documentation. The Sheet is composed of several sub-components: SheetTrigger to open the panel, SheetContent to hold the body, and SheetHeader/SheetFooter for layout structure.
    import { Sheet } from '@kubed/components';

const MySheet = () => (
  <Sheet.Sheet>
    <Sheet.SheetTrigger asChild>
      <button>Open Panel</button>
    </Sheet.SheetTrigger>
    <Sheet.SheetContent side="right" width={1200}>
      <Sheet.SheetHeader>
        <Sheet.SheetFieldTitle 
          title="Edit profile" 
          description="Make changes to your profile here." 
        />
      </Sheet.SheetHeader>
      <div>Body Content</div>
      <Sheet.SheetFooter>
        <Sheet.SheetClose asChild>
          <button type="submit">Save changes</button>
        </Sheet.SheetClose>
      </Sheet.SheetFooter>
    </Sheet.SheetContent>
  </Sheet.Sheet>
);

  11. Initialize Kubed in a React application

    Wrap the root of your application with the KubedConfigProvider to provide the necessary configuration context. It is recommended to include <CssBaseline /> inside the provider to normalize styles across the application.
    import { CssBaseline, KubedConfigProvider } from '@kubed/components';

const Application = () => (
  <KubedConfigProvider>
    <CssBaseline />
    <AppComponent />
  </KubedConfigProvider>
);

  12. Use the Button component to trigger operations

    The Button component is used to trigger business logic or operations. It is available in four primary types based on action priority:

    • Primary: Indicates the main action (maximum one per section).
    • Default: Indicates a series of actions without specific priority.
    • Text: Used for secondary actions.
    • Link: Used for external links.
    import { Button } from '@kubed/components';