@sanity/ui

What is @sanity/ui?

@sanity/ui is a React component library designed to help developers build user interfaces for Sanity.io applications. It provides a set of customizable and accessible UI components that are consistent with the Sanity design system.

What are @sanity/ui's main functionalities?

Button

The Button component allows you to create customizable buttons with different tones and styles.

import { Button } from '@sanity/ui';

function App() {
  return (
    <Button text="Click me" tone="primary" />
  );
}

Card

The Card component is used to create a container with padding and shadow, useful for grouping content.

import { Card } from '@sanity/ui';

function App() {
  return (
    <Card padding={4} shadow={1}>
      <p>This is a card</p>
    </Card>
  );
}

TextInput

The TextInput component provides a styled input field for user text input.

import { TextInput } from '@sanity/ui';

function App() {
  return (
    <TextInput placeholder="Enter text" />
  );
}

Stack

The Stack component helps in arranging children components in a vertical stack with specified spacing.

import { Stack } from '@sanity/ui';

function App() {
  return (
    <Stack space={3}>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </Stack>
  );
}

Grid

The Grid component allows you to create a grid layout with specified columns and gaps between items.

import { Grid } from '@sanity/ui';

function App() {
  return (
    <Grid columns={3} gap={4}>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </Grid>
  );
}

Other packages similar to @sanity/ui

material-ui

Material-UI is a popular React component library that implements Google's Material Design. It offers a wide range of components and customization options, making it a versatile choice for building modern web applications. Compared to @sanity/ui, Material-UI has a larger community and more extensive documentation.

chakra-ui

Chakra UI is a simple, modular, and accessible component library that gives you the building blocks to build React applications with speed. It focuses on providing a set of composable and customizable components. Compared to @sanity/ui, Chakra UI emphasizes ease of use and flexibility.

ant-design

Ant Design is a comprehensive UI framework for enterprise applications. It provides a wide range of high-quality components and design guidelines. Compared to @sanity/ui, Ant Design is more feature-rich and is often used in large-scale applications.

semantic-ui-react

Semantic UI React is the official React integration for Semantic UI. It provides a set of components that follow the Semantic UI design principles. Compared to @sanity/ui, Semantic UI React focuses on providing a human-friendly HTML syntax and a wide range of themes.

README

@sanity/ui

The Sanity UI components.

npm install @sanity/ui

# Install peer dependencies
npm install @popperjs/core framer-motion react react-popper react-refractor styled-components

Usage

import {Button, studioTheme, ThemeProvider} from '@sanity/ui'
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <ThemeProvider theme={studioTheme}>
    <Button>Hello, world</Button>
  </ThemeProvider>,
  document.getElementById('root')
)

License

MIT-licensed. See LICENSE.