![Introducing Dashboard Analytics](https://cdn.sanity.io/images/cgdhsj6q/production/af327c5bd94708db501516a75da6870aef894c64-2286x1522.png?w=400&fit=max&auto=format)
Product
Introducing Dashboard Analytics
We're introducing a new Analytics feature in the Socket dashboard so you can view changes in your organization's and repositories' alerts over time.
@sanity/ui
Advanced tools
@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.
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>
);
}
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 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 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 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.
The Sanity UI components.
npm install @sanity/ui
# Install peer dependencies
npm install react react-dom react-is styled-components
import {Button, ThemeProvider, studioTheme} from '@sanity/ui'
import {createRoot} from 'react-dom/client'
const root = createRoot(document.getElementById('root'))
root.render(
<ThemeProvider theme={studioTheme}>
<Button text="Hello, world" />
</ThemeProvider>
)
MIT-licensed. See LICENSE.
FAQs
The Sanity UI components.
The npm package @sanity/ui receives a total of 183,160 weekly downloads. As such, @sanity/ui popularity was classified as popular.
We found that @sanity/ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 56 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're introducing a new Analytics feature in the Socket dashboard so you can view changes in your organization's and repositories' alerts over time.
Security News
A new OpenSSF report uncovers critical gaps in secure software training, with 75% of new developers unfamiliar with secure practices, highlighting urgent educational needs.
Security News
The 2023 Python Developers Survey reveals key trends in packaging, web frameworks, and developer demographics, highlighting a shift toward innovative tools as the Python community diversifies and grows among less experienced developers.