0.1.17 • Published 5 months ago
@sakura-ui/sakura-ui v0.1.17
Sakura UI
Sakura UI - UI components built with Tailwind CSS for React. Sakura UI is an unofficial implementation of the Digital Agency Design System. The specifications for each UI component have been implemented with reference to the Digital Agency Design System.
Sample page
Install
$ npm install @sakura-ui/sakura-ui
or
$ yarn add @sakura-ui/sakura-ui
or
$ pnpm add @sakura-ui/core @sakura-ui/forms @sakura-ui/config
Configuration
tailwind.config.js
module.exports = {
mode: 'jit',
content: [
'./src/pages/**/*.{jsx,tsx}',
'./node_modules/@sakura-ui/core/**/*.{js,jsx,ts,tsx}',
'./node_modules/@sakura-ui/forms/**/*.{js,jsx,ts,tsx}'
],
plugins: [require('@sakura-ui/config')]
}
Add fonts from CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700&display=swap"
rel="preload"
/>
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100;200;300;400;500;600;700&display=swap"
rel="preload"
/>
...head
</head>
<body>
...body
</body>
</html>
Usage
import { useState } from 'react'
import { H1, H2, H3, H4, H5, H6, Button, IconButton } from '@sakura-ui/core'
const App = () => {
const [count, setCount] = useState(0)
return (
<div>
<H1>SakuraUI Heading1</H1>
<H2>SakuraUI Heading2</H2>
<H3>SakuraUI Heading3</H3>
<H4>SakuraUI Heading4</H4>
<H5>SakuraUI Heading5</H5>
<H6>SakuraUI Heading6</H6>
<div>
<Button onClick={() => setCount((count) => count + 1)}>
count is {count}
</Button>
<Button
variant="secondary"
onClick={() => setCount((count) => count + 1)}
>
count is {count}
</Button>
<IconButton icon="face">Face</IconButton>
</div>
</div>
)
}
export default App
Core components
- H1-H6 Headings
- Link
- Card
- InfoCard
- Ol
- Ul
- Table
- Caption
- Thead
- Tbody
- Th
- Tr
- Td
- Code
- Pre
- Button
- Icon
- IconButton
Form components
- Radio
- Checkbox
- Select
- Input
- Textarea
- LabelControl
- FieldsetControl
0.1.17
5 months ago
0.1.11
10 months ago
0.1.12
9 months ago
0.1.13
9 months ago
0.1.14
7 months ago
0.1.16
7 months ago
0.1.10
11 months ago
0.1.8
11 months ago
0.1.7
11 months ago
0.1.9
11 months ago
0.1.4
12 months ago
0.1.6
12 months ago
0.1.5
12 months ago
0.0.10
1 year ago
0.0.11
1 year ago
0.0.12
1 year ago
0.0.13
1 year ago
0.0.14
1 year ago
0.1.0
1 year ago
0.1.2
1 year ago
0.1.1
1 year ago
0.0.15
1 year ago
0.0.16
1 year ago
0.1.3
1 year ago
0.0.9
1 year ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago