- Design Documentation
-
- Color
-
- System
- Light
- Dark
-
-
-
-
- {colors.slice(0, moreColors ? colors.length : Math.min(15, colors.length)).map((color) => (
-
- ))}
-
-
-
- setMoreColors((val) => !val)}
- >{moreColors ? "Show less" : "Show more"}
-
-
- Typography
-
- {`This is normal text. `}
- This is normal text.
-
-
- Always wrap text in a {``} component. This way basic styling is applied and default browser values get overridden.
-
-
- {`This is a page title. `}
- This is a page title.
-
- {`This is a section title. `}
- This is a section title.
-
- {`This is small text. `}
- This is small text.
-
- {`This is code. `}
- This is code.
-
-
- Use the variant prop to apply pre-defined styles to your text.
-
-
- {`Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. `}
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-
- {`Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. `}
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-
-
- Use the maxLines prop to add a limit to the number of lines a text should have. Overflowing text will get replaced with three dots (... )
-
-
- {`This is colored text. `}
- This is colored text.
-
- {`This is colored text. `}
- This is colored text.
-
- {`This is colored text. `}
- This is colored text.
-
- {`This is colored text. `}
- This is colored text.
-
-
-
- {codeBlock`
-
- This is an external link.
-
- `}
-
-
-
- This is an external link.
-
-
-
- Iconography
-
- {``}
-
-
- {`
- {`
-
-
- Tag
-
- {`Tag `}
- Tag
-
-
-
- {codeBlock`
- Warning
-
- `}
-
-
- Warning
-
-
-
- Button
-
- {`Button `}
- Button
-
- {`Primary `}
- Primary
-
- {`Silent `}
- Silent
-
-
-
- {codeBlock`
-
- On Card
- On Card
-
- `}
-
-
-
-
- On Card
- Silent On Card
-
-
-
-
-
- {codeBlock`
-
-
-
- `}
-
-
-
-
-
-
-
-
- {codeBlock`
-
-
-
- `}
-
-
-
-
-
-
-
-
- {codeBlock`
-
-
-
- `}
-
-
-
-
-
-
-
-
- {codeBlock`
-
-
- Prefixed
-
- Button
-
- `}
-
-
-
-
- Prefixed
-
- Button
-
-
-
-
- {codeBlock`
-
-
-
-
- Playing
-
- `}
-
-
-
-
-
-
- Play
-
-
-
-
- {codeBlock`
-
-
-
-
- Switcher
-
-
-
- {codeBlock`
- // At the top of the component
- const [selectedItem, setSelectedItem] = useState(null);
-
- // Inside the render output
-
- Anime
- Themes
- Artists
-
- `}
-
-
-
- Anime
- Themes
- Artists
-
-
-
- Card
-
-
-
- {codeBlock`
-
- This is text inside a card.
-
- `}
-
-
-
- This is text inside a card.
-
-
-
-
- {codeBlock`
-
- This is a hoverable card.
-
- `}
-
-
-
- This is a hoverable card.
-
-
-
-
- {codeBlock`
- // At the top of the component
- const anime = /* ... */
-
- // Inside the render output
-
- `}
-
-
-
-
-
- Input
-
-
- {`
-
-
- Image
-
-
-
- {codeBlock`
- // At the top of the component
- const anime = /* ... */
-
- // Inside the render output
-
-
-
- `}
-
-
-
-
-
-
-
- Description List
-
-
-
- {codeBlock`
-
-
- Description
-
-
-
- Link
-
-
-
- `}
-
-
-
-
- Description
-
-
-
- Link
-
-
-
-
-
- Experimental
-
-
-
- {codeBlock`
- // At the top of the component
- const [season, setSeason] = useState(null);
-
- // Inside the render output
-
-
-
- Any
- Winter
- Spring
- Summer
- Fall
-
-
-
- {codeBlock`
-
- alert("1")}>Option 1
- alert("2")}>Option 2
- alert("3")}>Option 3
-
- `}
-
-
-
- alert("1")}>Option 1
- alert("2")}>Option 2
- alert("3")}>Option 3
-
-
-
- {codeBlock`
- // At the top of the component
- const { dispatchToast, closeToast } = useToasts();
-
- // Inside the render output
- dispatchToast(
- "example-toast",
- closeToast("example-toast")}
- >
- This is a toast.
- It will close in 10 seconds or if you click on it.
- ,
- 10_000
- )}>
- Show Toast
-
- `}
-
-
- dispatchToast(
- "example-toast",
- closeToast("example-toast")}
- >
- This is a toast.
- It will close in 10 seconds or if you click on it.
- ,
- 10_000
- )}>
- Show Toast
-
-
-
- Utils
-
-
-
- {codeBlock`
- // At the top of the component
- const [maxLines, toggleMaxLines] = useToggle(1, 0);
-
- // Inside the render output
-
-
-
-
- Lorem ipsum dolor sit amet ...
-
-
-
- Toggle text length
-
-
-
- `}
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-
-
-
- Toggle text length
-
-
-
-
-
- {codeBlock`
- // At the top of the component
- const [collapse, toggleCollapse] = useToggle();
-
- // Inside the render output
-
-
-
-
- Lorem ipsum dolor sit amet ...
-
-
-
- Toggle collapse
-
-
-
- `}
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-
-
-
- Toggle collapse
-
-
-
-
-
- );
-}
-
-interface ColorProps {
- color: keyof Colors
-}
-
-function Color({ color }: ColorProps) {
- return (
-